1004 TIL

기멜·2021년 10월 4일
0

자바스크립트 독학

목록 보기
19/44

오늘도 화이팅! 안되는 건 없다! ✊🏻
참조: 제로초 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);
  • if문
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 = '거짓';
}
  • switch문
let cond = true;
let value = '';
switch (cond) {
  case true:
    value = '참';
    break;
  case false:
    value = '거짓';
    break;
}
  • 조건부 연산자
let cond = true;
let value = cond? '참' : '거짓';
console.log(value);

이렇게 바꿀 수 있습니다.

profile
프론트엔드 개발자를 꿈꾸는 도화지 위를 달리는 여자

0개의 댓글