[Javascript] 조건부 연산자(조건부 삼항 연산자), if문과 비교

조건문에는 대표적으로 if문과 switch문이 있다. 문이 아닌 식으로 분기를 처리할 수 있는 방법이 있는데 바로 조건부 (삼항) 연산자이다. 보통 if문의 단축 형태로 쓰인다. 조건부 연산자는 자바스크립트에서 유일하게 피연산자가 3개 필요한 연산자이다. 조건부 연산자의 형식은 아래와 같다.

 

 

 

 

 

목차

1. 조건부 연산자 형식
2. if 조건문 대체
3. 조건부 연산자의 중첩

 

 

 

조건부 연산자 형식

조건식 ? 참일 때 실행할 식 : 거짓일 때 실행할 식

 

1 < 3 ? '참' : '거짓';

// 참

 

 

 

 

if 조건문 대체

if 조건문을 조건부 연산자 형태로 변경할 수 있다. 

 

let bool = true;

if (bool) {
  console.log('참입니다.');
} else {
  console.log('거짓입니다.');
}

// 참입니다.



let value = bool ? '참입니다.' : '거짓입니다.';
console.log(value);

// 참입니다.

 

 

 

 

조건부 연산자의 중첩

let bool1 = true;
let bool2 = false;
let value = bool1 ? bool2 ? '모두 참입니다' : 'bool1만 참입니다' : 'bool1이 거짓입니다.'

console.log(value);

// bool1만 참입니다

 

위와 같이 중첩된 조건부 연산자의 경우 if 조건문보다 가독성이 떨어진다는 단점이 있다. 이 경우 소괄호를 사용하거나 들여 쓰기로 가독성을 높이면 된다.

 

let bool1 = true;
let bool2 = false;
let value = bool1 ? (bool2 ? '모두 참입니다' : 'bool1만 참입니다') : 'bool1이 거짓입니다'

console.log(value);

// bool1만 참입니다

 

소괄호 부분은 bool1이 참일 때 실행되는 영역이라고 생각하면 된다. 아래 순서대로 파악해보자.

 

1. bool1 ? (bool1이 참일 때 실행) : 'bool1이 거짓입니다.' 
2. bool1이 true이므로 소괄호 안을 확인한다.
3. bool2가 false이므로 'bool1만 참입니다'가 실행된다.

 

 

조건부 연산자 들여 쓰기의 경우 아래와 같이 구분한다.

 

let bool1 = true;
let bool2 = false;
let value = 
  bool1 
    ? bool2 
      ? '모두 참입니다'
      : 'bool1만 참입니다'
    : 'bool1이 거짓입니다.'

console.log(value);

// bool1만 참입니다