Коли if-else не потрібен: Знайомство з тернарним оператором та switch у JS

У світі JavaScript, оператор if-else є одним з найфундаментальніших будівельних блоків. Він дозволяє вашому коду приймати рішення, розгалужуючись на різні шляхи виконання залежно від певної умови. Однак, надмірне або некоректне використання if-else, особливо у великих або вкладених структурах, може призвести до “коду спагеті” – важкого для читання, розуміння та підтримки. На щастя, JavaScript пропонує потужні альтернативи: тернарний оператор та оператор switch, які можуть зробити ваш код значно чистішим та ефективнішим.

Проблема if-else та чистий код у JavaScript

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

let message;
if (statusCode === 200) {
  message = "Успішно!";
} else if (statusCode === 400) {
  message = "Помилковий запит.";
} else if (statusCode === 401) {
  message = "Неавторизовано.";
} else if (statusCode === 404) {
  message = "Не знайдено.";
} else {
  message = "Невідома помилка.";
}

Такий код стає довгим і менш читабельним. На щастя, є кращі підходи.

Тернарний Оператор: Коротка Умова для Присвоєнь

Тернарний оператор (також відомий як умовний оператор) – це найкоротший спосіб написання умовного виразу. Він є відмінною альтернативою if-else, коли вам потрібно присвоїти значення змінній або повернути значення на основі простої умови.

Синтаксис: умова ? вираз_якщо_true : вираз_якщо_false;

Коли використовувати тернарний оператор:

• Для простих умов, де потрібно вибрати одне з двох значень.
• Коли ви хочете присвоїти значення змінній на основі умови.
• Усередині JSX у React для умовного рендерінгу.

Переваги:

• Консолідований код: Зменшує кількість рядків коду.
• Читабельність: Для простих умов він часто легше читається, ніж повноцінний if-else.

Приклад:

Замість:

let accessAllowed;
if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}

Ви можете написати:

const age = 20;
const accessAllowed = age > 18 ? true : false;
// Або ще простіше:
const accessAllowed = age > 18; // Умова сама по собі повертає булеве значення
console.log(accessAllowed); // true

const status = 'active';
const badgeColor = status === 'active' ? 'green' : 'red';
console.log(badgeColor); // green

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

Оператор switch: Чіткий Вибір для Багатьох Варіантів

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

Синтаксис:

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

Коли використовувати switch:

• Коли ви перевіряєте значення однієї змінної на відповідність декільком можливим константам.
• Для управління потоком на основі перерахувань або статусів.

Переваги:

• Читабельність: Значно покращує читабельність коду порівняно з багатьма else if.
• Організація: Допомагає чітко структурувати логіку.
• Продуктивність: У деяких випадках switch може бути оптимізований інтерпретатором JavaScript для швидшої роботи, ніж довгий ланцюжок if-else if.

Приклад:

Повернемося до нашого прикладу зі статусами:

const statusCode = 401;
let message;

switch (statusCode) {
  case 200:
    message = "Успішно!";
    break;
  case 400:
    message = "Помилковий запит.";
    break;
  case 401:
    message = "Неавторизовано.";
    break;
  case 404:
    message = "Не знайдено.";
    break;
  default:
    message = "Невідома помилка.";
}

console.log(message); // Неавторизовано.

Важливі моменти:

• break: Завжди використовуйте break в кінці кожного case, щоб уникнути “провалювання” (fallthrough) до наступного case. Якщо break відсутній, виконання продовжиться до наступного case, поки не зустрінеться break або не закінчиться switch.
• default: Необов’язковий блок, який виконується, якщо вираз не відповідає жодному case.

Коли використовувати if-else, тернарний оператор чи switch?

Вибір правильного інструменту залежить від контексту:

• if-else:
  • Для складних умов з логічними операторами (&&, ||, !).
  • Коли у вас є діапазони значень (наприклад, if (x > 10 && x < 20)).
  • Коли потрібно виконати різні блоки коду, а не просто присвоїти значення.
• Тернарний оператор:
  • Для простих, бінарних умов, де результатом є присвоєння значення або повернення.
  • Коли ви прагнете максимальної стислості для очевидної логіки.
• switch:
  • Для перевірки однієї змінної проти багатьох дискретних значень.
  • Коли читабельність багатьох case є пріоритетом.

Висновок

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