자바스크립트 삼항 (조건) 연산자

`조건` `?` `참일 때 값` `:` `거짓일 때 값`

삼항 (조건) 연산자는 조건에 따라 다른 값을 선택하는 연산자입니다.
조건 ? 참일 때 값 : 거짓일 때 값 형태의 삼항으로 구성되며, 조건이 참이면 참일 때 값을, 거짓이면 거짓일 때 값을 선택합니다.

참고하세요!
'삼항 (조건) 연산자'를 '삼항 연산자'나 '조건부 연산자'라고도 부릅니다.
이 글에서는 이 연산자의 동작 방식을 명확하게 설명해주는 '삼항 조건 연산자'라고 부르겠습니다. 명세서인 ECMAScript에서는 'conditional operator(조건부 연산자)''라고 명기되어 있습니다.

연산자는 하나 이상의 값(프로그래밍 전문 용어로는 표현식)을 받아서 다른 값을 산출하는 것입니다.
삼항 조건 연산자는 조건에 따라 다른 값을 선택하는 연산자입니다.

구문

매개변수

삼항 조건 연산자의 매개변수
`condition`	평가될 조건식입니다. 이 조건이 참(`true`와 같거나, `true`로 치환될 수 있는 값)인지 거짓(`false`와 같거나, `false`로 치환될 수 있는 값)인지에 따라 결과가 결정됩니다.
`exprIfTrue`	조건이 참(`true`와 같거나, `true`로 치환될 수 있는 값)일 때 선택되는 값입니다.
`exprIfFalse`	조건이 거짓(`false`와 같거나, `false`로 치환될 수 있는 값)일 때 선택되는 값입니다.

예제

삼항 조건 연산자는 '조건에 따라 값을 달리하려는 목적'의 연산자입니다.
삼항 조건 연산자를 사용하지 않고 if...else 문으로도 조건에 따라 값을 달리할 수 있지만, 삼항 조건 연산자를 사용하면 조건문을 한 줄로 간결하게 표현할 수 있습니다.

JavaScript

/* if...else 문을 사용한 예시 */
let age = 20;

if (age > 18) {
    console.log("성인입니다.");
} else {
    console.log("미성년입니다.");
}

// "성인입니다." 출력

JavaScript 삼항 조건 연산자를 사용하면 조건문을 한 줄로 간결하게 표현할 수 있습니다.

/* 삼항 조건 연산자를 사용한 예시 */
let age = 20;
let isAdult = age > 18 ? "성인입니다." : "미성년입니다.";
console.log(isAdult); // "성인입니다." 출력

삼항 조건 연산자의 활용

JavaScript

/* 삼항 조건 연산자를 사용한
   성인/미성년 판별 함수 */
const checkAdult = age => {
    // 삼항 조건 연산자를 사용하여 나이에 따라 결과를 선택합니다.
    let result = (age > 18) ? "성인" : "미성년";
    console.log(result);
}

// 나이가 13이므로 "미성년"이 출력됩니다.
checkAdult(13); // "미성년"

// 나이가 22이므로 "성인"이 출력됩니다.
checkAdult(22); // "성인"

// 나이가 35이므로 "성인"이 출력됩니다.
checkAdult(35); // "성인"

부적절한 활용

삼항 조건 연산자를 if 문 대체처럼 사용하는 예는 삼항 조건 연산자의 조건에 따라 반환 값을 달리하려는 목적에 부합하지 않습니다.

연산자는 하나 이상의 값을 받아서 다른 값을 산출하는 것입니다. 구문을 대체하는 용도는 적절하지 않습니다.

위의 예제처럼 코드를 직접 작성하는 입장에서는 삼항 조건 연산자가 간결하다고 생각할 수 있지만, 코드를 읽는 사람의 입장에서는 가독성이 떨어지고 코드의 목적을 이해하기 어렵게 만들 수 있습니다. if 문과 같은 구문을 사용해야 할 때에는 삼항 조건 연산자가 가독성이 떨어질 수 있습니다. 다음의 예제가 더 적절하고 가독성이 좋습니다

삼항 조건 연산자를 활용할 때에는 다음의 예처럼 사용하는 것이 적절합니다.