오늘도 화이팅! 안되는 건 없다! ✊🏻
참조: 제로초 ES2021 자바스크립트 강좌 유튜브
if
문과 switch
문 외에도 분기에 사용하는 식이 있습니다. 조건부 연산자 또는 삼항 연산자라고 합니다.
조건부 연산자의 기본 형식
조건식 ? 참일 때 실행되는 식 : 거짓일 때 실행되는 식
조건부 연산자는
문
이 아니라식
이기 때문에 결괏값이 있습니다.
5 > 0 ? '참입니다' : '거짓입니다' ;
'참입니다'
연산자의 우선순위가 조건부 연산자의 우선순위보다 높기 때문에 5>0이 먼저 실행되고, 이것이 조건식이 됩니다. 5>0 은 true이므로 '참입니다'가 결괏값으로 나옵니다.
> let value = 5 < 0 ? '참입니다' : '거짓입니다';
< undefined
> value;
< '거짓입니다'
대입 연산자의 우선순위가 제일 낮기 때문에 조건부 연산의 결괏값인 '거짓입니다'가 value변수에 대입됩니다.
switch
문을 if
문으로 바꿀 수 있는 것처럼 조건부 연산도 if
문으로 변경할 수 있습니다.
let condition = true;
let value = condition ? '참' : '거짓';
console.log(value);
let condition = true;
if (condition) {
value = '참';
} else {
value = '거짓';
}
console.log(value);
조건부 연산자로 압축을 하는 게 항상 좋은 것은 아닙니다. 가독성이 안좋아질수도 있습니다. 취향차이입니다.
조건부 연산자도 중첩해서 사용할 수 있습니다.
let condition1 = true;
let condition2 = false;
let value = condition1 ? condition2 ? '둘 다 참' : 'condition1만 참' : 'condition1이 거짓';
console.log(value);
> condition1만 참
이런 식이 있을 때는 당황하지 말고 (condition2 ? '둘 다 참' : 'condition1만 참') 으로 가운데 식을 묶어준 다음 이것을 먼저 계산을 하고 그 다음 밖에 있는 식을 계산해주면 됩니다. condition2는 false기 때문에 false쪽에 있는 'condition1만 참'이 선택이 되고 밖에 식으로 옮겨가는 순간 'condition1만 참'은 true 자리에 있게 됩니다. 그 다음 condition1 ? 이 실행이 되고 결국 value는 'condition1만 참'이 되는 것 입니다.
또 이렇게도 쓸 수 있습니다.
let condition1 = false;
let condition2 = true;
let value = condition1 ? 'condition1이 참' : condition2 ? 'condition2가 참' : '둘 다 거짓'
console.log(value);
> condition2가 참
이 경우에서는 condition2 ? 'condition2가 참' : '둘 다 거짓'
이 false 자리에 옵니다. 그래서 이걸먼저 계산하면 condition2는 true이므로 'condition2가 참'이 false 자리에 오게 됩니다. 그러고나서 condition1 ? 은 false기 때문에 false 자리에 있는 'condition2가 참'이 value에 결괏값이 됩니다.
! 문제 !
if문을 switch문과 조건부 연산자로 바꿔보세요
let cond = true; let value = ''; if (cond) { value = '참'; } else { value = '거짓'; }
let cond = true;
let value = '';
switch (cond) {
case true:
value = '참';
break;
case false:
value = '거짓';
break;
}
let cond = true;
let value = cond? '참' : '거짓';
console.log(value);
이렇게 바꿀 수 있습니다.