Пошук уроків, статей та іншого контенту
Познайомтеся з конструкцією switch для вибору одного сценарію з декількох можливих варіантів. Навчіться використовувати case та default і зрозумійте принцип порівняння значень у switch.
switchswitch — це конструкція JavaScript для вибору одного сценарію з кількох можливих варіантів.
Вона зручна, коли потрібно порівняти одне значення з багатьма варіантами. Наприклад:
визначити день тижня;
обробити команду користувача;
вибрати дію залежно від статусу;
перетворити числовий код на текстове повідомлення.
Замість великої кількості умов if...else if можна використати компактнішу конструкцію switch.
switchswitch (вираз) {
case значення1:
// код для значення1
break;
case значення2:
// код для значення2
break;
default:
// код, якщо збігів немає
}Конструкція складається з таких частин:
switch — ключове слово, яке починає конструкцію;
вираз — значення, яке потрібно перевірити;
case — окремий можливий варіант;
break — завершує виконання поточного case;
default — сценарій за замовчуванням, якщо жоден case не підходить.
const day = "понеділок";
switch (day) {
case "понеділок":
console.log("Початок робочого тижня");
break;
case "п'ятниця":
console.log("Кінець робочого тижня");
break;
case "субота":
case "неділя":
console.log("Вихідний день");
break;
default:
console.log("Невідомий день");
}У цьому прикладі значення змінної day дорівнює "понеділок". Тому виконається код після:
case "понеділок":У консоль буде виведено:
Початок робочого тижняПісля цього виконається break, і конструкція switch завершиться.
JavaScript порівнює значення у switch за принципом строгого порівняння, тобто так, як оператор ===.
Порівнюються і значення, і їхні типи:
const value = 1;
switch (value) {
case 1:
console.log("Число 1");
break;
case "1":
console.log("Рядок 1");
break;
}Результат:
Число 1Значення 1 і "1" не є однаковими, оскільки перше має тип number, а друге — тип string.
Цей код:
switch (value) {
case "1":
console.log("Знайдено");
break;
}не спрацює, якщо value дорівнює числу 1.
breakbreak зупиняє виконання конструкції switch.
Розглянемо приклад:
const color = "red";
switch (color) {
case "red":
console.log("Червоний");
break;
case "blue":
console.log("Синій");
break;
default:
console.log("Інший колір");
}Після виконання коду для case "red" JavaScript зустрічає break і виходить зі switch.
breakЯкщо не написати break, JavaScript продовжить виконання наступних case, навіть якщо їхні значення не збігаються.
const number = 1;
switch (number) {
case 1:
console.log("Один");
case 2:
console.log("Два");
case 3:
console.log("Три");
}Результат:
Один
Два
ТриТаку поведінку називають провалюванням або fall-through.
Зазвичай це помилка. Щоб виконати лише один сценарій, додавайте break наприкінці кожного case.
caseІноді кілька значень мають виконувати однаковий код. У такому випадку можна записати кілька case підряд:
const day = "субота";
switch (day) {
case "субота":
case "неділя":
console.log("Вихідний");
break;
default:
console.log("Робочий день");
}Якщо day дорівнює "субота" або "неділя", буде виконано один і той самий код.
Це еквівалентно такій логіці:
if (day === "субота" || day === "неділя") {
console.log("Вихідний");
} else {
console.log("Робочий день");
}defaultdefault виконується тоді, коли жодне значення case не збіглося зі значенням у switch.
const command = "pause";
switch (command) {
case "start":
console.log("Запуск");
break;
case "stop":
console.log("Зупинка");
break;
default:
console.log("Невідома команда");
}Оскільки значення "pause" не відповідає жодному case, результат буде таким:
Невідома командаdefault не є обов’язковим. Якщо його немає і збігів не знайдено, JavaScript просто не виконає жодного коду.
const status = "unknown";
switch (status) {
case "success":
console.log("Операція успішна");
break;
}У цьому прикладі нічого не буде виведено.
switch із числовими значеннямиУ switch можна порівнювати не лише рядки, а й числа:
const rating = 5;
switch (rating) {
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;
default:
console.log("Оцінка має бути від 1 до 5");
}Результат:
ВідмінноОскільки порівняння є строгим, рядок "5" не збігатиметься з числом 5:
const rating = "5";
switch (rating) {
case 5:
console.log("Відмінно");
break;
default:
console.log("Неправильний тип значення");
}Результат:
Неправильний тип значенняswitch із результатом виразуУ дужках після switch можна використовувати не лише змінну, а й вираз:
const firstNumber = 10;
const secondNumber = 5;
const operation = "subtract";
switch (operation) {
case "add":
console.log(firstNumber + secondNumber);
break;
case "subtract":
console.log(firstNumber - secondNumber);
break;
case "multiply":
console.log(firstNumber * secondNumber);
break;
default:
console.log("Невідома операція");
}У прикладі значення operation дорівнює "subtract", тому результатом буде:
5switchРезультат конструкції switch можна зберегти у змінну, якщо кожна гілка повертає значення через return у функції.
function getSeason(month) {
switch (month) {
case 12:
case 1:
case 2:
return "зима";
case 3:
case 4:
case 5:
return "весна";
case 6:
case 7:
case 8:
return "літо";
case 9:
case 10:
case 11:
return "осінь";
default:
return "Невідомий місяць";
}
}
console.log(getSeason(7));
console.log(getSeason(15));Результат:
літо
Невідомий місяцьКоли виконується return, функція завершується, тому в такому випадку break не потрібен.
switchswitch добре підходить, коли:
потрібно порівняти одне значення з багатьма конкретними варіантами;
кожен варіант має окремий сценарій;
порівняння не потребує діапазонів або складних умов.
Наприклад, switch зручний для команд:
function handleCommand(command) {
switch (command) {
case "help":
return "Список доступних команд";
case "start":
return "Процес запущено";
case "stop":
return "Процес зупинено";
default:
return "Команду не знайдено";
}
}
console.log(handleCommand("start"));Результат:
Процес запущеноif...elseif...else зручніший, якщо потрібно перевіряти:
діапазони чисел;
кілька різних змінних;
складні логічні умови;
нерівності, наприклад >, <, >=, <=.
Наприклад, для перевірки віку краще використати if...else:
const age = 20;
if (age < 13) {
console.log("Дитина");
} else if (age < 18) {
console.log("Підліток");
} else {
console.log("Дорослий");
}switch призначений переважно для порівняння одного значення з конкретними значеннями.
breakconst fruit = "apple";
switch (fruit) {
case "apple":
console.log("Яблуко");
case "banana":
console.log("Банан");
}Після "Яблуко" буде також виведено "Банан". Якщо це не запланована поведінка, додайте break.
const code = "200";
switch (code) {
case 200:
console.log("Успішно");
break;
default:
console.log("Інше значення");
}Рядок "200" не дорівнює числу 200. Потрібно або змінити значення:
const code = 200;або додати відповідний рядок у case:
case "200":casecase не працює як довільна логічна умова. Наприклад:
const age = 20;
switch (age) {
case age >= 18:
console.log("Повнолітня особа");
break;
}Вираз age >= 18 повертає true, а switch порівнює 20 із true, тому збігу не буде.
Для діапазонів використовуйте if...else:
if (age >= 18) {
console.log("Повнолітня особа");
}defaultdefault спрацьовує не лише для «помилкових» значень, а для будь-якого значення, якому не відповідає жоден case. Тому в ньому варто передбачити зрозумілу поведінку: повідомлення, значення за замовчуванням або обробку помилки.
Створіть функцію getRoleMessage, яка приймає роль користувача:
"admin" — повертає "Повний доступ";
"editor" — повертає "Може редагувати контент";
"viewer" — повертає "Може переглядати контент";
для інших значень — повертає "Невідома роль".
Один із можливих варіантів розв’язання:
function getRoleMessage(role) {
switch (role) {
case "admin":
return "Повний доступ";
case "editor":
return "Може редагувати контент";
case "viewer":
return "Може переглядати контент";
default:
return "Невідома роль";
}
}
console.log(getRoleMessage("admin"));
console.log(getRoleMessage("viewer"));
console.log(getRoleMessage("guest"));Результат:
Повний доступ
Може переглядати контент
Невідома рольswitch вибирає сценарій на основі одного значення.
Кожен варіант записується за допомогою case.
Порівняння у switch є строгим, як у ===.
break зупиняє виконання після знайденого case.
Без break відбувається виконання наступних гілок.
Кілька case можна об’єднати для спільного коду.
default виконується, якщо збігів немає.
Для діапазонів і складних умов зазвичай краще використовувати if...else.