js에는 if문을 대체할 수 있는 많은 문들이 존재해 코드를 더 깔끔하게 만들어준다. js를 새로 배우고 있는 입장에서 한 번 정리할 필요성을 느껴 쓰게 되었다.
- 삼항 조건 연산자 표현식 (ternary operator expression)
삼항 조건 연산자 표현식은 일반적으로 아래와 같다
const 변수 = 조건식 ? 참일때 반환되는 값 : 거짓일때 반환되는 값;실제 작동하는 코드의 예시는 아래와 같다.
const x = 2;
const result = x%2 ? 'odd' : 'even';암시적 표현 변환이 있기 때문에 x가 홀수라면 x%2가 1이 되면서 truthy 하게 된다. 따라서 result에는 'odd'가 할당된다. 짝수의 경우에도 마찬가지다.
위는 아래의 if else문과 동일하게 작동한다.
const x = 2, result;
if (x%2) result = 'odd';
else result = 'even';이때, if else 문은 값으로 평가될 수 없는 반면 삼항 조건 연산자는 가능함을 확인할 수 있다.
- switch문 (swtich statement)
switch (exp) {
case exp 1:
switch statement that will operate if exp equals exp1;
break;
case exp 2:
switch statement that will operate if exp equals exp2;
break;
default:
switch statement that will operate if none of the case exp equals exp;
}
사실 switch 문의 경우 if else 문으로 너무 쉽게 대체가능하다. 실제로 흔히 쓰이는 python에서는 switch문은 구현되어 있지 않다.
그러나, 다음 예시에 마음이 혹해 적어본다.
const year = 2021;
const month = 8;
const days = 0;
switch (month){
case 1: case 3: case 5: case 7: case 8: case 10: case 12:
days = 31;
break;
case 4: case 6: case 9: case 11:
days = 30;
case 2:
days = ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) ? 29: 28
break;
default:
console.log('Invalid month')
}위는 각 달이 몇 일이 있는지 확인하는 간단한 코드다. 첫번째 예시에서 case문마다 끝에 break문을 넣어주는 까닭은 폴스루(fall through)가 일어나기 때문이다. 폴스루를 통해 switch문의 flow를 파악할 수 있다.
첫째, 비교할 주표현식과 각각의 케이스 표현식이 일치할때 (===, strict comparison)까지 비교한다. 이때, 어떤 케이스와도 일치하지 않으면 default 안에 있는 문을 실행한다. 둘째, 일치한 케이스가 있다면 그 케이스 안의 문을 실행한다. 셋째, break문이 있다면 switch문을 끝낸다. 그러나, break문이 없다면 procedural하게 뒤에 있는 케이스를 계속 실행한다. 이것을 폴스루라고 부른다.
결국, 폴스루는 우리가 일반적인 기대와 다르게 진행되기 때문에 애로사항이 있을 수 있지만 위의 예시와 같이 적절하게 사용한다면 if else if문보다도 가독성이 좋아질 수 있다.
"use strict"
const expr = 'banana';
switch (expr) {
case 'Oranges':
console.log('Oranges are $0.59 a pound.');
break;
case true ? 'Apples' : 'Applemango':
console.log('Apples are free.');
break;
case 'Mangoes':
console.log('I hate mangoes');
case 'Papayas':
console.log('Mangoes and papayas are $2.79 a pound.');
break;
case function(){
return 'banana';
}:
console.log('Banana is delicious.');
default:
console.log(`Sorry, we are out of ${expr}.`);
}위의 예시를 통해 switch문을 거의 다 이해할 수 있지 않나 싶다. expr에 다양한 과일이름을 넣어가면서 직접 결과를 확인해보면 좋을 거 같다. case에는 리터럴만이 아닌 표현식이 들어올 수 있으므로 삼항 조건 표현식을 써도 잘 돌아간다.
반면에, 함수 표현식을 분명히 넣었는데도 default문이 실행됨을 확인할 수 있다. 이는 strict comparison이 돌아가는데 함수 자체도 객체이므로 return된 값과 expr이 비교되는 것이 아니라 함수 자체와 expr이 비교됨을 알 수 있다. 함수 안에 console.log('9')같은 걸 추가해서 실행해보면 알겠지만 함수는 애초에 실행되지 않는다.
- 논리적 대입 연산자 (logical assignment operators)
let a = 1;
a &&= 2;
let b = false;
b ||= true;
let c = undefined;
c ??= 'hello';새로 추가된 문법이라 하며 각각 다음의 if else문과 동치다.
let a = 1;
if (a){a = 2;}
let b = false;
if (!b){b = true;}
let c = undefined;
if (c === undefined){c = 'hello';}위의 두 개는 단축평가(short-circuit evaluation)를, 마지막은 null병합(nullish coalescing)의 줄임으로 보면 외우기 쉬울 거 같다. (+=와 비슷한 맥락)
let a = 1;
a = a && 2;
let b = false;
b = b || true;
let c = undefined;
c = c ?? 'hello';- 옵셔널 체이닝 연산자 (optional chaining)
별 건 없는데 자꾸 이름을 까먹어서 적어 놓는다.
let elem = null;
const value = elem?.value;피연산자가 null 또는 undefined의 경우 undefined를 반환하고, 그렇지 않으면 프로퍼티 참조를 이어나간다.
