JavaScript 삼항연산자

헷갈릴수 있는 JavaScript 삼항연산자에 관해 정리한 글입니다.

목차

1. 삼항연산자란?
2. 삼항연산자 구조
3. 중복삼항연산자(연속된 조건문)
4. 참고자료 (Reference)

삼항연산자란?

조건부 삼항 연산자는 JavaScript에서 세 개의 피연산자를  
취할 수 있는 유일한 연산자입니다. 맨 앞에 조건문 들어가고 그 뒤로 
물음표(?)와 조건이 참truthy이라면 실행할 식이 물음표 뒤로 들어갑니다.  
바로 뒤로 콜론(:)이 들어가며 조건이 거짓falsy이라면 실행할 식이 마지막에 들어갑니다.  
보통 if 명령문의 단축 형태로 쓰입니다.

- mdn -

즉 간단히 말하면 if문의 단축형태로 사용할 수 있다.

삼항연산자 구조

조건문 ? 참일때 실행하는 식 : 거짓일때 실행하는 식

let a = 2;
let b = 0;
// 조건문 ? 참일때 실행하는 식 : 거짓일때 실행하는 식
a > b ? (a += 5) : (a -= 1);

console.log(a); //조건문이 true기 때문에 7이 나온다.

• null, NaN, 0, "", undefined는 조건문의 false 값으로 사용 가능하다.

let a = 2;
let b = 0;

null ? (a += 5) : (a -= 1);

console.log(a); // 1이 나온다.

때문에 null을 판별할때도 쓰일수 있다.

2. 중복삼항연산자(연속된 조건문)

if...else if...else if...else와 같은 연속된 조건문도 삼항연산자로
표현이 가능하다.

• 구조

(조건문1) ? 참 : (조건문2) ? 참 : (조건문3) ? 참 : 거짓(마지막 값)

let a = 10;
let b = 5;
let c = 2;

let num = 1;

num > a
    ? (num -= 3)
    : num > b
    ? (num -= 2)
    : num > c
    ? (num -= 1)
    : (num += 20);
// 아래의 코드와 동일한 결과가 나온다.

// if (num > a){
//   num -= 3;
// } else if(num > b){
//   num -= 2;
// } else if (num > c){
//   num -= 1
// } else {
//   num += 20;
// };

console.log(num); // 21이 나온다.

5. 참고자료 (Reference)

삼항 조건 연산자

---

틀린점, 오타에 대한 것은 언제든지 알려주세요!