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

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

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

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

Контент

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

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

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

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

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

Оператор `??`, або **nullish coalescing (оператор об'єднання з null)**, - це сучасний спосіб задати **значення за умовчанням**, але тільки коли змінна **дорівнює** `null` **або** `undefined`, а не будь-якому "хибному" значенню.

---

## Синтаксис

```javascript
a ?? b
```

Читається так:

> "Якщо `a` **не** `null` **і не** `undefined`, повернути `a`; інакше - повернути `b`."

---

## Приклад

```javascript
const name = null;
const displayName = name ?? 'Гість';

console.log(displayName); // "Гість"
```

Тут `name` дорівнює `null`, тому повертається `'Гість'`.

---

## Порівняння з `||` (логічним АБО)

Вони **схожі**, але є важлива різниця: `||` вважає **всі хибні (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 не дорівнює null/undefined
```

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

---

## Таблиця порівняння

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

---

## Приклад з об'єктом

```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`.

---

## Приклад у функціях

```javascript
function greet(name) {
  const user = name ?? 'Гість';
  console.log(`Привіт, ${user}!`);
}

greet('Олег'); // "Привіт, Олег!"
greet(null);    // "Привіт, Гість!"
greet();        // "Привіт, Гість!"
```

---

## Комбінація з `&&` і `||`

Можна комбінувати, але потрібно використовувати дужки, щоб уникнути помилок пріоритету:

```javascript
const result = (a ?? b) && c;
```

> Без дужок може виникнути помилка в строгому режимі:
>
> ```javascript
> SyntaxError: Unexpected token '&&'
> ```

---

## Приклад у реальній ситуації

### Встановлення значення за умовчанням

```javascript
const page = config.page ?? 1;
```

### Перевірка даних від API

```javascript
const userName = response.data.name ?? 'Анонім';
```

### Відображення в інтерфейсі

```javascript
console.log(`Привіт, ${user.name ?? 'гість'}!`);
```

---

## Підсумок

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

---

## Коротко

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

---

### Приклади оператора `??`:

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

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

Для рев’юера

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

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