Кожна корисна програма рано чи пізно стикається з моментом прийняття рішення. Чи має ця кнопка відправити форму чи показати помилку? Чи бачить цей користувач панель адміністратора чи гостьовий інтерфейс? JavaScript відповідає на ці запитання за допомогою умовних операторів. Вони є регулювальними клапанами вашого коду: відкривають один шлях, закривають інший — і все це залежно від того, чи повертає вираз true чи false. Без них ваш скрипт просто рухався б зверху вниз, ніяк не реагуючи на дії користувача.

Найпростіша гілка: if

Оператор if — це перші ворота, через які ви проходите. Ви розміщуєте умову в дужках. Якщо ця умова повертає true, виконується блок коду під нею. Якщо вона повертає false, JavaScript повністю пропускає цей блок і продовжує виконання файлу.

Це саме те, що вам потрібно для простих, разових перевірок. Уявіть перевірку поля форми перед тим, як надсилати будь-які дані на сервер:

const email = document.getElementById("email").value;

if (email === "") {
  alert("Please enter your email.");
}

Немає email — немає відправки. Логіка проста і зрозуміла. Використовуйте if, коли потрібно захиститися лише від одного особливого випадку і не потрібна жодна альтернативна дія.

Вибір між двома варіантами: if...else

Більшість реальних рішень мають дві сторони. Пара if...else якраз це і забезпечує. Один блок виконується, коли умова істинна, інший — коли вона хибна. Ці два шляхи є взаємовиключними.

Уявіть перевірку темної теми під час завантаження сторінки:

const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

if (prefersDark) {
  document.body.classList.add("dark");
} else {
  document.body.classList.add("light");
}

Браузер ніколи не додасть обидва класи одночасно. Він обирає один шлях, виконує його і рухається далі. Щоразу, коли ваша логіка чітко розділяється на два можливі результати, використовуйте саме цю структуру.

Кілька шляхів: if...else if...else

Не кожна проблема є бінарною. Іноді вам потрібна «драбина» можливостей. Ланцюжок if...else if...else дозволяє перевіряти кілька умов послідовно. JavaScript оцінює їх зверху вниз і виконує перший блок, умова якого є істинною. Після цього збігу решта «драбини» ігнорується.

Класичний приклад — це відповідність числових балів буквеним оцінкам:

const score = 87;
let grade;

if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else {
  grade = "F";
}

Порядок тут має величезне значення. Якщо ви перевірите score >= 70 перед score >= 90, майже всі прохідні оцінки потраплять у категорію C, оскільки перший істинний збіг перемагає. Розміщуйте свої умови від найбільш специфічних до менш специфічних і завжди завершуйте ланцюжок фінальним else, щоб обробити все, що могло проскочити.

Порівняння з фіксованими значеннями: switch

Коли ви порівнюєте одну змінну зі списком відомих констант, довгий ланцюжок if...else стає занадто громіздким. Оператор switch допомагає навести лад. Він один раз обчислює вираз, а потім порівнює його з мітками case, використовуючи суворе порівняння (===). Це полегшує читання коду, коли варіанти є чіткими та іменованими.

Розглянемо встановлення годин роботи магазину залежно від поточного дня:

const day = new Date().getDay();

switch (day) {
  case 0:
    console.log("Sunday hours: 10am - 4pm");
    break;
  case 6:
    console.log("Saturday hours: 9am - 6pm");
    break;
  default:
    console.log("Weekday hours: 8am - 8pm");
}

Будьте обережні з break. Якщо ви його пропустите, виконання перейде до наступного case і продовжить працювати. Така поведінка іноді буває корисною, але частіше вона призводить до прихованих помилок. При правильному використанні switch робить ваші наміри очевидними з першого погляду та тримає пов'язані гілки в одному охайному стовпці.

Компактні рішення: тернарний оператор

Тернарний оператор, що записується як ? :, є виразом, а не оператором. Ця відмінність має значення