자바스크립트 switch

switch문

복수의 if 조건문은 switch문으로 바꿀 수 있습니다.

switch문을 사용한 비교법은 특정 변수를 다양한 상황에서 비교할 수 있게 해줍니다.
또한 if else를 여러번 사용하는 것 보다 가독성이 좋습니다.

문법

switch문은 하나 이상의 case로 구성됩니다. default도 있지만, 필수는 아닙니다.

예시:

switch(x) {
  case 'value1':  // if (x === 'value1')
    ...
    [break]

  case 'value2':  // if (x === 'value2')
    ...
    [break]

  default:
    ...
    [break]
}

• 변수 x의 값과 첫 번째 case의 값 'value1'를 일치 비교한 후, 두 번째 case문의 값 'value2'와 비교합니다. 이 과정을 계속 이어나갑니다.
• case에서 변수 x의 값과 일치하는 값을 찾으면 해당 case의 아래의 코드가 실행됩니다.
  이때, break문을 만나거나 switch 문이 끝나면 코드의 실행은 멈춥니다.
• 값과 일치하는 case문이 없다면, default문 아래의 코드가 실행됩니다(default 문이 있는 경우).
  
  
  

예시

let a = 2 + 2;

switch (a) {
  case 3:
    alert( '비교하려는 값보다 작습니다.' );
    break;
  case 4:
    alert( '비교하려는 값과 일치합니다.' );
    break;
  case 5:
    alert( '비교하려는 값보다 큽니다.' );
    break;
  default:
    alert( "어떤 값인지 파악이 되지 않습니다." );
}

해설 :

1. a의 값을 위에서부터 각 case에 일치 비교 합니다.

2. a는 4 이므로 case 4 코드를 실행시키고 break로 인해 멈춥니다.

break 가 없는 경우

예제 :

let a = 2 + 2;

switch (a) {
  case 3:
    alert( '비교하려는 값보다 작습니다.' );
  case 4:
    alert( '비교하려는 값과 일치합니다.' );
  case 5:
    alert( '비교하려는 값보다 큽니다.' );
  default:
    alert( "어떤 값인지 파악이 되지 않습니다." );
}

break가 없는 경우 case 4와 일치 하므로
case4 아래 코드가 모두 순서대로 실행됩니다.

여러 개의 "case"문 묶기

코드가 같은 case문은 한데 묶을 수 있습니다.

예시 :

let a = 3;

switch (a) {
  case 4:
    alert('계산이 맞습니다!');
    break;

  case 3: //두 case문을 묶음
  case 5:
    alert('계산이 틀립니다!');
    alert("수학 수업을 다시 들어보는걸 권유 드립니다.");
    break;

  default:
    alert('계산 결과가 이상하네요.');
}

case 3과 case 5에서 실행하려는 코드가 같은 경우 위 예시처럼 사용 가능합니다.

자료형의 중요성

switch문은 일치 비교로 조건을 확인합니다. 비교하려는 값과 case문의 값이 같고 해당 자료의 형태까지 같아야합니다.

예시:

let arg = prompt("값을 입력해주세요.");
switch (arg) {
  case '0':
  case '1':
    alert( '0이나 1을 입력하셨습니다.' );
    break;

  case '2':
    alert( '2를 입력하셨습니다.' );
    break;

  case 3:
    alert( '이 코드는 절대 실행되지 않습니다!' );
    break;
  default:
    alert( '알 수 없는 값을 입력하셨습니다.' );
}

1. 0, 1, 2 를 입력한 경우 case에 맞는 alert이 실행됩니다.
2. 3을 입력한 경우 자료의 형태가 다르기 때문에 실행되지 않아 default가 실행됩니다.
   (prompt 로 3 입력 시 문자형 "3" 이 arg에 할당
   
   
   참고 - 자바스크립트 튜토리얼