JavaScript: 삼항연산자란?

JavaScript: What is the ternary operator

출처 : codeburst.io, Brandon Morelli

해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다.

 

삼항연사자와 함께 쓰인 if문을 간결하게 하는 방법과 4가지 예시를 함께 배울 것이다.

 

 

전형적인 IF 문

우리가 사람들의 나이를 가지고 있고, 만약 그들이 운전을 할 수 있는 나이라면 true 값을 할당하고 그렇지 않으면 false를 할당하고자 한다. 그리고 운전을 하기 위해서는 16세 이상이어야 한다고 가정해보자. 이 시나리오에서 IF문은 아래와 같을 것이다.

let age = 20;
let driver;

if (age >= 16) {
  driver = true;
} else {
  driver = false;
}

그러나 위 코드와 완벽한 코드를 단 두줄로 작성할 수 있다면? IF문을 단 한줄로 작성할 수 있다면 어떨까?

let age = 20;
let driver = age >= 16 ? true : false;

driver = true; 의 같은 결과로 코드를 간결하게 만들었다. 이것이 정상적으로 작동할까?

 

 

 

삼항연산자

삼항연산자의 문법은 꽤나 간단한다.

// ternary operator
condition ? value if true : value if false

// typical if statement
if ( condition ) {
  value if true;
} else {
  value if false;
}

1. 우리의 조건은 우리가 테스트하고자 하는 것을 의미한다. 여기에 ===, <=, >= 와 같은 조건문들이 들어간다.
2. ?는 조건문과 true value를 나눈다. ?와 : 사이의 값은 조건문의 evaluate된 값이 true일 때 실행될 값을 의미한다.
3. 마지막으로 : 은 콜론으로 조건문의 evaluate된 값이 false일 때 실행될 값을 의미한다.

 

 

다른 예제도 확인해보자.

이 예제에서 우리는 학생들을 위한 티켓할인이 있는 영화관을 위해 코드를 작성했다. 만약 학생이라면 티켓 값을 $8, 아니라면 $10이다.

let isStudent = true;
let price = isStudent ? '$8.00' : '$10.00'

console.log(price);
// '$8.00'

만약 영화관이 학생과 노인에게 할인을 제공한다면 어떻게 될까? 두가지 조건을 테스트하기 위해 삼항연산자를 중복하여 사용할 수 있다. 

 

이 시나리오에서 기본적인 티켓의 가격은 $10이다. 학생가격은 $8이고, 노인 가격은 $6이 된다.

let isStudent = false;
let isSenior = true;

let price = isStudent ? '$8.00' : isSenior ? '$6.00' : '$10.00'

console.log(price);
// '$6.00'

위 예제코드에서는 물음표와 콜론이 많이 포함되어 있다. 이것들을 분석해보자.

1. 먼저 우리는 isStudent를 테스트했다. ― 이 값이 false이기 때문에, : 다음의 코드가 실행된다 . : 다음에 우리는 새로운 조건문을 가지고 있다. 
2. 우리의 두번째 조건문 isSenior을 테스트한다. ― 이것인 true이기 때문에 ? 뒤, : 앞의 코드가 실행된다.
3. price에는 '$6.00'이 할당되고 화면에 출력되게 된다. 

 

 

삼상연산자와 다중의 작업들

뿐만 아니라 콤마와 함께 연산자들을 나눈다는 가정하에 삼항연산자에 여러가지 작업들을 중복해서 실행할 수도 있다. 

let isStudent = false;
let price = '$10.00';

isStudent ? (
  price = '$8.00',
  alert('Please check for student ID')
) : (
  alert('Enjoy the movie')
);

위 예시에서 영화의 price는 이미 $10로 할당되었다. 만약 isStudent가 true라면 우리는 가격을 $8로 낮출 것이다. 그리고나서 student ID를 체크하기 위한 alert 창을 띄울 것이다. 만약 isStudent가 false라면 우리는 'Enjoy the movie'를 alert할 것이다.