Упрощайте: как использовать конструкцию switch вместо if-else в JavaScript

Условный оператор switch сравнивает выражения с доступными значениями и выполняет один или несколько блоков кода. 

Другими словами, конструкция switch — это более удобная замена if и else. Этот оператор позволяет сделать код более коротким и понятным.

Он принимает множество значений, а после сравнивает выражения со значениями из инструкции case. Если выражение и значение case друг другу соответствуют, то инструкции будут выполнены.

Синтаксис switch

Конструкция switch состоит из:

• описания с ключевым словом switch;
• переменной, значение которой помогает оператору выбирать поведение;
• case и default с описанием поведения для значений переменной (case — это if, а default соответствует else);
• break — предотвращение так называемых провалов.

Оператор всегда записывается в виде switch () {}, где:

() — круглые скобки, в которых записывается выражение для оценки;

{} — фигурные скобки, внутри которых находится код выполнения.

Давайте рассмотрим пример:

switch (expression) {
case x:
// execute case x code block
break;
case y:
// execute case y code block
break;
default:
// execute default code block
}

Сперва выражение сравнивается с условием case x. Если выражение и условие соответствуют, код будет выполнен; break — останавливает выполнение блока.

В ситуации, когда выражение не соответствует условию, оператор переходит к выполнению условия case y. При соответствии выражения и условия break останавливает выполнение дальнейшего кода.

Если выражение не соответствует условиям case x и case y — происходит выполнение блока default — он запускается в конце программы при наличии ошибки. 

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

Если инструкции break нет, то осуществляется переход к следующей инструкции switch. Отметим, что break используется для увеличения производительности программы. 

Использование break

Рассмотрим пример, где значение а сравнивается со всеми вариантами case.

let a = 2 + 2;

switch (a) {
  case 3:
    alert( 'Мало' );
    break;
  case 4:
    alert( 'В самый раз!' );
    break;
  case 5:
    alert( 'Много' );
    break;
  default:
    alert( "Значений нет" );
}

В case 3 совпадения нет, потому оператор приступает к выполнению case 4. Найдено совпадение, а потому со строки alert( 'В самый раз!' ) будет выполнен код до следующего оператора break, который его остановит.

Без break

Что будет, если мы уберем break из нашего примера?

let a = 2 + 2;

switch (a) {
  case 3:
    alert( 'Мало' );
  case 4:
    alert( 'В самый раз!' );
  case 5:
    alert( 'Много' );
  default:
    alert( "Значений нет" );
}

В этом случае выполнение осуществится по всем вариантам case. В примере будут выполнены все три alert:

alert( 'В самый раз!' );
alert( 'Много' );
alert( "Значений нет" );

Примеры со switch-case в JavaScript

Давайте для наглядности рассмотрим еще несколько примеров использования конструкции. Попробуйте прокомментировать их, и только потом читайте наше объяснение, договорились?

Несколько значений для одного случая

var foo = 1;
switch (foo) {
    case 0:
    case 1:
    case 2:
    case 3:
        alert('yes');
        break;
    default:
        alert('not');
}

Если foo совпадает с одним из case — 0, 1, 2, 3, то будет выведено сообщение с текстом yes. Без инструкции break выполнение switch продолжится.

Что будет, если case записан в один ряд?

var x = 3;
 
switch (x) {
  case 1: case 2: case 3:
    document.write("x равен 1, 2 или 3");
    break;
  case 7:
    document.write("x равен 7");
    break;
}

Варианты case можно располагать не в столбик, а в один ряд — выполнение кода от этого не изменится.

Вычисление дня недели

switch (new Date().getDay()) {
    case 0:
        day = "Воскресенье";
        break;
    case 1:
        day = "Понедельник";
        break;
    case 2:
        day = "Вторник";
        break;
    case 3:
        day = "Среда";
        break;
    case 4:
        day = "Четверг";
        break;
    case 5:
        day = "Пятница";
        break;
    case 6:
        day = "Суббота";
}

День недели — это число от 0 до 6.

Воспользуемся методом getDay (): воскресенье — case 0, понедельник — case 1, вторник — case 2 и так далее. Этот метод вернет значение, которое будет соответствовать дню недели для даты, которую мы укажем.

В заключение

Конструкция switch-case чаще всего используется в случаях множественного выбора. Оператор switch может использоваться для обработки сразу нескольких выражений (case) или диапазонов.

Switch в переводе с английского языка — «переключатель», с его помощью можно выбирать блоки кода для выполнения в соответствии со значениями заданных выражений. Все значения — это варианты case.

Напомним, что конструкция switch в JavaScript имеет свои особенности:

• оператор работает со всеми типами данных (объекты, строки, числа);
• значения case могут быть как переменными, так и константами.