Оператор switch в JavaScript

Введение в оператор switch

В JavaScript оператор switch выполняет один из нескольких блоков кода в зависимости от значения одного выражения. Если вы пишете длинную цепочку операторов if / else if, которые сравнивают одну и ту же переменную с разными значениями, switch обычно является более чистым и читаемым способом выразить ту же логику.

В этой главе рассматривается полный синтаксис, принцип совместной работы case, break и default, намеренное и случайное сквозное выполнение, строгое сравнение (===), используемое в switch, управление областью видимости переменных внутри блока case, а также ситуации, когда switch является — и не является — правильным выбором.

Как работает switch

switch вычисляет своё выражение один раз, затем сравнивает результат с каждым значением case сверху вниз, используя строгое сравнение (===). Первый совпавший case становится точкой входа: выполнение начинается там и продолжается через последующие инструкции до тех пор, пока не встретится break, return или конец switch. Если ни один case не совпадает, выполняется необязательный блок default.

Синтаксис и структура оператора switch

Скелет оператора switch выглядит следующим образом:

switch(expression) {
  case value1:
    //Statements executed when the
    //result of expression matches value1
    break;
  case value2:
    //Statements for value2
    break;
  default:
    //Statements executed if no case matches
}

Несколько правил, которые стоит запомнить:

• Выражение вычисляется только один раз — в начале.
• После меток case должно стоять двоеточие (:), а не фигурная скобка.
• break завершает switch; без него выполнение проваливается в следующий case (см. Сквозное выполнение ниже).
• default необязателен и не обязан стоять последним, хотя по соглашению его помещают в конец.

Пример базового switch

Сквозное выполнение: группировка против случайной ошибки

Когда в case нет break, выполнение «проваливается» в следующий case. Это один механизм с двумя очень разными результатами — один полезный, другой является классической ошибкой.

Намеренная группировка (полезное сквозное выполнение)

Стыкуя пустые метки case, можно выполнять один и тот же код для нескольких значений. Это идиоматический способ обработки ситуации «любой из этих вариантов должен делать одно и то же».

Поскольку 'apple' совпадает с первой меткой, а у той нет тела, выполнение переходит к общему console.log('Red fruit') и затем останавливается на break.

Случайное сквозное выполнение (ошибка)

Если вы забудете break, все case после совпавшего также выполнятся, вплоть до следующего break или конца switch. Здесь fruit равен 'apple', однако выводятся все четыре строки:

Добавление break; после каждого console.log ограничит вывод только строкой Apple is red.. Практическое правило: завершайте каждый case оператором break (или return), если только вы намеренно не группируете case.

Область видимости блока внутри case

Все блоки case разделяют одну область видимости — тело switch. Это означает, что переменная, объявленная через let или const в одном case, видна в остальных и может вызвать ошибку «Cannot access before initialization». Оберните тело case в собственные фигурные скобки { ... }, чтобы создать для него отдельную область видимости:

Без фигурных скобок объявление const result в обоих case вызовет синтаксическую ошибку из-за дублирующего объявления в общей области видимости.

Строгое сравнение (===) в switch

switch в JavaScript сравнивает выражение с каждым значением case с помощью строгого равенства (===) — приведение типов не происходит. Поэтому тип тоже должен совпадать, а не только значение. Подробнее о различиях между === и == см. в разделе Операторы сравнения.

В этом примере string '0' не совпадает с числом 0, поэтому выполняется default:

Если вам нужно сравнивать без учёта типа, преобразуйте выражение заранее, например: switch (Number(x)).

switch против if/else

Оба подхода могут выражать одну и ту же логику ветвления, поэтому выбирайте исходя из формы условия:

• Предпочтите switch, когда вы сравниваете одно значение с множеством дискретных, константных вариантов (код статуса, имя команды, пункт меню). Это читается чисто и намерение очевидно.
• Предпочтите if / else if, когда условия представляют собой диапазоны или boolean-выражения (age >= 18, score > 90 && passed), затрагивают разные переменные или требуют гибкости, которую строгое === не может обеспечить.
• Для сопоставления ключа с единственным значением часто короче использовать обычный поиск по object (const labels = { add: 'Addition' }), чем любой из этих подходов. Для объединения условий в стиле if см. раздел Логические операторы.

Заключение

Оператор switch в JavaScript — универсальный инструмент для обработки множества условий. Понимание его правильного применения и нюансов может значительно повысить читаемость и эффективность вашего кода.

Практика