[JS] If-else와 switch 문의 차이

CheolHyeon Park·2022년 11월 3일

JavaScript

목록 보기

11/23

f-lab 멘토링 중, if문과 switch문이 어떤 차이가 있는지에 대한 질문을 받았습니다. 이에 대해 정확하게 답변할 수 없었습니다. 비슷한 상황에 사용하는 두 분기문이 어떤 점이 다른지 궁금하기도 하여 정리해보고자 합니다.

👉🏻 If문

If문 구조

if (Expression) Statement

// or

if (Expression) Statement else Statement

If문은 Expression 부분이 true면 If Statement를 실행하고 false면 else Statement를 실행합니다.

👉🏻 Switch문

Switch문 구조

switch (Expression) {
  case Expression: {
    // ...
  }
    
   // or
    
  case Expression:
    // ...
    
  default:
    // ... 
    
}

Switch문은 Expression의 값에 따라 case 값과 일치하는 곳으로 분기를 합니다.

❗️ 차이점

If문은 equality와 logical expression을 체크하고 Switch문은 equality만 체크합니다.
If문은 integer, character, boolean과 같은 타입을 평가하고 Switch문은 integer와 character만 평가합니다.
If문의 평가식이 false라면 else 문을 실행하는 반면 Switch문은 평가식과 맞는 case가 없다면 default문을 실행합니다.
If문은 장황하여 수정하기 어렵고 Switch문은 상대적으로 단순하여 수정이 쉽습니다.
If문은 런타임에 해석하여 분기하고 Switch문은 컴파일 과정에서 jump table을 만들어 분기하기에 비교적 성능상 이점이 있습니다.

위의 내용이 인터넷 검색으로 나온 If문과 Switch문의 차이점입니다. 하지만 의문점이 많이 남았습니다.

❓ 의문점

위 내용 중 첫번째 두번째 내용에 대해 아래와 같이 코드를 작성함으로써 If문을 대체할 수 있습니다.

const a = 0;
switch(true) {
  case a === 0:
    // 코드
  case f(a) === 'no':
    
}

위와 같이 Switch문을 true로 돌리면 case에 logical expression과 integer, character 외의 값을 넣어 평가할 수 있습니다. (심지어 함수도 평가 가능)

Switch문이 컴파일 타임에 jump table을 만드는지에 대한 의문입니다.
JS에서 Switch 문의 case는 동적으로 해석하는 것으로 보이기 때문입니다.

var a = 3;

switch(true) {
  case a++ > 5: console.log(a); break; 
  case a++ > 5: console.log(a); break;
  case a++ > 5: console.log(a); break;
  case a++ > 5: console.log(a); break;
  case a++ > 5: console.log(a); break;
} // 7

위 코드처럼 a++ > 5라는 case를 동적으로 해석하여 출력(7)하고 있습니다.

📝 결론

If문과 Switch문은 문법에 차이가 있고 동작방식의 소소한 차이가 있습니다. 하지만 서로 대체 가능하여 그 차이가 크지 않은 것 같습니다.

💡 개인적인 의견

If문과 Switch문의 차이는 사용 목적이 차이가 난다고 생각합니다. If-else는 두가지 옵션 중 한가지를 선택하는 경우에 사용하도록 ECMAScript에 명세에 되어있고(else if문은 없습니다. else후에 또 다른 if문이 나오는 겁니다.) Switch문은 여러 옵션 중에 한가지를 선택하는 경우에 사용하도록 명시되어있기 때문입니다.

결론을 내기가 어려웠습니다. 피드백은 달게 받겠습니다