JS매력적인 코드『 삼항 연산자 || 변수할당 || 단락평가 』

ES2015 이후부터 자바스크립트는 변했다.

 

그중에서 매력적인 구문은

'변수(해체) 할당'

'화살표 함수'

'삼항 연산자'

'단락평가'

4가지 정도가 아닐까한다.

 

 

---

삼항연산자 │ 줄이기

a > b ? car = '현대' : car = '기아' ;

 

삼항연산자는 다음과 같이 어떻게든 더 줄여야한다.

 

car = a > b ? '현대' : '기아' ;

 

 

 

---

삼항연산자 │ 해체[변수]할당 적용

c > d ? a.name = '현대' : a.name = '기아'

삼항 연산자는 객체할당을 통해

중복을 제거한다.

 

a = { [ c > d ? '현대' : '기아' ] , 'name'   };

 

 

 

---

변수할당 │ 해체할당 적용

 객체명 = { [ 조건문 ? 지정값1 : 지정값2 ] ,  속성명  }

 

ES6 이후부터 해체, 변수할당이 가능하므로

위와 같이 삼항연산자 식에서도 적극적으로 활용할 수 있다.

 

const bmw = toyota.deviceA; const benz = toyota.deviceB; //해체할당 적용 const { ['deviceA']:bmw , ['deviceB']:benz } = toyota

[ex.해체할당]

 

 

let apple = fruit[0] let orange = fruit[1]   //변수할당 적용 let [ apple , orange ] = fruit;

 

참고적으로 변수할당은 DOM구조를 정리할 때

유용하게 사용할 수 있다.

 

const div1 = document.getElementById('div1'); const div2 = document.getElementById('div2'); const div3 = document.getElementById('div3'); const div4 = document.getElementById('div4'); //변수할당 적용 const el = { }; [ 'div1', 'div2', 'div3', 'div4' ].forEach(item =>{ ...el, [item] : document.getElementById(item) }); const { div1, div2, div3, div4 } = el;

 

 

 

---

조건문 │ 단락평가

if( ok ){ doSomething( ); }   //단락평가 적용 ok && doSomething( );

 

아래 예제는 false와 관련된 구문이다.

ok = false일때, evaluate()의 첫번째 파라미터값으로 'good'이 전달된다.

 

if( !ok ){ ok = 'good' } evaluate(ok, search)   //단락평가 적용 evaluate( ok || 'good' , search);

 

 

'삼항연산자', '변수할당', '해체할당', '단락평가'

4가지를 적용하다보면 복잡한 조건문으로 난잡한 코드가 깔끔하게 정리된다.