if ... else if ... 조건문의 작동 방식

javascript
,

js의 else if 문에 대해서

보통 자바스크립트를 사용할 때 조건식 분기를 if … else if … 문을 사용하여 표현하고는 했다. 

1
2
3
4
5
6
7
8
a = 3;
if (a === 5) {
    // pass
} else if (a === 2) {
    // pass
} else {
    // pass
}

위와 같이 작성하곤 했는데, 겉으로 보기에는 마치 조건을 병렬적으로 표현한 것 같은 느낌을 준다. 바로 병렬적으로 표현한 것 같다는 느낌 때문에 논리적 오류를 범하기 매우 쉬우며 실제로 조건문은 활용한 코드 중 대다수의 에러는 여기서 발생한다고 한다.

위의 코드는 a가 5일 때 | a가 2 일 때 | 5도 아니고 2도 아님을 분기하는 것이 아닌 a가 5일 때 | a가 5가 아니면서 a가 2일 때 | a가 5가 아니면서 2도 아니고 그 이외임을 나타내는 것이다. if … else if … 문이 병렬조건을 표현하는 것이 아닌 중첩된 조건임을 표현하는 코드로는 아래와 같이 작성하는 것이 훨씬 명확할 것이다.

1
2
3
4
5
6
7
8
9
10
a = 3;
if (a === 5) {
    // pass
} else {
    if (a === 2) {
        // pass
    } else {
        // pass
    }
}

if … else if … 문이 위와 같은 이유로 헷갈리는 이유는 else가 후방 결합을 하기 때문이며 명심하도록 하자!!

Share