Для чего нужен оператор nullish coalescing (??) и как он работает в JavaScript

Что проверяют

Понимаете ли вы разницу между «ложным» и «отсутствующим» значением. Следом обычно спрашивают, чем ?? отличается от || на конкретных значениях и можно ли смешивать их в одном выражении.

Как отвечать

Оператор ?? появился в ES2020. Выражение a ?? b возвращает b, только если a равно null или undefined, в остальных случаях возвращает a. Правая часть вычисляется лениво: если слева есть значение, функция справа не вызовется.

Главное сравнение с ||, который срабатывает на любом falsy-значении:

• 0 || 10 даёт 10, а 0 ?? 10 даёт 0;
• '' || 'гость' даёт 'гость', а с ?? останется пустая строка;
• false || true даёт true, а false ?? true вернёт false.

Отсюда правило: ?? нужен для значений по умолчанию там, где ноль, пустая строка и false это нормальные данные. Во фронтенде это количество товаров, размер страницы, флаги из конфигурации или ответа API, props.limit ?? 20 в компоненте.

Чтобы ответ был полным, добавьте:

• связку с ?.: user?.profile?.name ?? 'Аноним' безопасно проходит по цепочке и подставляет значение по умолчанию;
• ??=: присваивание из ES2021, options.timeout ??= 5000 запишет значение, только если его не было;
• приоритет: смешивать ?? с || или && без скобок нельзя, a || b ?? c даёт SyntaxError.

Для старых браузеров Babel или TypeScript транспилируют оператор в проверку на null и undefined, так что ограничений на него в современном проекте нет.

Где спотыкаются

Говорят, что ?? ловит «пустые значения», и включают туда 0 и ''. Это ровно то поведение ||, от которого ?? избавляет.

Путают его с параметрами по умолчанию. function f(x = 5) подставит 5 только для undefined, а f(null) получит null. Оператор ?? сработает на обоих.

Механически меняют все || на ?? при рефакторинге. Там, где пустую строку из поля ввода нужно было заменить значением по умолчанию, поведение тихо ломается.