Умовні оператори JavaScript

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

Що таке умовні оператори?

У JavaScript умовні оператори контролюють потік логіки, виконуючи певні блоки коду на основі умов. Вони є основою інтерактивного та чуйного програмування.

Типи умовних операторів у JavaScript

1. Оператор if

Оператор if перевіряє умову та виконує код лише тоді, коли умова є істинною.

Синтаксис:

if (умова) {  
 // код, що виконується, якщо умова істинна  
}

Приклад: Перевірка, чи є число додатним.

let number = 5;  
if (number > 0) {  
 console.log("Число є додатним.");  
}

Застосування: Просте порівняння, наприклад перевірка введення користувача або базова валідація.

2. Оператор if-else

Коли умова не завжди може бути істинною, використовуйте if-else, щоб забезпечити альтернативні дії.

Синтаксис:

if (умова) {  
 // код, якщо умова істинна  
} else {  
 // код, якщо умова хибна  
}

Приклад: Категоризація оцінок.

let marks = 75;  
if (marks >= 50) {  
 console.log("Складав");  
} else {  
 console.log("Не склав");  
}

Застосування: Дерево рішень з двома можливими варіантами.

3. Ланцюжок if-else if

Використовуйте, коли потрібно перевіряти кілька умов, які є взаємовиключними.

Синтаксис:

if (умова1) {  
 // код для умови1  
} else if (умова2) {  
 // код для умови2  
} else {  
 // код, якщо жодна з умов не істинна  
}

Приклад: Погода.

let weather = "rainy";  
if (weather === "sunny") {  
 console.log("Носи сонцезахисні окуляри!");  
} else if (weather === "rainy") {  
 console.log("Візьми парасольку.");  
} else {  
 console.log("Перевір прогноз.");  
}

Застосування: Більш складні сценарії, що вимагають кількох перевірок.

4. Оператор switch

Ідеально підходить для сценаріїв з фіксованими значеннями. Оператор switch надає більш зручний синтаксис, ніж кілька блоків if-else.

Синтаксис:

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

Приклад: Дні тижня.

let day = "Monday";  
switch (day) {  
 case "Monday":  
 console.log("Початок робочого тижня!");  
 break;  
 case "Saturday":  
 case "Sunday":  
 console.log("Вихідні!");  
 break;  
 default:  
 console.log("Середина тижня.");  
}

Застосування: Обробка фіксованих значень, таких як варіанти меню або ролі користувачів.

5. Термінальний оператор (? :)

Компактна альтернатива if-else для простих умов.

Синтаксис:

умова ? вираз1 : вираз2;

Приклад: Перевірка прав на голосування.

let age = 18;  
let canVote = age >= 18 ? "Так" : "Ні";  
console.log(canVote);

Застосування: Умовні перевірки в UI або швидка валідація.

Кращі практики для умовних операторів

1. Зберігайте читабельність: Уникайте глибоко вкладених блоків if-else; якщо потрібно, рефакторьте в окремі функції.
2. Використовуйте switch для фіксованих значень: Це більш читабельно, ніж кілька операторів if-else.
3. Спрощуйте з термінальними операторами: Використовуйте їх для стислих умов, але уникайте надмірної складності.
4. Завжди додавайте default: Обробляйте неочікувані випадки в switch для більшої надійності коду.

Поширені помилки та як їх уникнути

1. Забування про break в switch: Призводить до непотрібного переходу між випадками.
2. Використання == замість ===: Завжди використовуйте === для суворого порівняння.
   текст перекладу
   Пропуск крайніх випадків: Завжди враховуйте недійсні або несподівані введення.

Реальні приклади

• Валідація форми: Перевірка введення користувача для полів, таких як електронна пошта та пароль.

if (email === "" || password === "") {  
 console.log("Усі поля обов'язкові для заповнення.");  
} else {  
 console.log("Форма успішно надіслана.");  
}

Ролі користувачів та дозволи: Надання доступу на основі ролей.

let role = "admin";  
switch (role) {  
 case "admin":  
 console.log("Надано повний доступ.");  
 break;  
 case "editor":  
 console.log("Надано доступ для редагування.");  
 break;  
 case "viewer":  
 console.log("Надано доступ тільки для перегляду.");  
 break;  
 default:  
 console.log("Доступ не надано.");  
}

Висновок

Умовні оператори JavaScript — це потужні інструменти для прийняття рішень у вашому коді. Освоївши ці конструкції, ви зможете створювати чуйні, ефективні та підтримувані додатки. Почніть практикувати вже сьогодні і підніміть свої навички програмування на новий рівень!

Який ваш улюблений випадок використання умовних операторів у JavaScript? Поділіться ним у коментарях нижче! 😎

Перекладено з: JavaScript Conditional Statements