Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Умовні конструкції». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Умовні конструкції в 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`, потрібні явні дужки.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати630 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.