[JavaScript] 조건부 삼항 연산자 사용 방법

조건부 삼항 연산자란 무엇이며 또 어떻게 사용할까요? 조건부 삼항 연산자는 자바스크립트에서 세 개의 피연산자를 사용할 수 있는 유일한 연산자로 보통 if 문을 간결하게 표현하기 위해 사용합니다.

조건부 삼항 연산자 예시

조건부 삼항 연산자는 어떻게 사용할까? 다음은 삼항 연산자를 사용한 함수의 예시입니다. 아래에서는 isWin이 true일 경우 10이 출력되고, false일 경우 0이 출력됩니다.

function getScore(isWin) {
    return (isWin ? 10 : 0);
}

console.log(getScore(true)); // 10
console.log(getScore(false)); // 0

조건부 삼항 연산자 사용 방법

조건부 삼항 연산자는 condition ? exprIfTrue : exprIfFalse 형태로 사용합니다. 즉, 특정 조건이 true 일 경우 첫 번째 값이, false 일 경우 두 번째 값이 반환됩니다. 아래의 if... else if 구문은 다음과 같이 조건부 삼항 연산자로 표현할 수 있습니다.

//if.. else if 구문
var func1 = function( .. ) {
  if (condition1) { return value1 }
  else if (condition2) { return value2 }
  else if (condition3) { return value3 }
  else { return value4 }
}

//조건부 삼항 연산자
var func2 = function( .. ) {
  return condition1 ? value1
       : condition2 ? value2
       : condition3 ? value3
       :              value4
}

이처럼 조건부 삼항 연산자를 사용하면 단순한 if 구문 뿐만 아니라 else if 구문까지 처리할 수 있습니다. 이를 활용해 점수를 부여하는 처음의 함수를 다음과 같이 수정해볼 수 있습니다.

function getScore(isWin, isDraw) {
    return (isWin ? 10
         : isDraw ? 5
         : 0);
}

console.log(getScore(true)) // 10
console.log(getScore(false, true)) // 5
console.log(getScore(false)) // 0

마치며

이상으로 자바스크립트 조건부 삼항 연산자에 대해 살펴봤습니다. condition ? exprIfTrue : exprIfFalse 방식으로 사용하며 이를 통해 if... else if 구문을 보다 간결하게 표현할 수 있습니다.

 

참고 자료

• MDN, 조건부 삼항 연산자