[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')
)