[JS] 조건부 삼항 연산자 (Conditional operator)

UI 클론하는 강의에서 보너스(?) 자바스크립트 강의를 듣다가 처음 알게된 내용이 있어서 정리해본다.

조건부 삼항 연산자는 if문의 단축 형태이다.

const person = {
  name: "Jessie",
  age: 30,
  price: null,
};

어린이는 입장권 가격을 할인해주고 있고, 그것을 체크하는 코드를 만들어보자.

if (person.age <= 12) {
  person.price = "$6";
} else {
  person.price = "$10";
}

if문을 사용한다면 이렇게 체크해볼 수 있는데,

person.price = person.age <= 12 ? "$6" : "$10";

조건문 ? true일때 실행 코드 : flase일때 실행 코드
조건부 삼항 연산자를 사용하면 이렇게 한 줄로 줄일 수 있다.

삼항 연산자 중복 사용 (Nested Ternary)

조건문이 여러개 필요한 경우에는 삼항 연산자를 중복사용해서 표현할 수 있다.
위 코드에서 노인까지 할인 해 준다고 할 때

if (person.age <= 12) {
  person.price = "$6";
} else if (person.age >= 60) {
  person.price = "$8";
} else {
  person.price = "$10";
}

이렇게 표현 할 if문을 아래와 같이 표현할 수 있다.

person.price = person.age <= 12 ? "$6" : person.age >= 60 ? "$8" : "$10";

조건문 ? true일때 실행 코드 : 조건문2 ? true일때 실행 코드 : false일때 실행 코드

다중 조건 삼항 연산자 (Multiple operations)

조건에 따라 실행되는 코드가 여러개일 때는 다중 조건 삼항 연산자의 형태로 사용할 수 있다.
실행문이 많아지면서 코드가 복잡해지므로 소괄호로 묶어주고, 콤마로 구분한다.

person.age <= 12
  ? ((person.price = "$6"), alert("Kid"))
  : person.age >= 60
  ? ((person.price = "$8"), alert("Senior"))
  : ((person.price = "$10"), alert("Adult"));