Оператор switch-case
Когда одна переменная может принять много разных конкретных значений — цепочка if/else if превращается в громоздкую лестницу. switch создан именно для таких ситуаций: он читается гораздо чище и выражает намерение кода яснее.
😤 Проблема: много if else if подряд
Представьте программу, которая выводит название дня недели по номеру. Попробуем написать её через if/else if:
let day = 3;
if (day === 1) {
console.log("Понедельник");
} else if (day === 2) {
console.log("Вторник");
} else if (day === 3) {
console.log("Среда");
} else if (day === 4) {
console.log("Четверг");
} else if (day === 5) {
console.log("Пятница");
} else if (day === 6) {
console.log("Суббота");
} else if (day === 7) {
console.log("Воскресенье");
} else {
console.log("Неверный номер дня");
}
Это работает, но выглядит ужасно. Семь одинаковых проверок одной переменной — это повторение, которое трудно читать. Именно для таких случаев и придумали switch.
📝 Синтаксис switch-case
Вот структура оператора switch:
switch (выражение) {
case значение1:
// код для значение1
break;
case значение2:
// код для значение2
break;
case значение3:
// код для значение3
break;
default:
// если ни один case не совпал
}
Разберём каждую часть:
switch (выражение)
Значение, которое сравниваем. Обычно переменная.
case значение:
Конкретный вариант для сравнения. Как === значение.
break;
Выход из switch. Без него выполнение «падает» в следующий case!
default:
Запасной вариант — как else. Выполнится, если ни один case не совпал.
Теперь перепишем пример с днями недели:
let day = 3;
switch (day) {
case 1:
console.log("Понедельник");
break;
case 2:
console.log("Вторник");
break;
case 3:
console.log("Среда");
break;
case 4:
console.log("Четверг");
break;
case 5:
console.log("Пятница");
break;
case 6:
console.log("Суббота");
break;
case 7:
console.log("Воскресенье");
break;
default:
console.log("Неверный номер дня");
}
// Вывод: "Среда"
💡 Важно: switch использует строгое сравнение (как ===). То есть case "1" и case 1 — это разные вещи. Строка и число не совпадут.
⚠️ Зачем нужен break: эффект «провала» (fall-through)
Это самая важная вещь в switch, которую нужно понять раз и навсегда. Без break выполнение кода не останавливается — оно «падает» в следующий case и выполняет его тоже, и следующий за ним, и так до конца блока или до первого break.
let color = "red";
switch (color) {
case "red":
console.log("Красный");
// break нет! Выполнение падает вниз
case "blue":
console.log("Синий");
// break нет! Продолжает падать
case "green":
console.log("Зелёный");
break;
default:
console.log("Неизвестный цвет");
}
// Вывод:
// "Красный"
// "Синий" ← тоже выполнилось!
// "Зелёный" ← и это тоже!
⚠️ Это частая ошибка! Забыть break — одна из самых распространённых причин багов при работе со switch. Всегда проверяйте, что у каждого case есть break.
Но иногда «провал» (fall-through) — это намеренная техника. Например, когда несколько значений должны выполнять один и тот же код:
let day = 6;
switch (day) {
case 1:
case 2:
case 3:
case 4:
case 5:
// Для дней 1-5 — один код
console.log("Будний день — работаем!");
break;
case 6:
case 7:
// Для дней 6-7 — другой код
console.log("Выходной — отдыхаем!");
break;
default:
console.log("Неверный номер");
}
// Вывод: "Выходной — отдыхаем!"
💻 Практические примеры
🌐 Пример 1: HTTP-статусы
function getStatusMessage(code) {
switch (code) {
case 200:
return "OK — запрос успешен";
case 201:
return "Created — ресурс создан";
case 400:
return "Bad Request — неверный запрос";
case 401:
return "Unauthorized — требуется авторизация";
case 403:
return "Forbidden — доступ запрещён";
case 404:
return "Not Found — страница не найдена";
case 500:
return "Internal Server Error — ошибка сервера";
default:
return "Неизвестный статус";
}
}
console.log(getStatusMessage(404)); // "Not Found — страница не найдена"
console.log(getStatusMessage(200)); // "OK — запрос успешен"
Обратите внимание: в функции вместо break используется return. Это тоже прерывает switch — и заодно возвращает значение из функции. Чистый подход!
🍕 Пример 2: Меню выбора
let menuChoice = "pizza";
switch (menuChoice) {
case "pizza":
console.log("Пицца: 650₽, готовится 25 минут");
break;
case "burger":
console.log("Бургер: 450₽, готовится 15 минут");
break;
case "salad":
console.log("Салат: 350₽, готовится 10 минут");
break;
case "soup":
console.log("Суп: 400₽, готовится 20 минут");
break;
default:
console.log("Такого блюда нет в меню");
}
// Вывод: "Пицца: 650₽, готовится 25 минут"
🧮 Пример 3: Простой калькулятор
function calculate(a, operator, b) {
switch (operator) {
case "+":
return a + b;
case "-":
return a - b;
case "*":
return a * b;
case "/":
if (b === 0) return "Деление на ноль!";
return a / b;
default:
return "Неизвестный оператор";
}
}
console.log(calculate(10, "+", 5)); // 15
console.log(calculate(10, "*", 3)); // 30
console.log(calculate(10, "/", 0)); // "Деление на ноль!"
console.log(calculate(10, "^", 2)); // "Неизвестный оператор"
⚖️ switch vs if/else: когда что выбрать
- Сравниваете одну переменную с конкретными значениями
- Много вариантов (3 и больше)
- Значения — конкретные числа, строки или булевы
- Хотите читаемый код без повторения переменной
- Нужны диапазоны значений (
> 18,<= 65) - Условия сложные (
&&,||) - Сравниваете разные переменные в каждом условии
- Всего 1-2 варианта
// switch — лучше для конкретных значений
switch (httpMethod) {
case "GET": handleGet(); break;
case "POST": handlePost(); break;
case "PUT": handlePut(); break;
case "DELETE": handleDelete(); break;
}
// if/else — лучше для диапазонов и сложных условий
if (age < 13) {
showKidsContent();
} else if (age < 18) {
showTeenContent();
} else {
showAdultContent();
}
✨ Паттерн: switch внутри функции с return
Один из самых чистых способов использовать switch — обернуть его в функцию и использовать return вместо break. Так код становится компактнее и нет риска забыть break:
function getDayName(dayNumber) {
switch (dayNumber) {
case 1: return "Понедельник";
case 2: return "Вторник";
case 3: return "Среда";
case 4: return "Четверг";
case 5: return "Пятница";
case 6: return "Суббота";
case 7: return "Воскресенье";
default: return "Неверный номер дня";
}
}
console.log(getDayName(1)); // "Понедельник"
console.log(getDayName(5)); // "Пятница"
console.log(getDayName(9)); // "Неверный номер дня"
🔑 Почему это хорошо: return немедленно выходит из функции, поэтому «провала» в следующий case не происходит. Код короче, нет лишних break, функция явно возвращает значение.
✅ Итоги урока
switchудобен, когда одна переменная сравнивается с множеством конкретных значений- Структура:
switch(выражение) { case значение: код; break; ... default: код; } switchиспользует строгое сравнение (===): тип тоже важенbreak— обязателен! Без него выполнение «падает» в следующийcase(fall-through)- Несколько
caseбезbreakмежду ними — намеренный fall-through для группировки default— запасной случай, какelse, необязателен, но рекомендуется- В функциях:
returnвместоbreak— чистый паттерн без риска ошибки if/elseлучше для диапазонов;switch— для конкретных значений
Раздел 3 завершён! Теперь вы умеете сравнивать значения, принимать решения, комбинировать условия и выбирать нужный инструмент. В следующем разделе — циклы: как заставить программу повторять действия автоматически. 🚀
Тест по уроку: switch-case
6 вопросов