삼항 조건 연산자

조건부 삼항 연산자(conditional ternary operator) 는 세 개의 피연산 함수를 취할 수 있는 유일한 자바스크립트 연산자이다. 이 연산자는 if 문의 축약형으로 빈번히 사용된다. 

문법

condition ? expr1 : expr2 

파라미터

조건

true 혹은 false로 평가되는 표현식

expr1, expr2

모든 형식의 값을 지닌 표현식

상세설명

조건이 true이면, 연산자는 expr1의 값을 반환하며, 반대의 경우 expr2를 반환한다. 이를테면, isMember 변수의 값을 기초로 상이한 메시지를 보여주고자 한다면, 다음과 같이 표현할 수 있다.

"The fee is " + (isMember ? "$2.00" : "$10.00")

또한 다음과 같이 삼항(ternary)의 결과에 따라 변수를 할당할 수도 있다.

var elvisLives = Math.PI > 4 ? "Yep" : "Nope";

다음의 예제처럼, 다중 삼항(ternary) 평가도 가능하다(주의: 조건 연산은 우측부터 그룹핑 됩니다.)

var firstCheck = false,
    secondCheck = false,
    access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted";
  
console.log( access ); // logs "Access granted"

또한 다중 조건 IF 문과 같은 방식으로 여러개의 조건을 사용할 수도 있습니다.

var condition1 = true,
    condition2 = false,
    access = condition1 ? condition2 ? "Full pie": "Half pie": condition2 ? "Half pie" : "No pie, don't cry" ;

console.log(access); // logs "Half pie"

삼항(ternary) 평가는 다른 연산을 하기 위해 쓸 수도 있습니다.

var stop = false, age = 16;

age > 18 ? location.assign("continue.html") : stop = true;

: 기호를 이용해서 여러개의 연산도 가능합니다.

var stop = false, age = 23;

age > 18 ? (
    alert("OK, you can go."),
    location.assign("continue.html")
) : (
    stop = true,
    alert("Sorry, you are much too young!")
);

또한, 값을 할당하는 동안 하나 이상의 연산도 가능합니다. 이 경우에, 괄호 안의 값중 마지막 쉼표 (,) 다음의 값이 최종 할당 값이 됩니다.

var age = 16;

var url = age > 18 ? (
    alert("OK, you can go."), 
    // alert returns "undefined", but it will be ignored because
    // isn't the last comma-separated value of the parenthesis
    "continue.html" // the value to be assigned if age > 18
) : (
    alert("You are much too young!"),
    alert("Sorry :-("),
    // etc. etc.
    "stop.html" // the value to be assigned if !(age > 18)
);

location.assign(url); // "stop.html"

명세

브라우저 호환

참고

• if statement