모던 JavaScript 튜토리얼을 읽고 정리하였습니다.

switch문

복수의 if 조건문은 switch 문으로 바꿀 수 있다. switch 문을 사용한 비교법은 특정 변수를 다양한 상황에서 비교할 수 있게 하고, 코드 자체가 비교 상황을 잘 설명한다는 장점도 있다.

문법

switch 문은 하나 이상의 case문으로 구성된다. 대개 default 문도 있지만 필수는 아니다.

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

• 변수 x의 값과 첫번째 case문의 값 ‘value1’를 일치 비교한 후, 두번째 case문의 값 ‘value2’와 비교한다. 이러한 과정을 반복한다.
• case 문에서 변수 x의 값과 일치하는 값을 찾으면 해당 case문의 아래 코드가 실행된다. 이때, break문을 만나거나 switch문이 끝나면 코드의 실행은 멈춘다.
• 값과 일치하는 case문이 없다면, default문이 있을 경우, default문 아래의 코드가 실행된다.

예시

아래 예시에는 case4 아래의 코드가 실행될 것이다. 만약 break문이 없다면 조건에 부합하는지 연부를 따지지 않고 이어지는 case문을 실행한다.

let a = 2 + 2;

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

break문이 없는 경우에는, 다음과 같이 실행된다.

let a = 2 + 2;

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

// 실행되는 코드
alert( '비교하려는 값과 일치합니다.' );
alert( '비교하려는 값보다 큽니다.' );
alert( "어떤 값인지 파악이 되지 않습니다." );

switch/case문의 인수엔 어떤 표현식이든 올 수 있다.

let a = "1";
let b = 0;

switch (+a) {
  case b + 1:
    alert("표현식 +a는 1, 표현식 b+1는 1이므로 이 코드가 실행된다.");
    break;
  default:
    alert("이 코드는 실행되지 않는다.");  
}

표현식 +a를 평가하면 1이 된다. 이 값은 첫번째 case문의 표현식 b+1을 평가한 값과 일치하다. 따라서 첫 번째 case문 아래의 코드가 실행된다.

여러 개의 “case”문 묶기

코드가 같은 case문은 break를 생략함으로써 한데 묶을 수가 있다.

let a = 3;

switch (a) {
  case 4:
    alert('계산이 맞습니다!');
    break;
  case 3:
  case 5:
    alert('계산이 틀립니다!');
    break;
  default:
    alert('계산 결과가 이상하네요.');
}

위의 예시에서는 case3과 case5는 동일한 메시지를 보여준다. case3의 바로 아래 줄엔 case5가 있고, 그 사이에 break문도 없으므로 case5 가장 밑의 break문을 만날 때까지 코드가 계속 실행되기 때문이다.

자료형의 중요성

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('알 수 없는 값을 입력하셨습니다.');
}

만약 사용자가 위의 예시에서 3을 입력하여도 이 문자열 형의 값이 숫자형 3과 비교되므로 형 자체가 달라 case3 아래의 코드는 절대 실행되지 않고, default문이 실행된다.