switch в JavaScript: case, break и fallthrough

Switch в JavaScript: выбор одной ветки из многих

Оператор switch в js пригодится, когда нужно сравнить одно и то же значение с набором заранее известных вариантов. Формально ту же задачу решает цепочка if/else if/else, но как только вы в третий-четвёртый раз подряд проверяете одну и ту же переменную, switch читается заметно приятнее.

Базовый синтаксис выглядит так:

Если читать этот код сверху вниз, получается следующее: JavaScript вычисляет day, сравнивает со значением каждого case и выполняет подходящий блок. default срабатывает, когда ничего не совпало — это как финальный else. Порядок чтения такой: значение → case → код.

Как на самом деле работает сравнение в switch

switch сравнивает строго — оператором ===. Никакого приведения типов, никаких «почти совпадений». case 1: сработает для числа 1, но не для строки "1".

Совпадает только второй case. Если вдруг ваш switch не срабатывает там, где должен, — в 99% случаев виноват несовпадающий тип: строка вместо числа, прилетевшая из формы или URL-параметра.

break — это то, что останавливает выполнение

Вот здесь как раз и подстерегает большинство разработчиков. Метка case — это точка перехода, а не самостоятельный блок. Как только выполнение попало в подходящий case, оно идёт дальше построчно — прямо сквозь метки следующих case, — пока не наткнётся на break, return или конец switch.

Посмотрите, что будет без break:

Совпадение — "editor", но в консоли ты видишь сразу может редактировать, может просматривать и вошёл в систему. Это и есть fallthrough: выполнение «проваливается» в следующие case, потому что его ничто не останавливает.

Добавляем break — и всё работает как надо:

Правило: каждый case заканчивается на break, если только вам намеренно не нужен проброс.

Осознанный fallthrough: группируем case

Fallthrough в switch — это не всегда баг. Пропуск break — аккуратный способ сказать «все эти варианты делают одно и то же»:

Если поставить подряд несколько пустых меток case, все они будут делить один и тот же блок кода ниже. Обратите внимание: после return писать break не нужно — функция и так завершится. return внутри switch сразу выходит из него, пропуская всё, что шло дальше.

А вот когда fallthrough между непустыми case действительно нужен намеренно — обязательно оставьте комментарий, иначе следующий разработчик решит, что это баг, и «починит»:

default не обязан быть в конце

По традиции default ставят в самом низу — именно там его и ожидают увидеть большинство читающих код. Но с технической точки зрения это просто ещё одна метка: она срабатывает, когда ни один case не подошёл, причём независимо от места в блоке. Если воткнуть default где-нибудь посередине и забыть break, выполнение провалится (fallthrough) в следующий за ним блок. Ставьте default последним, закрывайте его break (или не закрывайте — дальше всё равно ничего нет), и ваше будущее «я» скажет спасибо.

Область видимости переменных внутри case

Все ветки case живут в одной блочной области видимости — это область самого switch. Поэтому если объявить let или const с одинаковым именем сразу в двух ветках, получишь ошибку повторного объявления:

switch (x) {
    case 1:
        let msg = "one";
        break;
    case 2:
        let msg = "two";   // SyntaxError: Identifier 'msg' has already been declared
        break;
}

Решение простое — оборачиваем тело каждого case в блок { }:

Теперь каждое msg живёт в своей области видимости, и конфликт исчезает. Это стоит держать в голове всякий раз, когда в case появляется чуть больше логики, чем одна-две строки.

switch или if/else в JavaScript

Оператор switch хорош, когда нужно сверить одно значение с множеством фиксированных вариантов: HTTP-коды, типы экшенов в Redux, имена команд, строки-перечисления. Проверяемое значение указывается один раз в самом верху, а список case читается как оглавление — взгляд легко пробегает по вариантам.

if/else удобнее в таких случаях:

• Вы сравниваете диапазоны (score >= 90, score >= 75).
• В условиях участвуют разные переменные или булевы выражения.
• Нужно нестрогое равенство или своя логика сравнения (switch всегда работает через ===).

Современной альтернативой для первого варианта часто служит поиск по объекту:

Три строки вместо девятистрочного switch. Когда кейсы — это просто сопоставление данных без какой-либо логики, объект (или Map) обычно читается лучше. switch имеет смысл брать тогда, когда в каждом case реально что-то происходит.

Дальше: циклы for

switch помогает сделать один выбор из множества вариантов. Следующий кирпичик управления потоком — повторение, то есть прогон одного и того же блока кода снова и снова. Именно для этого нужны циклы for, о которых и пойдёт речь дальше.