Кожна програма повинна реагувати. Користувач натискає кнопку. API повертає дані. Поле форми стає порожнім. Без можливості розгалуження ваш код виконувався б рядок за рядком, незалежно від того, що відбувається насправді. Умовні оператори дають JavaScript цю здатність обирати. Вони є «особами, що приймають рішення» всередині ваших функцій, охоронцями, які вирішують, що виконувати, а що пропустити. Як тільки ви зрозумієте, як правильно їх писати, ви перестанете створювати жорсткі скрипти й почнете розробляти програмне забезпечення, яке дійсно реагує на дії.

Чому умовні оператори мають значення

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

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

Базова інструкція if

Найпростіше місце для початку — це окремий if. Він каже: якщо ця умова істинна, виконай цю роботу. І все. Жодних запасних варіантів, жодних альтернативних шляхів.

if (x % 2 === 0) {
    console.log("Even");
}

У цьому фрагменті оператор остачі від ділення перевіряє, чи ділиться x на два без остачі. Коли остача дорівнює нулю, консоль виводить рядок. Якщо x — непарне число, нічого не відбувається. Блок ігнорується, і виконання продовжується нижче.

Це «тихе ігнорування» є важливим. Іноді ви хочете захистити лише одну дію. Можливо, ви хочете додати CSS-клас до кнопки лише тоді, коли вона активна, або додати елемент до масиву лише тоді, коли ввід не порожній. Голий оператор if дозволяє вирішувати такі моменти, не змушуючи вас писати зайву логіку.

Додавання альтернативи за допомогою if-else

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

if (age >= 18) {
    console.log("Adult");
} else {
    console.log("Not an Adult");
}

Блок else перехоплює все, що не пройшла перша умова. Він створює чітку бінарну гілку. Цей патерн добре працює для перемикачів (toggles), дозволів (permissions) та feature flags. Тримайте логіку всередині кожного блоку зосередженою. Якщо ви помічаєте, що намагаєтеся запхати занадто багато завдань в одну гілку, це зазвичай сигнал до того, що роботу варто розділити на менші функції.

Перевірка кількох шляхів за допомогою else if

Життя рідко пропонує лише два варіанти. Вам може знадобитися класифікувати число як додатне, від'ємне або нуль. Ви можете призначати тариф на доставку залежно від вагових категорій. Для впорядкованих багаторазових порівнянь використовуйте else if.

if (x > 0) {
    console.log("Positive");
} else if (x < 0) {
    console.log("Negative");
} else {
    console.log("Zero");
}

JavaScript оцінює їх зверху вниз. Як тільки одна умова виконується, він запускає цей блок і ігнорує решту. Порядок має значення. Якщо ви перевірите x > 0 після перевірки x > 100, суворіша перевірка ніколи не спрацює, оскільки менш сувора перехопить її першою. Думайте про else if як про список пріоритетів.

Оператор switch

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

switch (true) {
    case marks >= 90:
        Branch = "Computer science";
        break;
    case marks >= 80:
        Branch = "Mechanical";
        break;
    default:
        Branch = "Other";
}

Цей приклад використовує switch(true), щоб безпосередньо оцінювати булеві умови, що є поширеним патерном у JavaScript, коли ваша логіка базується на діапазонах, а не на точній рівності. Ключове слово break є обов'язковим. Без нього виконання «провалюється» до наступного case, незалежно від того, чи відповідає він умові, що рідко є бажаним результатом. Конструкція default діє як фінальний else, перехоплюючи все, що не підпало під попередні випадки.

switch виграшно виглядає, коли у вас є чіткі, фіксовані варіанти. Його часто легше просканувати поглядом, ніж високий стос блоків else if, особливо коли кожна гілка просто присвоює значення або викликає одну функцію.

Тернарний оператор

Для коротких бінарних рішень тернарний оператор дозволяє зберігати компактність. Він приймає три операнди: умову, значення, якщо вона істинна, і значення, якщо вона хибна.

const result = (age >= 18) ? "Eligible" : "Not eligible";

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

Вкладені рішення

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

if (weather === "sunny") {
    if (temp > 30) {
        console.log("