[Javascript] 물음표(?) / 삼항 연산자 / 조건 연산자 / 조건문

자바스크립트에서 삼항 연산자(Ternary operator)인 물음표에 대해 알아보자. 주로 if 문을 간단하게 표현하고 싶을 때 사용한다. 참과 거짓 중 하나를 선택할 수 있도록 만든 것으로 '조건 연산자'라고 한다. 

 

 

 

 

 

 

 

 

 

목차

1. 2항 연산자와 3항 연산자의 구분
2. 삼항 연산자 구문 표현
3. 삼항 연산자 사용법
4. 다중 삼항 연산

 

1. 2항 연산자와 3항 연산자의 구분

 

2항 연산자	3항 연산자
n > 5	n > 5 ? 9 : 2

 

2. 삼항 연산자 구문 표현

(조건) ? value1 : value2

 

조건이 참인 경우 물음표 바로 다음에 있는 value1이 실행되며, 거짓이면 value2가 실행된다. 

 

 

3. 삼항 연산자 사용법

삼항 연산자는 변수에 결괏값을 담아 필요할 때마다 변수를 사용한다. 같은 조건이 if 문과 삼항 연산자에서 어떻게 다르게 표현되었는지 아래에서 확인해보자. 아래와 같은 조건식의 경우 삼항 연산자를 사용하면 긴 if 문이 한 줄로 표현될 수 있기 때문에 아주 유용하다.

if 문

let a = 10;
let b = 6;
 
if (a > b) {
    console.log(true);
} else {
    console.log(false); 
}
 
// true

 

삼항 연산자

let a = 10;
let b = 6;
 
const value = (a > b) ? true : false;
 
console.log(value); // true

 

삼항 연산자는 아래와 같이 괄호 없이 사용이 가능하다. 삼항 연산자인 물음표(?)는 우선순위가 낮기 때문에, 비교 연산자(>)가 먼저 실행되고 그 후에 삼항 연산자가 실행되기 때문이다.

 

const value = a > b ? true : false;

 

4.  다중 삼항 연산

하나 이상의 조건이 있을 경우, 물음표를 여러 개 사용하여 표현할 수 있다. if 문과 비교해보자.

예제 1

if 문

const info = prompt('What is your number?');
 
if (info <= 5) {
    alert("5 이하입니다.");
} else if (info <= 10) {
    alert("10 이하입니다.");
} else if (info <= 15) {
    alert("15 이하입니다.");
} else {
    alert("15보다 큽니다.");
}

 

다중 삼항 연산

const info = prompt('What is your number?');
const message = (info <= 5) ? "5 이하입니다."
    : (info <= 10) ? "10 이하입니다."
    : (info <= 15) ? "15 이하입니다."
    : "15보다 큽니다.";
 
alert(message);

 

 

 

예제 2

if 문

const $btn = document.querySelector('#btn');
const myChoice = prompt('What is your favorite fruit?');
 
const clickButton = () => {
    if (myChoice === 'apple') {
        alert('사과');
    } else if (myChoice === 'strawberry') {
        alert('딸기');
    } else {
        alert('키위');
    }
}
 
$btn.addEventListener('click', clickButton);

 

다중 삼항 연산

const $btn = document.querySelector('#btn');
const myChoice = prompt('What is your favorite fruit?');
 
const clickButton = () => {
    const result = event.target.textContent === 'apple'
        ? '사과' // true
        : event.target.textContent === '딸기' // false
            ? 'strawberry' // true
            : 'kiwi'; // false
        
    alert(result);
}
 
$btn.addEventListener('click', clickButton);

 

같은 조건식이라도 다중 삼항 연산이 간단하게 표현되는 경우가 있으니 그때그때 맞게 사용하면 되겠다.