자바스크립트 switch문: case, break, fallthrough 완전 정리

여러 갈래 중 하나만 고르는 switch문

switch는 하나의 값을 여러 개의 정해진 후보와 비교할 때 쓰는 제어문이에요. 물론 if/else if/else로도 똑같이 짤 수 있지만, 같은 변수를 서너 번 이상 반복해서 검사해야 한다면 switch문으로 쓰는 쪽이 훨씬 깔끔하게 읽힙니다.

기본 형태는 다음과 같습니다:

이 코드를 위에서부터 차근차근 읽어보면, 자바스크립트는 먼저 day 값을 평가한 뒤 각 case 라벨과 비교해서 일치하는 블록을 실행합니다. default는 어디에도 해당하지 않을 때 걸리는 안전망이라, 마지막 else와 같은 역할을 하죠. 읽는 순서는 값 → case → 코드 입니다.

switch문의 매칭 동작 방식

자바스크립트 switch문은 엄격 비교, 즉 === 연산자로 값을 비교합니다. 타입 변환도 없고, 느슨한 매칭도 없습니다. 예를 들어 case 1:은 숫자 1에만 매칭되고 문자열 "1"에는 매칭되지 않습니다.

두 번째 case만 매칭됩니다. switch가 기대대로 동작하지 않을 때 가장 흔한 원인은 폼 입력값이나 URL 파라미터에서 넘어온 값이 문자열인데 숫자와 비교하는 경우입니다.

흐름을 멈추는 건 break입니다

바로 이 부분에서 많이들 헷갈려 합니다. case 레이블은 독립된 블록이 아니라 점프 지점 일 뿐입니다. 일치하는 case로 진입하고 나면, 그 이후로는 다음 case 레이블을 그냥 통과하면서 한 줄씩 계속 실행됩니다. break나 return을 만나거나 switch문이 끝나야 비로소 멈추죠.

break가 없을 때 어떤 일이 벌어지는지 보겠습니다:

매칭된 값은 "editor"인데도 편집 가능, 조회 가능, 로그인됨이 전부 출력됩니다. 바로 이게 fallthrough(폴스루) 현상이에요. 중간에 멈추라는 지시가 없으면 이후의 모든 case가 줄줄이 실행돼 버립니다.

break를 넣어주면 정상적으로 동작합니다.

습관처럼, 각 case는 의도적으로 fallthrough를 쓸 게 아니라면 항상 break로 끝맺자.

의도적인 fallthrough로 케이스 묶기

fallthrough가 무조건 실수인 건 아니다. break를 일부러 생략하면 "이 케이스들은 전부 같은 동작을 한다"는 의미를 깔끔하게 표현할 수 있다:

빈 case 라벨을 연달아 쌓으면 그 아래 블록을 함께 공유하게 됩니다. return 뒤에는 break가 필요 없다는 점도 주목하세요. 함수 자체가 끝나버리기 때문이죠. switch 안에서 return을 만나면 그 뒤에 올 코드는 전부 건너뛰게 됩니다.

반대로 내용이 있는 case들 사이에서 의도적으로 fallthrough를 쓰고 싶다면, 다음에 이 코드를 읽는 사람이 "버그네?" 하고 고쳐버리지 않도록 주석을 꼭 남겨 두세요:

default는 꼭 마지막에 있을 필요는 없다

관례적으로 default는 제일 아래에 두고, 대부분의 개발자도 거기 있으리라 기대합니다. 하지만 엄밀히 말하면 default도 그냥 하나의 레이블일 뿐이에요. 어떤 case도 매칭되지 않았을 때 실행되며, 위치는 어디든 상관없습니다. 만약 default를 중간에 두고 break를 빠뜨리면, 그 아래에 있는 케이스로 그대로 흘러 들어가 버립니다(fallthrough). 웬만하면 default는 마지막에 두고, break로 마무리하세요(사실 뒤에 아무것도 없으니 생략해도 괜찮습니다). 나중에 코드를 다시 볼 미래의 나 자신이 고마워할 겁니다.

case 블록 안에서 변수 스코프 다루기

switch문 안의 모든 case는 하나의 블록 스코프를 공유해요. 그래서 서로 다른 case에서 같은 이름으로 let이나 const를 선언하면 재선언 에러가 납니다.

switch (x) {
    case 1:
        let msg = "1번";
        break;
    case 2:
        let msg = "2번";   // SyntaxError: 식별자 'msg'가 이미 선언되었습니다
        break;
}

해결책은 case마다 블록을 만드는 것, 즉 본문을 { }로 감싸주면 됩니다:

이렇게 하면 msg가 각자의 스코프 안에 갇히기 때문에 충돌이 사라진다. case 안에 한두 줄 이상의 로직이 들어갈 때는 이 방식을 꼭 기억해 두자.

switch문과 if/else, 언제 뭘 써야 할까

자바스크립트 switch문은 하나의 값 을 여러 개의 고정된 선택지 와 비교할 때 진가를 발휘한다. HTTP 상태 코드, Redux 액션 타입, 커맨드 이름, enum처럼 쓰이는 문자열 같은 경우가 대표적이다. 비교 대상이 되는 값이 맨 위에 딱 한 번 등장하기 때문에, 코드를 읽는 사람은 목차를 훑듯이 case 라벨들을 죽 훑어볼 수 있다.

반대로 다음과 같은 상황에서는 if/else가 더 낫다.

• 범위를 비교해야 할 때 (score >= 90, score >= 75).
• 서로 다른 변수나 불리언 표현식을 조건으로 엮어야 할 때.
• 느슨한 비교나 커스텀 비교가 필요할 때 (switch는 항상 ===로 엄격 비교를 한다).

첫 번째 패턴 대신 요즘은 객체 룩업 방식을 많이 씁니다.

아홉 줄짜리 switch 대신 딱 세 줄이면 끝납니다. 각 케이스가 단순히 값만 매핑하는 수준이라면 객체(또는 Map)로 처리하는 편이 훨씬 깔끔합니다. switch는 각 케이스에서 실제로 무언가 처리할 일 이 있을 때 꺼내 쓰세요.

다음 주제: for 반복문

switch는 하나의 값을 여러 선택지와 비교해 분기하는 제어문입니다. 이제 살펴볼 다음 제어 흐름은 반복, 즉 같은 코드 블록을 여러 번 실행하는 방법인데요. 바로 이때 쓰는 게 for 반복문이며, 곧이어 다뤄보겠습니다.