Інструкція switch у JavaScript: Від базової теорії до складних практичних сценаріїв

У процесі розробки веб-додатків нерідко виникають ситуації, коли потрібно виконати один із багатьох варіантів коду залежно від значення конкретного виразу або змінної. Написання довгого ланцюжка з if...else if...else if робить код громіздким та складним для читання.

Інструкція switch у сучасному JavaScript (Vanilla JS) надає більш наочний, структурований та елегантний спосіб розгалуження коду за багатьма умовами.

1. Синтаксис та принципи роботи

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

switch (вираз) {
    case значення1:
        // Код, що виконується, якщо вираз === значення1
        break;
    case значення2:
        // Код, що виконується, якщо вираз === значення2
        break;
    default:
        // Код, що виконується, якщо жоден case не підійшов
        break;
}

Ключові особливості роботи:

• Суворе порівняння (Strict Equality): Перевірка здійснюється за допомогою суворого оператора ===. Це означає, що значення повинні збігатися не лише за вмістом, а й за типом даних. Рядок "5" та число 5 вважатимуться різними значеннями.
• Оператор break: Якщо прибрати break, виконання коду «провалиться» у наступний блок case незалежно від того, чи збігається його значення, і продовжуватиметься до першого break або кінця блоку switch.
• Необов’язковий блок default: Виконується тоді, коли жодне із значень у case не збіглося з переданим виразом. Його можна розміщувати у будь-якому місці блоку, але за традицією ставлять наприкінці.

2. Порівняльний аналіз: switch проти if…else if

3. Практичні приклади використання в сучасному JavaScript

Приклад 1: Обробка ролей користувача та прав доступу

Класичний сценарій перевірки фіксованого значення атрибута (наприклад, роль у системі):

function getDashboardAccess(userRole) {
    let accessLevel;
    switch (userRole) {
        case 'admin':
            accessLevel = 'Повний доступ до панелі управління та налаштувань сервера.';
            break;
        case 'editor':
        case 'author': // Групування кейсів: editor та author отримують однаковий доступ
            accessLevel = 'Доступ до створення та редагування матеріалів.';
            break;
        case 'subscriber':
            accessLevel = 'Доступ лише до читання закритих статей.';
            break;
        default:
            accessLevel = 'Гостьовий доступ. Будь ласка, авторизуйтесь.';
            break;
    }
    return accessLevel;
}
console.log(getDashboardAccess('author')); // "Доступ до створення та редагування матеріалів."
console.log(getDashboardAccess('guest'));  // "Гостьовий доступ. Будь ласка, авторизуйтесь."

Приклад 2: Використання switch(true) для оцінки діапазонів значень

Незвичайний, але дуже популярний у сучасній розробці патерн: передача у switch значення true. Це дозволяє використовувати динамічні логічні вирази у блоках case:

function getDiscountByCartTotal(totalAmount) {
    let discountPercent;
    // Передаємо true у switch, щоб оцінювати булеві вирази в case
    switch (true) {
        case totalAmount >= 10000:
            discountPercent = 15;
            break;
        case totalAmount >= 5000:
            discountPercent = 10;
            break;
        case totalAmount >= 1000:
            discountPercent = 5;
            break;
        case totalAmount > 0:
            discountPercent = 0;
            break;
        default:
            return 'Помилка: Сума замовлення повинна бути додатною.';
    }
    return `Ваша знижка: ${discountPercent}%`;
}
console.log(getDiscountByCartTotal(6500)); // "Ваша знижка: 10%"
console.log(getDiscountByCartTotal(-50));   // "Помилка: Сума замовлення повинна бути додатною."

Приклад 3: Область видимості змінних (Block Scope) всередині case

За замовчуванням весь switch має єдину спільну область видимості. Спроба оголосити змінну з однаковим ім’ям у різних case через const або let призведе до помилки SyntaxError. Для вирішення цього використовуються фігурні дужки {}:

const action = 'CREATE_USER';
switch (action) {
    case 'CREATE_USER': { // Обмежуємо область видимості за допомогою блоку {}
        const message = 'Створення нового користувача в базі...';
        console.log(message);
        break;
    }
    case 'DELETE_USER': { // Тепер можна безпечно використовувати те ж ім'я змінної message
        const message = 'Видалення користувача...';
        console.log(message);
        break;
    }
    default:
        console.log('Невідома дія.');
        break;
}

Технічна порада розробника: Завжди пам’ятайте про суворе порівняння типів у switch. Якщо ви отримуєте значення з HTML-форми або URL-параметрів (наприклад, const status = input.value), воно завжди матиме тип String. Якщо у вашому case 1: вказано число, перевірка не спрацює. Перед передачею змінної у switch явно приводьте її до потрібного типу (наприклад, через Number(status) або parseInt(status, 10)).