[JavaScript] 자바스크립트 삼항연산자 (조건부 연산자) 조건문 이해하기

[JavaScript] 자바스크립트 if문, 조건문 이해하기에 이어서 자바스크립트의 조건문에 해당하는 삼항 연산자에 대해서 정리해보자.

조건부 연산자라고 불리기도 하고, 삼항 조건 연산자라고 부르기도 한다.

 

삼항 연산자는 자바스크립트에서 유일하게 반드시 피연산자 3개가 필요한 연산자로 보통 if/else문의 단축형으로 활용된다.

[JavaScript] 자바스크립트 연산자(Operators) 이해하기 - 1에서도 정리한 적이 있는데 삼항 연산자의 문법은 아래와 같은 모양이다.

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

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

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

 

if/else문 대체하기

그럼 if/else문을 삼항연산자로 대체해보자.

let a = 0;

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

위 코드는 지난 if문을 정리할 때 작성했던 조건문이다. 이 조건문을 삼항 연산자로 바꾸면 다음과 같다.

let a = 0;

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

결과는 당연히 동일하고, 모양도 거의 비슷한 것 처럼 보인다.

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

(동작할 코드가 여러 개가 아니라면 소괄호는 생략해도 된다.)

 

중첩

삼항연산자도 if/else문처럼 내부적으로 중첩해서 다중 평가도 가능하다.

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문의 경우에는 변수에 바로 할당할 수 없고 조건식 안에서 할당 처리를 해줘야 한다. 

 

할당이 가능하다는 것은 함수에서도 빛을 발한다.

let hp = 98;
let mp = 0;

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

function checkMP() {
    return mp <= 0 ? '마나가 없습니다.' : `현재 마나는 '${mp}'입니다.`
}

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

(아직 함수에 대한 정리를 하지 않아서 가급적 사용하지 않으려고 했지만) 바로 직전의 코드를 함수로 만들어봤다.

함수내에서 if문을 활용할 경우 상황에 따라 return문을 매번 작성해줘야 하는 경우가 있다.

반면, 삼항연산자는 결괏값을 바로 할당할 수 있기 때문에, return문을 하나만 작성해도 충분히 코드를 완성할 수 있다.

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

 

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문이 할당연산자 보다 조금 더 다양한 제어를 할 수 있다는 장점이 있다고 볼 수 있다.

 

마무리

삼항연산자는 자바스크립트의 조건문을 훨씬 더 효율적이고 간결하게 작성하도록 도와준다.

하지만, if/else문을 무분별하게 대체해서는 안된다는 점을 if문과 삼항 연산자의 차이에서 확인할 수 있었다.

처음 삼항연산자에 대한 지식을 습득하고 무작정 if/else문을 대체하려던 시절이 있었는데,

앞으로는 명확하게 그 차이를 구분하고 상황에 따라 적재적소에 잘 활용할 수 있어야겠다.