(JS) ES6: 삼항 조건 연산자

호두파파·2021년 1월 31일

JavaScript

목록 보기

9/25

조건부 연산자라고 불리기도 하고, 삼항 조건 연산자라고 부르기도 하는 삼항 연산자는 보통 if/else문의 단축형으로 활용된다.

삼항 연산자의 문법은 아래와 같다.

// 조건 ? 값1 : 값2
let age = 20; 

console.log(age >= 19 ? '성인입니다.' : '미성년자입니다.'); // 성인입니다.

삼항 연산자의 조건은 if문의 조건 부분에 해당하고, 값1은 if문의 동작 부분에, 값2는 else문의 동작 부분에 해당한다.

if / else문 대체하기

let a = 0;

if (a > 0) {
    console.log('안녕하세요!'); 
    console.log('조건식이 true입니다!');
} else {
    console.log('반갑습니다!'); //반갑습니다!
    console.log('조건식이 false입니다!'); // 조건식이 false입니다!
}

위 조건문을 삼항 연산자로 바꾸면 다음과 같다.

let a = 0;

a > 0 ? (
    console.log('안녕하세요!'),
    console.log('조건식이 true입니다!')
) : (
    console.log('반갑습니다!'), // 반갑습니다!
    console.log('조건식이 false입니다!') // 조건식이 false입니다!
)

if문에서 중괄호(블록문)은 소괄호로 대체하고, 세미콜론으로 문장을 구분하는 방식은 쉼표로 대체하면 된다.

중첩

let mm = 1000;

mm < 10 ? 
    console.log(mm + 'mm 입니다.') : 
    mm < 1000 ? 
        console.log(mm / 10 + 'cm 입니다.') :
        console.log(mm / 1000 + 'm 입니다.')

위 코드는 '1m입니다.'가 출력된다. 그런데 아무리 간단한 코드라고 하더라도 이렇게 중첩해서 삼항 연산자를 활용하게 되면, if문 보다는 가독성이 떨어져보이는 단점이 있다.

if문과 삼항연산자의 차이

1. 할당

let hp = 98;
let hpMsg;

if (hp <= 0) {
    hpMsg = '사망 했습니다.'
} else {
    hpMsg = `현재 체력은 '${hp}'입니다.`
}

let mp = 0;
let mpMsg = mp <= 0 ? '마나가 없습니다.' : `현재 마나는 '${mp}'입니다.`

console.log(hpMsg); // 현재 체력은 '98'입니다.
console.log(mpMsg); // 마나가 없습니다.

위 예시에서 mpMsg에서 확인할 수 있듯, 삼항 연산자는 조건에 대한 결과 값을 바로 변수에 할당할 수 있다. if문의 경우에는 변수에 바로 할당할 수 없고 조건식 안에서 할당처리를 해줘야 한다.

함수 내에서 if문을 활용할 경우 상황에 따라 return문을 매번 작성해줘야 하는 경우가 있다. 반면, 삼항연산자는 결괏값을 바로 할당할 수 있기 때문에, return문을 하나만 작성해도 충분히코드를 완성할 수 있다.

이러한 부분에서는 할당연산자가 if문보다는 좀 더 효율적인 장점이라고 볼 수 있다.

2.생성, scope

let firstName = 'bigtop';
let needFullName = true;

if (needFullName) {
    let lastName = 'kim';
    console.log(lastName + firstName); // kimbigtop
} else {
    console.log(firstName);
}

needFullName ? (
    let lastName = 'kim'; // Uncaught SyntaxError: Unexpected identifier
    console.log(lastName + firstName);
) : (
    console.log(firstName)
)

위 코드에서 볼 수 있듯이 if문과 삼항 연산자의 차이는, scope에서 나타난다.
if문은 중괄호로 감싸진 블록문으로 이루어져 있고, 삼항 연산자는 블록문을 만들 수 없다. 그렇기 때문에 자연스럽게 전역변수를 참조할 수 있는 있지만, 지역변수를 생성할 수는 없다는 한계를 가지고 있다.

이러한 부분은 if/else 문이 할당연산자 보다 조금 더 다양한 제어를 할 수 있다는 장점이 있다고 볼 수 있다.