Умовні конструкції

JavaScriptJunior~2 хв читання

Умовні конструкції в JavaScript, це способи виконати різні гілки коду залежно від значення виразу: if / else if / else, тернарний оператор ? :, switch і логічні скорочення &&, ||, ??. Усі вони роблять одне й те саме розгалуження, але відрізняються читабельністю й тим, чи повертають значення.

Теорія

TL;DR

if / else if / else, основна конструкція, умова зводиться до булевого значення (truthy/falsy).
Тернарний оператор умова ? a : b, це вираз, тому його результат можна присвоїти.
switch порівнює один вираз із набором case строгою рівністю ===; break запобігає провалюванню, default, це аналог else.
&& виконує праву частину, лише якщо ліва truthy.
|| повертає перше truthy значення, зручно для дефолтів.
?? підставляє значення лише для null та undefined, на відміну від ||.

Швидкий приклад

javascript

const age = 20;

if (age >= 18) {
  console.log('Дорослий');
} else if (age >= 14) {
  console.log('Підліток');
} else {
  console.log('Дитина');
}

if перевіряє умову.
else if додає додаткові перевірки.
else виконується, якщо жодна з попередніх не спрацювала.

Умова всередині if зводиться до булевого значення (truthy/falsy).

Тернарний оператор `? :`

Короткий запис для простих умов, який, на відміну від if, є виразом і повертає значення.

javascript

const age = 18;
const status = age >= 18 ? 'Дорослий' : 'Неповнолітній';

console.log(status); // "Дорослий"

Синтаксис: умова ? значення_якщо_істина : значення_якщо_хиба.

Кілька тернарних операторів можна вкладати один в одний, але обережно з читабельністю:

javascript

const age = 25;
const group =
  age < 13 ? 'дитина' :
  age < 20 ? 'підліток' :
  'дорослий';

Оператор `switch`

Зручний, коли варіантів одного й того самого виразу багато.

javascript

const day = 3;

switch (day) {
  case 1:
    console.log('Понеділок');
    break;
  case 2:
    console.log('Вівторок');
    break;
  case 3:
    console.log('Середа');
    break;
  default:
    console.log('Невідомий день');
}

break запобігає «провалюванню» в наступний case.
default, це аналог else.

Можна використовувати групування гілок:

javascript

switch (day) {
  case 6:
  case 7:
    console.log('Вихідний');
    break;
  default:
    console.log('Робочий день');
}

Важлива деталь: switch порівнює значення строгою рівністю ===, тому switch ('3') не потрапить у case 3.

Логічні оператори `&&`, `||`, `??`

Іноді if можна замінити логічними скороченнями.

&&, «і» (виконує другу частину, якщо перша truthy)

javascript

const isAdmin = true;
isAdmin && console.log('Ласкаво просимо, адміне!');

Якщо isAdmin === true, то виконається console.log.

||, «або» (повертає перше truthy значення)

javascript

const userName = '' || 'Гість';
console.log(userName); // "Гість"

Зручно для значень за замовчуванням.

??, nullish coalescing (лише для null та undefined)

javascript

const userInput = null;
const value = userInput ?? 'За замовчуванням';
console.log(value); // "За замовчуванням"

Відмінність від ||: не спрацьовує на 0, '', false.

Порівняння конструкцій

Конструкція	Це вираз?	Коли доречна
`if / else if / else`	ні	складна логіка з тілом гілки
`? :`	так	короткий вибір одного з двох значень
`switch`	ні	багато варіантів одного виразу, порівняння через `===`
`&&`, `\|\|`, `??`	так	коротка перевірка та значення за замовчуванням

Типові помилки

Плутати = і === в умові. if (x = 5) присвоює значення і завжди дає truthy.
Забувати break у switch. Виконання «провалюється» в наступні гілки, і спрацьовує кілька case поспіль.
Розраховувати на нестрогу рівність у switch. Порівняння строге, тому '3' і 3 це різні гілки.
Використовувати || для дефолтів там, де 0 чи '' є коректними значеннями. count || 10 перетворить справжній 0 на 10; тут потрібен ??.
Вкладати тернарні оператори на три й більше рівнів. Технічно це працює, але читати такий код важко, краще if або таблиця відповідностей (об'єкт).
Змішувати ?? з || чи && без дужок. Це SyntaxError, потрібні явні дужки.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.