[JavaScript] Switch 조건문 사용하기

조건문에서 비교할 초이스(값)이 많은 경우,
if-else문을 반복 사용하는 것보다 switch문을 이용하면 가독성을 높일 수 있다 👍
언젠가switch문이 유용하게 쓰일 날을 위해 예시 위주로 정리 해보려고 한다 :)

---

Switch문이란?

if…else 문의 조건식이 반드시 불리언 값으로 평가되는 반면,
switch 문의 표현식은 불리언 값보다는 문자열, 숫자 값인 경우가 많다.
if…else 문은 논리적 참, 거짓으로 실행할 코드 블록을 결정한다.
하지만 switch 문은 논리적 참, 거짓보다는 다양한 상황(case)에 따라 실행할 코드 블록을 결정할 때 사용한다.

• 참고: https://poiemaweb.co

기본 문법 (Syntax)

switch문의 기본 문법 구조는 다음과 같다.

switch 문은 switch 문의 condition을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 순서를 이동시킨다.

switch (condition) {
  case value1:
    statement1;
    break;
  case value2:
    statement2;
    break;
  ...
  default:
    statement3;
}

condition의 값이 value1이면 statement1을, value2면 statement2를, 그 어느 것도 아니라면 default가 적용되어 statement3을 실행한다.

조건이 맞아 break를 만나면 그 이후의 비교는 하지 않으며, switch문을 종료시킨다.

default문은 switch문의 가장 마지막에 위치하므로 default 문의 실행이 종료하면 switch 문을 빠져나간다. 따라서 break를 생략하는 것이 일반적이다.

예시 1.

default문이 없는 경우:

function caseInSwitch(val) {
  var answer = "";
  switch (val){
    case 1: 
      answer = "alpha";
      break; 
    case 2:
      answer = "beta";
      break;
    case 3:
      answer = "gamma"; 
      break;
    case 4:
      answer = "delta"; 
      break; 
  }
  return answer;
}

caseInSwitch(1);        //"alpha"

예시 2.

default문이 있는 경우:

function switchOfStuff(val) {
  var answer = "";
  switch (val){
    case "a":
      answer = "apple";
      break;
    case "b":
      answer ="bird";
      break;
    case "c":
      answer ="cat";
      break;
    default:
      answer ="stuff"; 
      break;
  }
  return answer;
}

switchOfStuff(1)       //"stuff"  
switchOfStuff("c")     //"cat"

예시 3.

여러 개의 조건이 같은 값을 공유하는 경우:

function sequentialSizes(val) {
  var answer = "";
  switch (val){
    case 1:
    case 2:
    case 3: 
      answer = "Low"; 
      break;
    case 4:
    case 5:
    case 6: 
      answer = "Mid";
      break;
    case 7:
    case 8: 
    case 9:
      answer = "High"; 
      break;
  }
  return answer;
}

sequentialSizes(1);      //Low
sequentialSizes(4);      //Mid
sequentialSizes(8);      //High

예시 4.

옵션이 많은 경우, if / else if문 대신 switch 문을 사용하는 것이 더 간편할 수 있다.
다음의 if / else if 문은,

function chainToSwitch(val) {
  var answer = "";
  if (val === "bob") {
    answer = "Marley";
  } else if (val === 42) {
    answer = "The Answer";
  } else if (val === 1) {
    answer = "There is no #1";
  } else if (val === 99) {
    answer = "Missed me by this much!";
  } else if (val === 7) {
    answer = "Ate Nine";
  }
  return answer;
}

다음과 같이 switch 문으로 대체할 수 있다.

function chainToSwitch(val) {
  var answer = "";
  switch(val) {
  case "bob":
    answer = "Marley";
    break;
  case 42 :
    answer = "The Answer";
    break; 
  case 1 :
    answer = "There is no #1";
    break;
  case 99 :
    answer = "Missed me by this much!";
    break;
  case 7 :
    answer = "Ate Nine";
    break;
  }
  return answer;
}

chainToSwitch(7);               //Ate Nine 
chainToSwitch(1);               //There is no #1
chainToSwitch("bob");           //Marley

---

Reference

*본 포스팅은 아래 사이트들을 참고 및 인용하여 작성되었습니다.
학습단계로 잘못된 정보가 있을 수 있습니다. 잘못된 부분에 대해 알려주시면 곧바로 정정하도록 하겠습니다 😊
https://www.codingfactory.net/10442
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements
https://poiemaweb.com/js-control-flow