[Javascript] If 조건문과 Switch 조건문의 차이

우테코 프리코스의 3주 차가 벌써 막바지에 다다랐습니다. 저는 현재 3주 차 미션의 리팩토링을 진행하고 있는데요, 저번 2주 차 피드백에서 “if문 대신 switch문을 쓰는 게 더 깔끔하게 보일 수 도 있다” 라는 피드백을 받았습니다. 이 피드백을 계기로 switch 구문과 If 구문의 차이점을 정확하게 알고 적시에 사용할 수 있는 역량을 길러보려고 합니다!

 

일단 저는 지금까지 개발 공부를 하며 switch 구문을 단 한 번도 사용해 본 적이 없습니다. 그리고 굳이 switch 구문을 사용해야 될 필요성도 못 느꼈죠. 그래서 if문의 설명은 생략하고, switch 구문의 특성부터 알아보도록 하겠습니다.

❓Switch 구문의 특성

1️⃣ 값에 따른 Case 분기

switch 구문에서의 case는 특정 변수나 표현식의 값을 평가하여 ‘case’에 대한 값과 일치 여부를 확인합니다. 이 때 ‘===’ 일치 연산자를 사용하여 비교합니다.

let fruit = 'Apple';

switch (fruit) {
  case 'Apple':
    console.log('사과입니다.');
    break;
}

2️⃣ Default Case

switch 구문에서는 Default Case가 존재합니다. 이는 if문의 else와 비슷한 기능인데요, 다음과 같이 사용할 수 있습니다.

let fruit = 'Apple';

switch (fruit) {
  case 'Apple': {
		console.log('사과입니다.');
    break;
	}
  default: {
		  console.log('다른 과일입니다.');
	}
}

3️⃣ Fall-Through

JS에서의 switch문은 각 case 블록이 끝날 때 ‘break’를 만나지 않으면 다음 case 블록으로 이동합니다. 이를 Fall-Through라고 합니다. 의도적으로 여러 case를 만나게 해 동작할 수 있게 할 수 있습니다.

let fruitsBag = ['Apple','banana'];

switch (fruitsBag ) {
  case fruitsBag.includes('Apple'): {
		console.log('사과기 있습니다.');
	}
  case fruitsBag.includes('banana'): {
		console.log('바나나가 있습니다/');
	}
}

❓굳이 switch문을 사용할 필요가 있을까?

이렇게 switch문의 특성에 대해서 알아봤습니다. switch 구문은 다양한 변수를 검사하고, 비교할 때 사용하기가 좋아 보이는데요, 그런데 굳이 switch 문을 사용 할 필요가 있을까요?

1️⃣ else if 구문을 지양하기 위해서?

if(조건1){
	로직1
}else if(조건2){
	로직2
}else{
	로직3
}

위의 코드를 switch 구문으로 바꿔봅시다.

switch(변수){
	case 조건1 : {
		로직1
		break;
	}
	case 조건2 : {
		로직2
		break;
	}
	default : {
		로직3
	}
}

switch 구문으로 바꾸었을때, 들여쓰기의 레벨로 인해 조건을 명확히 알 수 있고, 가독성이 좋아진 것을 확실하게 느낄 수 있습니다. 그런데, 굳이 switch를 사용해야 할까요? if문을 다음과 같이 작성해봅시다.

function 함수() {
	if(조건1){
		로직1
		return
	}
	if(조건2){
		로직2
		return
	}
	로직3
}

이렇게 고친다면, switch문과 크게 달라지는 게 없습니다. 들여쓰기 레벨도 default를 제외하곤 모두 같아져 가독성이 동일하기 때문입니다.

2️⃣ 성능 차이?

switch문과 if문의 성능 차이는 미미하나 switch문에서는 “점프 테이블 구조”를 사용한다는 특징이 있습니다.

점프 테이블 구조란 연산을 최적화 하기 위한 기술의 하나로, switch문에서 다양한 case 중 하나의 case를 선택하여 코드 블록을 실행하게 해주는데요, switch문에서는 각각의 조건문을 해쉬값으로 만들고, 조건에 해당하는 값에 직접적으로 점프하여 그 블록만 사용하게 됩니다.

따라서 if문에서는 모든 조건을 비교하여 블록을 수행하는데 반면, Switch 문에서는 값에 대한 빠른 참조로 빠른 실행이 가능합니다. 이는 case가 많아 질수록 큰 효과를 발휘하겠네요!

하지만 이것 역시 큰 차이는 없다고 합니다. 이는 JS엔진에서의 최적화를 수행하여 두 구문의 성능 차이를 크게 줄이기 때문이라고 합니다.

// 테스트할 함수
function testSwitch(value) {
  switch (value) {
    case 1:
      return "One";
    case 2:
      return "Two";
    case 3:
      return "Three";
    case 4:
      return "Four";
    case 5:
      return "Five";
    case 6:
      return "Six";
    case 7:
      return "Seven";
    case 8:
      return "Eight";
    case 9:
      return "Nine";
    case 10:
      return "Ten";
    default:
      return "Other";
  }
}

function testIf(value) {
  if (value === 1) return "One";
  else if (value === 2) return "Two";
  else if (value === 3) return "Three";
  else if (value === 4) return "Four";
  else if (value === 5) return "Five";
  else if (value === 6) return "Six";
  else if (value === 7) return "Seven";
  else if (value === 8) return "Eight";
  else if (value === 9) return "Nine";
  else if (value === 10) return "Ten";
  else return "Other";
}

const iterations = 1000000;
let valueToTest = 5; // 테스트할 값

console.time("Switch Test");
for (let i = 0; i < iterations; i++) {
  testSwitch(valueToTest);
}
console.timeEnd("Switch Test");

console.time("If Test");
for (let i = 0; i < iterations; i++) {
  testIf(valueToTest);
}
console.timeEnd("If Test");

1. Switch Test: 8.829ms, If Test: 6.846ms
2. Switch Test: 6.798ms, If Test: 6.756ms
3. Switch Test: 6.739ms, If Test: 8.085ms
4. Switch Test: 7.233ms, If Test: 9.789ms
5. Switch Test: 6.86ms, If Test: 7.144ms

❗내가 내린 결론..!

일단 굳이 switch문을 사용하는 것은 별로 좋은 선택은 아니란 생각이 드네요. 성능적으로 차이도 없고, 가독성 면에서도 else if 대신 if return을 사용하는 방식으로 큰 이점을 가지지 못하는 것 같아요. else 구문을 사용할 때 정도는 switch문으로 사용하는 게 좋아 보이기도 하네요.

그래도 앞으로 계속 코드를 짜다보면 switch문을 사용하면 좋을 때가 올 수도 있겠다 생각하며 적시에 잘 사용하도록 하겠습니다!

else를 사용하는 구문이 아니라면, 굳이 switch를 사용할 필요는 없어보인다.