Посібник із оператора JavaScript Switch із прикладами

Оператор `switch` у JavaScript є важливим інструментом для керування потоком виконання коду. Він дозволяє створювати розгалуження програми, коли потрібно обробити велику кількість можливих варіантів. Це особливо зручно, коли маємо справу з багатьма умовами, для яких оператори `if` можуть бути незграбними.

Цей матеріал є детальним посібником з використання `switch`. Ми також порівняємо його з іншими способами умовного виконання коду, такими як `if` та тернарні оператори, щоб допомогти вам визначити, коли який з них краще використовувати.

Що таке оператор `switch` у JavaScript?

Оператор `switch` використовується для вибору гілки коду, яка має бути виконана, на основі значення певного виразу. Це один із основних інструментів для умовного виконання коду в JavaScript.

Він має схожу функціональність з `if` та тернарними операторами, але працює дещо інакше, що робить його більш зручним у певних ситуаціях. У цій статті ми розглянемо усі його особливості та можливості.

Як використовувати інструкцію `switch` у JavaScript

У цьому розділі ми детально розглянемо, як працює оператор `switch` та як його застосовувати. Для кращого розуміння ми будемо використовувати приклади коду, тож вам знадобиться середовище для виконання JavaScript. Одним з найпростіших варіантів є використання онлайн-компілятора JavaScript. Також рекомендуємо ознайомитися з нашою статтею про найкращі онлайн IDE для JavaScript.

Загальний синтаксис

Загальний вигляд оператора `switch` такий:

switch(<вираз>) {
    case <значення 1>:
        <інструкції>
        break;
    case <значення 2>:
        <інструкції>
        break;
    default:
        <інструкції>
}

Ключове слово `switch` позначає початок блоку `switch` у JavaScript. У дужках після нього розміщується вираз, значення якого буде перевірятися. Виразом може бути все, що повертає певне значення, наприклад, літерали (рядки або числа), змінні або виклики функцій.

Далі, у фігурних дужках, йде тіло оператора `switch`, яке складається з різних блоків `case`. Кожен `case` має певне значення та набір інструкцій. Якщо значення виразу у дужках збігається зі значенням `case`, тоді виконуються інструкції цього `case`.

Для кожного `case` можна додати ключове слово `break`. Його використання не є обов’язковим. Якщо `break` є, JavaScript вийде з блоку `switch` при його зустрічі. Якщо `break` відсутній, JavaScript продовжить виконання інструкцій наступних `case`. Це явище відоме як “провал” (fallthrough). Якщо ви не хочете використовувати провал, рекомендується додавати `break` у кінці кожного `case`.

Ключове слово `default` визначає блок коду, який виконується, якщо значення виразу не збігається з жодним із `case`.

Приклади

У цьому розділі ми наведемо різні приклади використання оператора `switch` для ілюстрації його можливостей.

#1. З Fallthrough

Ось приклад `switch` без `break`, щоб показати, як працює провал.

У цьому прикладі ми розглядаємо обробку різних HTTP-кодів стану:

const statusCode = <вставте код статусу>

switch (statusCode) {
    case 200:
        console.log('OK');
    case 301:
        console.log('Перенаправлення');
    case 403:
        console.log('Заборонено');
    case 404:
        console.log('Не знайдено');
    case 500:
        console.log('Помилка внутрішнього сервера')
}

Код перевіряє, чи збігається `statusCode` з одним зі значень `case`, та виводить відповідне повідомлення.

Розглянемо, що станеться, якщо `statusCode` дорівнює 403.

Після збігу з `case 403`, виконуються також всі наступні `case`. Це і є провал. Такий підхід не завжди бажаний, оскільки зазвичай ми хочемо виконати лише один `case`. Саме тому важливо використовувати `break`.

#2. Без Fallthrough

Щоб уникнути небажаного виконання наступних `case`, ми додаємо `break` в кінці кожного. Наступний приклад показує, як це працює:

const statusCode = <вставте код статусу>

switch (statusCode) {
    case 200:
        console.log('OK');
        break;
    case 301:
        console.log('Перенаправлення');
        break;
    case 403:
        console.log('Заборонено');
        break;
    case 404:
        console.log('Не знайдено');
        break;
    case 500:
        console.log('Помилка внутрішнього сервера')
        break;
}

