switch-case: выбор между несколькими вариантами

Когда if-else становится громоздким 🤯

Представь: ты пишешь программу, которая обрабатывает статусы заказа. Например:

  • 1 — "Ожидает оплаты"
  • 2 — "В обработке"
  • 3 — "Отправлен"
  • 4 — "Доставлен"

С помощью if-else это выглядит так:

if (status === 1) {
  console.log("Ожидает оплаты");
} else if (status === 2) {
  console.log("В обработке");
} else if (status === 3) {
  console.log("Отправлен");
} else if (status === 4) {
  console.log("Доставлен");
} else {
  console.log("Неизвестный статус");
}

Уже на 4 вариантах код становится громоздким. А если статусов 10? 20? Тут-то на помощь и приходит switch-case!


Синтаксис switch-case 🎛️

Конструкция switch проверяет значение выражения и выполняет соответствующий блок кода:

switch (выражение) {
  case значение1:
    // код для значение1
    break;
  case значение2:
    // код для значение2
    break;
  default:
    // код, если ни один case не подошел
}

Перепишем наш пример со статусами заказов:

switch (status) {
  case 1:
    console.log("Ожидает оплаты");
    break;
  case 2:
    console.log("В обработке");
    break;
  case 3:
    console.log("Отправлен");
    break;
  case 4:
    console.log("Доставлен");
    break;
  default:
    console.log("Неизвестный статус");
}

Гораздо чище и читабельнее, правда? Все возможные варианты собраны в одном месте.


Как это работает под капотом 🔍

  1. Вычисляется выражение в switch
  2. Его значение сравнивается с каждым case строго (===)
  3. При совпадении выполняется код от case до ближайшего break
  4. Если совпадений нет — выполняется default (если он есть)

🔥 Важно! break прерывает выполнение switch. Без него выполнение "провалится" в следующий case, даже если его условие не совпадает. Это частая причина багов!


Пример "проваливания" без break 💧

Иногда "проваливание" можно использовать осознанно. Например, для группировки вариантов:

switch (day) {
  case 1:
  case 2:
  case 3:
  case 4:
  case 5:
    console.log("Будний день");
    break;
  case 6:
  case 7:
    console.log("Выходной");
    break;
  default:
    console.log("Нет такого дня недели");
}

Здесь для дней 1-5 (пн-пт) выводится "Будний день", а для 6-7 (сб-вс) — "Выходной".


Когда использовать switch-case? 🤔

Критерий if-else switch-case
Много условий 😕 😍
Проверка диапазонов 😍
Строгое равенство 😊 😍
Читаемость 😕 😍

💡 Совет от Данилы Бежина: если условий больше трёх — скорее всего, switch сделает код чище. Посмотрите его видео про условные конструкции для глубокого понимания!


Продвинутые фишки 🔥

Строки в условиях

switch отлично работает со строками:

switch (theme) {
  case "light":
    setLightTheme();
    break;
  case "dark":
    setDarkTheme();
    break;
  case "oled":
    setOledTheme();
    break;
}

Выражения в case

Можно использовать выражения, но они будут вычислены один раз при входе в switch:

const a = 2;
const b = 3;

switch (a + b) {
  case 5:
    console.log("2 + 3 = 5");
    break;
  case 6:
    console.log("2 * 3 = 6");
    break;
}

Распространённые ошибки 🚨

  1. Забытый break — самая частая проблема. Всегда проверяйте его наличие!
  2. Ненужный default — если обработка всех случаев не требуется, его можно опустить.
  3. Нестрогое сравнение — помните, что сравнение идёт через ===.

Практический пример: калькулятор 🧮

Давайте напишем простой калькулятор:

function calculate(a, b, operator) {
  switch (operator) {
    case "+":
      return a + b;
    case "-":
      return a - b;
    case "*":
      return a * b;
    case "/":
      return a / b;
    default:
      throw new Error("Неизвестный оператор");
  }
}

console.log(calculate(5, 3, "+")); // 8
console.log(calculate(5, 3, "&")); // Error

Альтернативы: объекты и Map 🆕

Для сложных сценариев можно использовать объекты или Map:

const operations = {
  "+": (a, b) => a + b,
  "-": (a, b) => a - b,
  "*": (a, b) => a * b,
  "/": (a, b) => a / b
};

function calculate(a, b, op) {
  return operations[op]?.(a, b) ?? "Неизвестный оператор";
}

Но это уже тема для отдельного разговора! Помните — switch отлично подходит для множества дискретных значений, а объекты — для более динамических сценариев.


Теперь ты вооружён мощным инструментом для обработки множественных условий! 🛠️ Попробуй переписать свои старые if-else цепочки на switch-case — код станет чище и понятнее.

Скрыть рекламу навсегда

📘 VK Видео — обучение без ограничений

Все уроки доступны без VPN, без блокировок и зависаний.

Можно смотреть с телефона, планшета или компьютера — в любое время.

▶️ Смотреть на VK Видео