ProgrammingJavaScript

(JavaScript) 삼항 연산자 Ternary Operator

Ternary operator, if, if...else, 삼항 연산자, 여러 if...else를 사용할 경우, 자바 삼항 연산자, 자바스크립트 else if, 자바스크립트 if

##[JavaScript] 삼항 연산자

- 삼항 연산자(Ternary operator)

삼항연산자

if문을 줄여서 사용할 수 있는 삼항 연산자! 아래와 같이 사용할 수 있습니다.

1
( 조건 ) ? 명령문1 : 명령문2; // 삼항연산자의 표현

조건 : 참 또는 거짓으로 평가되는 표현식입니다.
명령문1 : 조건이 참으로 평가될 경우 실행되는 문입니다.
명령문2 : 이 구문은 조건이 거짓일경우 다른 조항이 있을 때 실행되는 구문입니다.

예시를 들어 봅시다.

1
int b1 = (5>4) ? 50 : 40; // 결과 result : 50

조건이 참(true)여서 결과는 50이 됩니다. 위의 삼항 연산자를 if문으로 바꿔 사용하면 아래와 같습니다.

1
2
3
4
5
6
int b2 = 0;
if(5 > 4){
    b2 = 50;
}else{
    b2 = 40;
}

저는 삼항 연산자를 아래와 같이 자주 사용합니다. 만약 action_type이 modify면 읽을 수 밖에 없고 그 외에는 input 박스를 입력 가능하도록 합니다.

1
<input type="text" name="country" value="Norway" ${action_type == 'modify' ? 'readonly' : '' }>

- if…else

1
2
3
4
5
if (조건){
   명령문1 //true
}else {
   명령문2 //false
}

조건 : 참 또는 거짓으로 평가되는 표현식입니다.
명령문1 : 조건이 참으로 평가될 경우 실행되는 문입니다.
명령문2 : 이 구문은 조건이 거짓일경우 다른 조항이 있을 때 실행되는 구문입니다.

- 여러 if…else를 사용할 경우

1
2
3
4
5
6
7
8
if (조건1){
   명령문1
}else if (조건2){
   명령문2
}else if (조건3){
   명령문3
}else
   명령문N

조건 1, 2, 3 : 참 또는 거짓으로 평가되는 표현식입니다.
명령문 1, 2, 3 : 조건이 참으로 평가될 경우 실행되는 문입니다.
조건문 N : 모든 조건에 맞지 않을때 실행됩니다.

- else if

자바 스크립트에는 elseif 구문이 없습니다. 대신 else if 를 사용할 수 있습니다.

1
2
3
4
5
6
7
if (x > 5) {

} else if (x > 50) {

} else {

}

예시를 확인해 볼까요?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function example(…) {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}

// 위의 example함수는 아래와 같습니다. Equivalent to:

function example(…) {
    if (condition1) { return value1; }
    else if (condition2) { return value2; }
    else if (condition3) { return value3; }
    else { return value4; }
}

아주 자주 사용하게 되는 if 문 삼항연산자에 대해 알아보았습니다.

Reference

Share