[JS][문법] Switch

switch

if ... else if ... else 문의 사슬을 짧게 해주는 switch 문을 간략히 살펴보자.

switch (a) {
  case 2:
    // ..
    break;
  case 42:
    // ..
    break;
  default:
  // ...
}

 

보다시피 switch 표현식의 평가 결과를 각 case 표현식의 값들과 매치한다. 죽 내려가다 매치된 case 절의 코드를 실행하기 시작하여 break 문을 만나기 전이나 switch 블록의 끝까지 계속 나아간다.

여기까진 지나치게 평범하지만 switch에는 우리가 몰랐을 기벽이 있다.

첫째, switch 표현식과 case 표현식 간의 매칭 과정은 === 알고리즘과 똑같다. 예제처럼 case 문에 확실한 값이 명시된 경우라면 엄격한 매치가 적절하다.

그러나 강제변환이 일어나는 동등 비교를 이용하고 싶다면 switch 문에 꼼수를 부려야 한다.

var a = "42";

switch (true) {
  case a == 10:
    console.log("10 또는 '10'");
    break;
  case a == 42:
    console.log("42 또는 '42'");
    break;
  default:
}

 

어쨋든 case절에 표현식이 있으니 실행상 문제는 없다. 즉 switch 표현식 결과와 case 표현시의 결과를 엄격하게 매치한다. a == 42는 true이므로 여기서 매치된다.

== 를 써도 switch 문은 엄격하게 매치된다. 그래서 case 포현식 평가 결과가 truthy이지만 엄격히 true는 아닐 경우 매치는 실패한다. 이를테면 표현식에 &&나 ||같은 '논리 연산자'를 사용할 때 문제가 된다

var a = "Hello World";
var b = 10;

switch (true) {
  case a || b == 10:
    // 여기에 올일은 없지
    break;
  default:
    console.log("어이쿠");
}

// 어이쿠

 

(a || b == 10) 평가 결과는 true가 아닌 "Hello World"이므로 매치가 되지 않는다. 이때는 분명히 표현식의 결과가 true/false로 떨어지게 case !!(a || b == 10)과 같이 작성해야 한다.

끝으로 default 절은 선택 사항이며 꼭 끝부분에 쓸 필요는 없다. 그런데 default에서도 break를 안 써주면 그 이후로 코드가 계속 실행된다.

var a = 10;

switch (a) {
  case 1:
  case 2:
  default:
    console.log("DF");
  case 3:
    console.log("3");
    break;
  case 4:
    console.log("4");
}

// DF
// 3

 

case 절들을 훑다가 매치되는게 없으니 결국 default절 실행을 시작하는데 break가없으니 이미 이전에 한번 지나친 case 3: 블록을 다시 실행하게 된다.

이런식으로 에두르는 로직이 자바스크립트에서 가능하긴 하지만, 그런 로직으로 짠 코드가 합리적이고 이해하기 쉬울리 만무하다. 만약 그런 환형 로직을 피할 수 없는 상황이라면 왜그래야 하는지 진지한 의문을 가져보고, 그래도 정말 불가피 하다면 자신의 의도가 명백히 드러나도록 주석을 충분히 달아놓기 바란다.

 

---

참고

• You Don't Know JS - 타입과 문법, 스코프와 클로저( 한빛 미디어 )