자바스크립트 기본 - switch

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

switch 를 사용한 비교법은 특정 변수를 다양한 상황에서 비교할 수 있게 해 준다. 코드 자체가 비교 상황을 잘 설명한다는 장점도 있다.

문법

switch 문은 하나 이상의 case 문으로 구성된다.

default 문은 필수로 작성해야 하는 것은 아니다.

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

• 변수 x의 값과 첫 번째 case 문의 값을 일치 비교한 후 두번째 case 문의 값과 비교한다. 이런 과정이 계속 이어진다.
• case 문 중에서 변수 x 의 값과 일치하는 값을 찾으면 해당 case 문 아래의 코드가 실행된다. 이때 break 문을 만나거나 switch 문이 끝나면 코드의 실행이 멈춘다.
• 값과 일치하는 case 문이 없다면, default 문 아래의 코드가 실행된다.

let a = 2 + 2;

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

위 코드의 결과 '비교하려는 값과 일치합니다.' 가 출력되고 코드가 종료된다.

일치하는 값을 찾는 순감부터 break 를 만날 때까지 코드가 실행되므로, break가 중간에 없다면 case 4 아래의 모든 코드가 실행된다.

let a = 2 + 2;

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

여러 개의 case 문 묶기

여러 케이스에 대해 같은 코드를 실행하려는 경우 다음과 같이 묶을 수 있다.

let a = 3;

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

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

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

자료형의 중요성

switch 문은 일치 비교로 조건을 확인한다. 따라서 비교하려는 값과 case 문의 값, 자료형이 모두 같아야 해당 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( '알 수 없는 값을 입력하셨습니다.' );
}

3을 입력한 경우, prompt 로 입력한 숫자 3은 ‘3’ 문자열로 변환되어 반환되기 때문에 case 3 문의 3과 자료형이 달라 코드가 실행되지 않고, default 가 실행된다.