`switch`문 에서

`switch`문 소개

일반적인 문법

if문 외에도, JavaScript에는 조건에 따라 로직을 실행하는 switch문이 있어요. 하나의 변수를 여러 값과 비교해야 할 때 사용해요. 비교는 엄격한 동등성(===)을 확인하는 방식으로 이루어져요. 자세한 내용은 개념 비교를 참고해요. 어떤 변수 x에 대해, JavaScript의 switch문은 다음과 같은 문법을 가져요.

switch (x) {
  case option1:
    // code that is executed when "x === option1" is true
    break;
  case option2:
    // code that is executed when "x === option2" is true
    break;
  default:
    // code that is executed when x does not equal any of the
    // options
}

default 케이스는 선택 사항이며, 다른 어떤 옵션도 변수와 일치하지 않을 때 실행할 코드를 지정하고 싶을 때 사용해요.

기본 동작인 폴스루

위의 break문이 필요한 이유는 JavaScript에서는 기본적으로 모든 케이스가 폴스루되기 때문이에요. 즉, break문이 없으면 처음 일치하는 옵션 아래에 있는 케이스의 코드가 모두 실행돼요. x가 그 옵션들과 일치하지 않았더라도 말이에요. 이렇게 기본적으로 폴스루되는 동작은 JavaScript에서 switch를 사용할 때 흔히 빠지는 함정이에요. 함수 안에서는 이 문제를 피하기 위해 break 대신 return을 사용할 수도 있어요.

여러 케이스에 같은 코드를 적용하고 싶을 때는 폴스루 동작을 활용할 수 있어요. 이에 대한 예시는 MDN 문서에서 찾을 수 있어요.

스코프

기본적으로 서로 다른 case문에 있는 변수들은 같은 스코프를 공유해요. 이로 인해 예상치 못한 동작이 발생할 수 있어요. 예를 들어, 케이스를 복사해서 붙여넣다 보면 두 케이스에 let message 선언이 생겨서 오류가 발생할 수 있어요. 자세한 내용은 MDN 문서를 참고해요. 스코프를 공유해서 생기는 문제를 피하려면, 각 케이스에 중괄호로 코드 블록을 추가해서 케이스마다 별도의 스코프를 만들 수 있어요.

switch (x) {
  case option1: {
    // Variables declared here are contained to this case.
    break;
  }
  case option2: {
    // ...
    break;
  }
  default: {
    // ...
  }
}

표현식 사용하기

변수 x 대신 표현식을 사용할 수도 있어요. 그 표현식은 switch문이 시작될 때 한 번 평가되고, 그 결과가 각 케이스와 비교돼요. 이를 흔히 사용하는 예로, 변수의 타입에 따라 다른 코드를 실행하는 "타입 스위치"가 있어요.

switch (typeof x) {
  case 'string':
    // code that is executed when x is a string
    break;
  case 'number':
    // code that is executed when x is a number
    break;
  default:
    // code that is executed when x has some other type
}

옵션에도 표현식을 사용할 수 있어요.