Оператор nullish coalescing

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

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

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

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

Premium

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