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

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

Допрацюйте відповідь до «Оператор nullish coalescing (??)». Ваші зміни проходять модерацію перед публікацією.

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

Контент

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

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

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

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

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

**Оператор `??` (nullish coalescing, об'єднання з null) повертає лівий операнд, якщо той не є `null` і не є `undefined`, а інакше повертає правий.** Це спосіб задати значення за замовчуванням саме для «відсутнього» значення, а не для будь-якого falsy.

## Теорія

### TL;DR
- `a ?? b`: якщо `a` не `null` і не `undefined`, повертається `a`, інакше `b`.
- `||` спрацьовує на всіх falsy значеннях, `??` тільки на nullish (`null`, `undefined`).
- Тому `0 ?? 100` дає `0`, а `0 || 100` дає `100`.
- Правий операнд обчислюється лише за потреби, це теж коротке замикання.
- `??` не можна змішувати з `&&` чи `||` без дужок, буде `SyntaxError`.

### Швидкий приклад
```javascript
const name = null;
const displayName = name ?? 'Guest';

console.log(displayName); // "Guest"

null ?? 'default'      // "default"
undefined ?? 'default' // "default"
0 ?? 100               // 0
'' ?? 'текст'          // ""
false ?? true          // false
```

### Синтаксис і як читати вираз
```javascript
a ?? b
```

Читається так: «якщо `a` не `null` і не `undefined`, повернути `a`, інакше повернути `b`».

Формально це еквівалент такого запису:

```javascript
value1 ?? value2
// якщо value1 !== null && value1 !== undefined -> повернути value1
// інакше -> повернути value2
```

Як і `||` та `&&`, оператор `??` працює з коротким замиканням: правий операнд не обчислюється, коли лівий уже придатний.

### Порівняння з `||` (логічним АБО)
Оператори схожі, але різниця принципова: `||` вважає «порожніми» **усі falsy значення** (`0`, `''`, `false`, `NaN`, `null`, `undefined`), а `??` реагує **лише на `null` і `undefined`**.

```javascript
const a = 0;

console.log(a || 100); // 100, бо 0 є falsy
console.log(a ?? 100); // 0,   бо 0 не є nullish
```

Тобто `??` **зберігає** такі значення, як `0`, `false` та `''`.

| Значення `a` | `a \|\| 'default'` | `a ?? 'default'` |
| --- | --- | --- |
| `undefined` | `'default'` | `'default'` |
| `null` | `'default'` | `'default'` |
| `0` | `'default'` | `0` |
| `false` | `'default'` | `false` |
| `''` | `'default'` | `''` |
| `'text'` | `'text'` | `'text'` |

### Практичні приклади
Значення з об'єкта конфігурації, де `false` є валідним вибором користувача:

```javascript
const settings = {
  theme: null,
  notifications: false,
};

const theme = settings.theme ?? 'light';
const notifications = settings.notifications ?? true;

console.log(theme);         // "light"
console.log(notifications); // false, значення не підмінилося
```

`notifications` не стало `true`, бо `false` не є ні `null`, ні `undefined`.

Значення за замовчуванням для аргумента функції, який може бути пропущений або явно `null`:

```javascript
function greet(name) {
  const user = name ?? 'Guest';
  console.log(`Hello, ${user}!`);
}

greet('Maria'); // "Hello, Maria!"
greet(null);    // "Hello, Guest!"
greet();        // "Hello, Guest!"
```

Типові місця застосування:

```javascript
const page = config.page ?? 1;                       // значення за замовчуванням
const userName = response.data.name ?? 'Anonymous';  // дані з API
console.log(`Hello, ${user.name ?? 'guest'}!`);      // відображення в інтерфейсі
```

### Пріоритет і обов'язкові дужки
`??` не можна змішувати з `&&` або `||` в одному виразі без дужок: мова навмисно забороняє це, щоб ніхто не вгадував пріоритет.

```javascript
const result = (a ?? b) && c; // правильно
```

Без дужок код не скомпілюється:

```javascript
SyntaxError: Unexpected token '&&'
```

Часто `??` поєднують з optional chaining, і тоді дужки не потрібні, бо `?.` не є логічним оператором:

```javascript
const city = user?.address?.city ?? 'Unknown';
```

### Підсумкова таблиця

| Характеристика | Оператор `??` | Оператор `\|\|` |
| --- | --- | --- |
| Перевіряє | лише `null` і `undefined` | усі falsy (`0`, `''`, `false`, `NaN`, `null`, `undefined`) |
| Повертає | перше не-nullish значення | перше truthy значення |
| Застосовують для | значень за замовчуванням | логічних перевірок |

### Типові помилки
- **Використовують `||` для числових значень за замовчуванням.** `count || 10` перетворить коректний `0` на `10`. Для таких випадків потрібен `??`.
- **Змішують `??` з `&&` чи `||` без дужок.** Це не попередження лінтера, а справжній `SyntaxError` на етапі парсингу.
- **Очікують, що `??` відсіє порожній рядок.** `'' ?? 'default'` повертає `''`. Якщо порожній рядок теж треба замінити, перевіряйте його явно: `value?.trim() || 'default'`.
- **Плутають `??` з `?.`.** `?.` безпечно читає властивість і дає `undefined`, а `??` підставляє значення. Вони доповнюють одне одного, а не замінюють.
- **Думають, що `??=` те саме, що `=`.** Оператор присвоєння `x ??= 5` записує значення лише тоді, коли `x` є `null` або `undefined`.

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

Для рев’юера

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

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