삼항연산자
헷갈릴수 있는 JavaScript 삼항연산자에 관해 정리한 글입니다.
목차
1
2
3
4
1. 삼항연산자란?
2. 삼항연산자 구조
3. 중복삼항연산자(연속된 조건문)
4. 참고자료 (Reference)
삼항연산자란?
1
2
3
조건부 삼항 연산자는 JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자입니다. 맨 앞에 조건문 들어가고. 그 뒤로 물음표(?)와 조건이 참truthy이라면 실행할 식이 물음표 뒤로 들어갑니다. 바로 뒤로 콜론(:)이 들어가며 조건이 거짓falsy이라면 실행할 식이 마지막에 들어갑니다. 보통 if 명령문의 단축 형태로 쓰입니다.
- mdn -
즉 간단히 말하면 if문의 단축형태로 사용할 수 있다.
삼항연산자 구조
조건문 ? 참일때 실행하는 식 : 거짓일때 실행하는 식
1
2
3
4
5
6
let a = 2;
let b = 0;
// 조건문 ? 참일때 실행하는 식 : 거짓일때 실행하는 식
a > b ? (a += 5) : (a -= 1);
console.log(a); //조건문이 true기 때문에 7이 나온다.
- null, NaN, 0, “”, undefined는 조건문의 false 값으로 사용 가능하다.
1
2
3
4
5
6
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) ? 참 : 거짓(마지막 값)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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이 나온다.