Switch Case в JS

Данный оператор позволяет проверить множество условий и в зависимости от условия, выполнить то или иное действие. В некоторых ситуациях это может быть удобнее, чем использовать if-else

Синтаксис

switch ('какое-то выражение') {
    case 'value_1':
        console.log('value_1 подошло');
        // Если мы не хотим выполнять проверку дальше можем сразу выйти с помощью break;
  case 'value_2':
    console.log('value_2 подошло');
  default:
    console.log('Ни одно условие не сработало. Сделай это...')
}

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

Важный момент. Если вы не используете инструкцию break или return, весь код в фигурных скобках выполниться. Если вы хотите остановить выполнение кода при совпадении с условием, обязательно используйте break/return

Примеры

Пример 1. Получение дня недели. new Date().getDay() — вернет нам номер дня недели (начиная с 0, который будет соответствовать Воскресенью). Дальше в конструкции switch мы укажем, что мы проверяем переменную todayNum, а потом возле case будем перечислять возможные варианты.

const todayNum = new Date().getDay();
let today;

switch (todayNum) {
  case 0:
    today = 'Воскресенье';
  case 1:
    today = 'Понедельник';
  case 2:
    today = 'Вторник';
  case 3:
    today = 'Четверг';
  case 4:
    today = 'Пятница';
  case 6:
    today = 'Суббота';
  default:
    console.log('Произошла ошибка. Неизвестный день');
}

console.log(today);
// Произошла ошибка. Неизвестный день
// Суббота

С этим кодом у нас будет одна проблема. Он всегда будет записывать в переменную today значение Суббота, т.к. у нас не указан нигде break и код продолжит выполняться независимо от того было ли у нас совпадение условия. Поэтому и код в блоке default тоже будет выполнен (вывод в консоль).

Этот код будет правильно записать вот так:

switch (todayNum) {
  case 0:
    today = 'Воскресенье';
    break;
  case 1:
    today = 'Понедельник';
    break;
  case 2:
    today = 'Вторник';
    break;
  case 3:
    today = 'Четверг';
    break;
  case 4:
    today = 'Пятница';
    break;
  case 6:
    today = 'Суббота';
    break;
  default:
    console.log('Произошла ошибка. Неизвестный день');
}

В таком случае, при первом совпадении условия, мы присвоим правильный день переменной today и завершим выполнение инструкцией break.

Пример 2. Использование цепочки значений. Для нескольких case мы можем указать один результат. Допустим у нас есть переменная, в которой указано название какого-то фрукта или овоща. Тогда мы можем перечислить какие это могут быть фрукты и если будет совпадение, мы укажем что это Фрукт, если будет совпадение с овощем, то укажем, что это овощ.

const something = 'Apple';
let fruitOrVegetable;

switch (something) {
  case 'Apple' :
  case 'Banana':
  case 'Cherry':
    fruitOrVegetable = 'Фрукт';
    break;
  case 'Potato':
    fruitOrVegetable = 'Овощь';
    break;
  default:
    console.log('Произошла ошибка. Неизвестный день');
}

console.log(fruitOrVegetable); // Фрукт

Часто switch case используется в Redux. Можете ознакомиться с примером тут.

Если остались вопросы, пишите их в комментариях ниже.

Ваши вопросы и комментарии: