Умова Switch

В попередніх матеріалах ми познайомились з вами з умовною конструкцією if…else.

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

Як от в цьому прикладі:

При цьому умова «якщо / а інакше» працює схоже на дорогу, що завжди має розвилку з двох напрямків. Якщо так — сюди, а якщо ні — сюди.

Але буває так, що двох напрямків недостатньо. Скажімо, ви можете використовувати одну і ту саму посадкову сторінку для різних курсів — Figma, Webflow, Фронтенд та JavaScript. Кожному курсу відповідає певне ключове слово. За допомогою нього ми можемо визначити, якому саме курсу присвячена посадкова сторінка, і задавати змінній «назва» (title) потрібний нам зміст.

Для цього ми використовуємо умовну конструкцію switch (тобто «перемикач»).

Як влаштована умова switch

В цьому коді ми визначаємо дві змінні — course та title. Далі слідує умовна конструкція, що починається з ключового слова switch та змінної course, значення якої ми перевіряємо, і відповідно до якої визначаємо подальші дії.

Ще один елемент цієї умовної конструкції — миле нам слово case (тобто, «випадок»).

А завершальний, третій елемент — ключове слово break (тобто «перервати»). Воно, власне, і означає, що в цьому місці потрібно перервати виконання конструкції.

Написаний код означає приблизно наступне: «В залежності від значення змінної course, працюємо за одним з наступних випадків…». І далі — для кожного випадку задається відповідне значення змінної та прописуються відповідні інструкції. В нашому прикладі — це лише задання значення змінної title (тобто «назва»), але інструкції можуть бути й складнішими.

Переривання виконання інструкції

При цьому цікавим є те, як працює слово break. Воно з одного боку показує місце, в якому завершується набір інструкцій для випадку, до якого воно відноситься, а з іншого — слугує завершенням роботи всієї конструкції в цілому.

Без нього виконання інструкцій продовжилось би аж до самого кінця нашої умовної конструкції. Тобто, значення змінної title просто послідовно отримувало б всі перелічені значення, аж доки не дісталось би випадку JavaScript, адже він є останнім в цьому блоці, навіть, якщо змінній course було задано значення figma: