(16) Modern JavaScript - 조건 연산자 (Conditional operator) = 삼항 연산자 (Ternary operator)

ES2015 이전에는 자바스크립트에서 조건을 다루는 방법이 

아래와 같이 if문과 switch문 두 가지 뿐이였다.

// 조건 연산자 (Conditional operator)
if (조건) {
  // 조건이 true 일 때 동작
} else {
  // 조건이 false일 때 동작
}

switch (값) {
  case A:
    // 값이 A와 일치할 때 동작
    break;
  default:
  // 값과 일치하는 case가 없을 때 동작
}

키워드 다음에 소괄호를 열어서 어떤 조건을 만들어 주고

그 조건에 따라서 코드 블록 내부가 동작하는 형태로 조건을 다루는 방식 이였다.

 

ES2015 이후에 새롭게 등장한 조건 연산자를 활용하면 

문장 형태의 코드 블록을 사용하지 않고 

좀 더 간결하게 표현식으로도 조건을 다룰 수가 있다. 

---

기본적인 문법 구조는 다음과 같다.

조건 ? truthy 할 때 표현식 : falsy 할 때 표현식

조건 연산자는 동작 방식이 if문과 매우 비슷하다.

물음표와 콜론(:) 이 조건 연산자의 연산 기호로 활용되며 

가장 왼쪽에 조건을 두고, 이 조건이 truthy할 때 가지는 표현식을 물음표(?) 다음에,

그리고 왼쪽의 조건이 falsy할 때 가지게 될 표현식을 콜론(:) 다음에 작성해 주면 된다.

 

조건 연산자는 연산의 기호가 두 개이고 연산 되는 값이 총 세 개 이므로

삼항 연산자 라는 이름으로 불리기도 하며 

자바스크립트에서 유일하게 항이 세 개인 연산자이기 때문에 

보통은 조건 연산자라고 부르지 않고 삼항 연산자라는 이름아 더 자주 언급된다.

한번 이 삼항 연산자를 활용하여 코드를 작성해보자.

---

PassChecker 함수를 보면 score 파라미터로 점수를 받고

return문에서 CUT_OFF 점수와 비교하여 합격 여부를 알려 줄 때의 삼항 연산자를 활용했다.

// 조건 ? truthy 할 때 표현식 : falsy 할 때 표현식
// 조건 연산자 = 삼항 연산자(Ternary operator)
const CUT_OFF = 80;
function passChecker(score) {
  return score > CUT_OFF ? "합격" : "불합격";
}
console.log(passChecker(70));

내용을 살펴보면,

score 값이 CUT_OFF 보다 크면 = truthy 하면 '합격' 문자열을 리턴하고

그렇지 않으면 =  falsy 하면 '불합격' 문자열을 리턴한다.

 

CUT_OFF 기본값을 80점으로,

함수를 호출할 때의 아규먼트가 70점 이므로 

최종 결과는 '불합격' 문자열을 리턴한다.

---

자바스크립트에서 조건을 다루는 방법이 if문과 switch문 두 가지 뿐이라고 했을 때,

당연히 삼향 연산자를 if문으로 작성할 수 있다.

const CUT_OFF = 80;
function passChecker(score) {
  // return score > CUT_OFF ? "합격" : "불합격";
  if (score > CUT_OFF) {
    return "합격";
  } else {
    return "불합격";
  }
}
console.log(passChecker(70));

코드는 똑같이 동작하기는 하지만 딱 봐도 간결함의 차이가 있다.

삼항 연산자를 활용하면 조건에 따라 값을 결정해야 하는 순간에 

if문보다 훨씬 더 간결하게 축약된 코드로 작성할 수 있다는 장점이 있다.

 

장점이 있다면 당연히 단점이 존재하는데,

무조건 if문 대신 사용해도 될 만큼 삼항 연산자만 사용해도 될 것 같아 보이지만

삼항 연산자는 표현식이기 때문에 아래와 같이 조건에 따라 변수를 선언한다거나

조건에 따라 반복문을 실행할 수는 없다.

그 말은 즉, 아래와 같은 상황에서는 삼항 연산자로 변환할 수 없다.

// 삼항 연산자는 변수를 선언하거나 조건에 따라 반복문 수행 X
const CUT_OFF = 80;
function passChecker(score) {
  // return score > CUT_OFF ? "합격" : "불합격";
  if (score > CUT_OFF) {
    const msg = "합격"; // 변수 선언하여 그 변수값을 리턴
    return msg;
  } else {
    for (let i = 0; i < 3; i++) {
      // 반복문
      console.log(i);
    }
    return "불합격";
  }
}
console.log(passChecker(70));

 

그래서 삼항 연산자가 모든 if문을 대체할 수 없다는 단점이 있다.