Тепер, якщо ми запустимо цей код зі значенням `statusCode` 403, отримаємо наступне:

Як бачимо, тепер код виконує лише один відповідний `case` і не переходить до наступних.

#3. Корисний Fallthrough

Важливо зазначити, що провал може бути корисним у деяких ситуаціях. Розглянемо приклад, де ми хочемо перевірити, чи рухається об’єкт горизонтально або вертикально, залежно від введеного напрямку.

const direction = '<введіть напрямок>'

switch(direction) {
    case 'ліворуч':
    case 'праворуч':
        console.log('горизонтальний рух');
        break;
    case 'вгору':
    case 'вниз':
        console.log('вертикальний рух');
        break;
}

Якщо напрямок `direction` встановлено на `ліворуч`, то результат буде таким:

І якщо `direction` встановлено на `праворуч`, результат буде таким же:

Це відбувається тому, що коли `case ‘ліворуч’` збігається, він переходить до `case ‘праворуч’` і виводить “горизонтальний рух”. Оскільки є `break`, він не переходить до наступних `case`. Коли `case ‘праворуч’` збігається, він виконує інструкції і зупиняється.

Таким чином, провал дозволяє створювати логіку “АБО” у коді.

#4. Зіставлення діапазонів

Оператор `switch` перевіряє, чи значення `case` точно відповідає значенню виразу. Інколи потрібно перевірити, чи значення входить у певний діапазон. Зіставлення діапазонів може бути складним, але наведений приклад демонструє, як це зробити.

Наприклад, ми хочемо написати програму, яка друкує оцінку на основі отриманого балу. Наприклад, якщо бал вище 90, програма виведе “A+”. Якщо вище 80, але менше 90, буде виведено “A”, і так далі.

Для цього ми використовуємо вираз `true` у дужках `switch`. Кожне значення `case` буде логічною операцією, яка повертатиме `true` лише якщо бал знаходиться у діапазоні для цього `case`. Наприклад, `mark >= 90` буде `true` лише, коли бал більший або дорівнює 90. Таким чином, він буде відповідати значенню `true` виразу `switch`.

const mark = <вставте бал>;

switch (true) {
    case mark >= 50 && mark < 60:
        console.log('D');
        break;
    case mark >= 60 && mark < 70:
        console.log('C');
        break;
    case mark >= 70 && mark < 80:
        console.log('B');
        break;
    case mark >= 80 && mark < 90:
        console.log('A')
        break;
    case mark >= 90:
        console.log('A+')
        break;
    default:
        console.log('<50')
}

Результат виконання коду, якщо бал дорівнює 80:

Якщо бал дорівнює 95:

І якщо бал дорівнює 45:

Лексична область видимості

Інструкції всередині `case` у `switch` не мають лексичної області видимості. Це означає, що змінні, оголошені в одному `case`, доступні в інших `case`. Це важливо враховувати, коли пишете `switch`, де може збігатися більше одного `case`. Ось приклад:

switch (true) {
    case true:
        let num = 10
    case true:
        console.log(num);
}

У цьому коді обидва `case` збігаються. В першому `case` ми оголошуємо змінну `num`, а в другому ми звертаємось до її значення. Помилки не буде, як видно на скріншоті нижче:

Різниця між `switch` та іншими умовними операторами

Оператор `switch` найкраще підходить для випадків, коли потрібно перевіряти багато різних умов. Оператор `if` підходить для 2-3 умов. Тернарний оператор підходить лише тоді, коли ви хочете виразити умовний оператор в одному рядку.

Для стислості спершу слід використовувати тернарні оператори. Якщо неможливо виразити логіку в тернарному операторі, можна використовувати `if`. Якщо і це не підходить, тоді слід застосувати `switch`.

Висновок

У цій статті ми детально розглянули оператор `switch`, його використання та особливості. Ми також визначили випадки, коли його слід використовувати.

Для подальшого вдосконалення ваших навичок JavaScript, рекомендуємо ознайомитися з цими шпаргалками з JavaScript.