Switch является одной из наиболее популярных конструкций в JavaScript для выполнения различных действий в зависимости от значения переменных или выражений. Он обеспечивает простой и эффективный способ организации кода с множеством условий. В данной статье мы рассмотрим основные принципы работы конструкции switch, применение в различных сценариях, а также лучшие практики при работе с ней.

Синтаксис конструкции Switch case

Инструкция switch принимает выражение или значение и сравнивает его со “случаями”(case), перечисленными внутри нее, после чего выполняет весь код, описаный ниже подходящего “случая” до конца конструкции или до инструкции break.

let value = 1;
switch (value) {
  case 1: //конструкция находит подходящий случай
          //и выполняет весь код ниже
    console.log("value equal 1");
  case 2:
    console.log("value equal 2");
    break; //инструкция break завершает выполнение
  case 3:
    console.log("value equal 3");
} //в консоли появится 2 сообщения:
  //value equal 1 и value equal 2

Одним из ключевых отличий от конструкций if...else и подобных проверок на условие является то, что switch не завершает выполнение после нахождения совпадения, а продолжает работу до конца конструкции или до первой инструкции break. Поэтому важно не забывать указывать break, если на каждый “случай” должен отработать отдельный блок кода.

Сравниваемые значения сопоставляются строго (аналогично сравнению с помощью оператора ===) поэтому важно не только значение проверяемого выражения или переменной, но и их тип.

let value = "1";
switch (value) {
  case 1: //тип Number не даст true при сравнеии
    console.log("Не подойдет");
  case (+value * +value).toString():
    console.log("Подойдет");
} //второй случай подойдет потому что выражение
//будет равно строке '1'

В рассмотренных выше примерах, если ни один из “случаев” не подойдет при сравнении конструкция не будет исполнять ни какой код внутри нее. Что бы задать поведение в таких случаях, используют инструкцию default. Она указывается при перечислении “случаев” и код, описаный внутри нее выполняется когда не найдено подходящих под условие “случаев”. Инструкцию default можно объявить в любой части конструкции, но принято делать это в конце.

switch (value) {
  case 1:
    console.log(1);
    break;
  case 2:
    console.log(2);
    break;
  default: //выполнится если value не равно 1 и 2
    console.log("Не 1 и не 2");
}

Группировка внутри switch по case и break

Как мы уже знаем, switch строго сравнивает выражения и не использует проверки как другие логические ветвления вроде if…else поэтому не выйдет указать в одном “случае” несколько вариантов через логические операторы. Вместо этого можно просто указать несколько “случаев” подряд с одним блоком кода и при совпадении одного из них этот код выполнится.

const value = 2;
switch (value) {
  case 1 || 2: //такая конструкция не подойдет для сравнения
    console.log("1 или 2");
    break;
  default:
    console.log("Не 1 и не 2");
} // в консоли пояится сообщение: Не 1 и не 2
switch (value) {
  case 1: //такая группировка обьединит два случая
  case 2: //и код выполнится при совпадении с любым из них
    console.log("1 или 2");
    break;
  default:
    console.log("Не 1 и не 2");
} // в консоли пояится сообщение: 1 или 2

Поведение switch с несколькими case без break может показаться нелогичным, ведь совпал только один “случай”, а код выполнится из всех, описанных ниже совпавшего, но такое поведение позволят группировать исполняемый код с помощью инструкции break.

const counter = 4;
switch (counter) {
  case 6:
    console.log("Задайте значение на 1 меньше");
    break;
  case 5:
    console.log(5);
  case 4:
    console.log(4);
  case 3:
    console.log(3);
  case 2:
    console.log(2);
  case 1:
    console.log(1);
    break;
  default:
    console.log("Слишком большое значение");
}//выведет цифры от 4 до 1

В примере выше мы видим 6 case 5 из которых сгруппированы с помощью инструкции break и при совпадении одного из них будет выполнено ожидаемое количество операций (только операции ниже совпавшего). Таким образом мы можем создавать последовательно выполняемый код, удобно разделяя его на части в зависимости от значения проверяемого выражения. Важно помнить что при таком подходе следует следить за правильным порядком перечисления “случаев”.

Особенности работы с конструкцией switch

Мы уже знаем, что без инструкции break конструкция switch будет выполнять весь код, описаный ниже совпавшего значения, но на практике это не всегда верно. Switch часто используется внутри функций и если его внутренние блоки кода выполняют инструкцию return, завершающую работу всей функции, остальной код внутри switch не будет исполнен даже если не указана инструкция break.

const checkValue = (value) => {
  switch (value) {
    case 1:
      return "value = 1";
    case 2:
      return "value = 2";
    default:
      return "value не равно ни 1 ни 2";
  } //в switch ни в одном case нет break
};
console.log(checkValue(1)); //value = 1
//функция завершается раньше, чем конструкция switch

Блоки кода внутри switch необязательно заключать в фигурные скобки, как в if…else потому что конструкция рассматривает их как один большой блок, который начинает исполняться после подходящего case. Такое поведение можно изменить, обернув блоки кода в фигурные скобки. В таком случае каждый блок будет иметь свою область видимости.

switch (name) {
  case "Sam":
    const fullName = "Samuel";
    console.log("Hi, " + name + "!");
    break;
  case "John":
    const fullName = "Johnathan";
    console.log("Hi, " + name + "!");
    break;
} //выдасть ошибку Identifier 'fullName' has already been declared
switch (name) {
  case "Sam": {
    //оборачиваем блоки кода в фигурные скобки
    const fullName = "Samuel";
    console.log("Hi, " + name + "!");
    break;
  }
  case "John": {
    const fullName = "Johnathan";
    console.log("Hi, " + name + "!");
    break;
  }
} //ошибки не будет
switch (name) {
  case "Sam":
    const fullName = "Samuel";
    console.log("Hi, " + name + "!");
    break;
  case "John":
    fullName = "Johnathan"; //переменная не объявляется, а принимает новое значение
    console.log("Hi, " + name + "!");
    break;
}

Заключение

Конструкция switch предоставляет удобный и лаконичный способ управлять потоком выполнения кода в JavaScript. Она может быть особенно полезна, когда необходимо обработать множество различных значений и выполнить соответствующие действия для каждого из них или группы значений. Однако, необходимо помнить о правильном использовании операторов case и default, а также следовать лучшим практикам для повышения читаемости и поддерживаемости кода. В итоге, конструкция switch является важным инструментом для разработчиков JavaScript и помогает создавать более эффективные программы.