Оператор nullish coalescing (??)

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

Оператор ?? (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.

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

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

Premium

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