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; |
[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) }); |
조건문 │ 단락평가
if( ok ){ doSomething( ); }
//단락평가 적용 ok && doSomething( ); |
아래 예제는 false와 관련된 구문이다.
ok = false일때, evaluate()의 첫번째 파라미터값으로 'good'이 전달된다.
if( !ok ){ ok = 'good' } evaluate(ok, search)
//단락평가 적용 evaluate( ok || 'good' , search);
|
'삼항연산자', '변수할당', '해체할당', '단락평가'
4가지를 적용하다보면 복잡한 조건문으로 난잡한 코드가 깔끔하게 정리된다.
'코드 스터디' 카테고리의 다른 글
『김밥 코드 』폴더생성 및 네임스페이스 코딩 (0) | 2021.03.30 |
---|---|
스타트업 아키텍트가 할일 (0) | 2021.03.28 |
『Zim.js』 간략정리 (0) | 2021.03.24 |
클린 아키텍처 (0) | 2020.12.28 |
GoF 디자인 패턴「행위편」 (0) | 2020.12.15 |
댓글