Что такое null-коалесцентный оператор ?? в JavaScript

Операторы ?? и ??= стали доступны в Baseline в статусе «Widely Available» с 16 марта 2023 года. Они упрощают работу с переменными, которые могут быть null или undefined, позволяя задавать значения по умолчанию или обновлять переменные только в этих случаях. Это делает код чище и понятнее, особенно при работе с потенциально отсутствующими данными.

В этой статье мы разберём, как работают операторы нулевого слияния, и покажем примеры их использования.

Как работает оператор ??

Оператор нулевого слияния ?? возвращает значение справа, если значение слева равно null или undefined. В отличие от логического оператора ||, который считает ложными любые falsy-значения (например, 0, '', false), ?? проверяет только null и undefined. Это делает его более точным для задания значений по умолчанию.

Пример:

let value = null;
console.log(value ?? 'По умолчанию'); // По умолчанию

value = 0;
console.log(value ?? 'По умолчанию'); // 0 (в отличие от ||, который вернул бы 'По умолчанию')

Как работает оператор ??=

Оператор присваивания нулевого слияния ??= присваивает значение справа переменной слева, только если левая переменная равна null или undefined. Это удобно для инициализации переменных значениями по умолчанию без лишних проверок.

Пример:

let name;
name ??= 'Гость';
console.log(name); // Гость

let age = 25;
age ??= 18;
console.log(age); // 25, так как age уже определён

Пример 1: Задание значений по умолчанию

Оператор ?? часто используется для предоставления дефолтных значений в ситуациях, когда данные могут отсутствовать, например, при работе с API или пользовательскими настройками.

const userSettings = {
  theme: null,
  fontSize: 16
};

const theme = userSettings.theme ?? 'light';
const fontSize = userSettings.fontSize ?? 14;

console.log(theme); // light
console.log(fontSize); // 16

Здесь theme получает значение по умолчанию 'light', так как исходное значение — null, а fontSize остаётся 16, так как оно уже определено.

Пример 2: Обновление переменных с ??=

Оператор ??= полезен для обновления переменных только в случае, если они ещё не инициализированы. Это удобно для настройки параметров по умолчанию в функциях или объектах.

let config = {};
config.timeout ??= 5000;
config.retries ??= 3;

console.log(config); // { timeout: 5000, retries: 3 }

В этом примере объект config получает значения по умолчанию только для тех свойств, которые ещё не определены.

Пример 3: Сравнение с ||

Чтобы понять разницу между ?? и ||, рассмотрим следующий пример:

let score = 0;
console.log(score || 100); // 100, так как 0 считается falsy
console.log(score ?? 100); // 0, так как 0 не является null или undefined

Оператор || возвращает значение справа для всех falsy-значений, тогда как ?? делает это только для null и undefined. Это делает ?? более предсказуемым в ситуациях, где falsy-значения, такие как 0 или пустая строка, являются допустимыми.

Пример 4: Интеграция в интерфейс

Операторы ?? и ??= можно использовать для отображения данных в интерфейсе, избегая лишних проверок. Например, показываем имя пользователя или «Гость» в заголовке:

<style>
.header {
  font-family: Arial, sans-serif;
  padding: 10px;
}
</style>

<script>
function displayUserName(user) {
  const name = user?.name ?? 'Гость';
  document.write('<h2 class="header">Привет, ' + name + '!</h2>');
}

const user = { name: null };
displayUserName(user); // Привет, Гость!

Здесь ?? гарантирует, что если user.name равно null или undefined, будет отображён «Гость».

Совместимость и ограничения

На октябрь 2025 года операторы ?? и ??= поддерживаются во всех современных браузерах (Chrome, Firefox, Edge, Safari) и в Node.js (с версии 14). Проверить актуальную поддержку можно на Can I Use. Единственное ограничение — эти операторы не заменяют полные проверки на falsy-значения, если они необходимы в логике приложения.

Операторы ?? и ??= — это удобные инструменты для работы с null и undefined в JavaScript. Они делают код короче, понятнее и безопаснее, особенно при задании значений по умолчанию или обновлении переменных. Используйте их вместо ||, когда нужно учитывать только «нулевые» значения, и экспериментируйте с примерами выше, чтобы интегрировать их в свои проекты!

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.