Оператор ?? в JavaScript: значения по умолчанию

Умное значение по умолчанию

В JavaScript издавна есть короткий способ задать дефолтное значение: value || fallback. В целом работает, но с подвохом — любое falsy-значение воспринимается как «пустое». 0, '' и false тоже запускают подстановку запасного варианта, даже если именно они и есть настоящий ответ.

Оператор nullish coalescing ?? решает эту проблему. Он подставляет запасное значение только тогда, когда слева null или undefined:

const a = 0 ?? 10;
const b = '' ?? 'empty';
const c = null ?? 'default';
const d = undefined ?? 'default';

console.log(a, b, c, d);

0 и '' остаются. А вот null и undefined — нет. Вот и весь оператор.

Почему || не спасает

Вот тот самый классический баг, ради которого и придумали ??:

function createUser(options) {
  const volume = options.volume || 100;
  const nickname = options.nickname || 'Anonymous';
  return { volume, nickname };
}

console.log(createUser({ volume: 0, nickname: '' }));

Пользователь явно указал громкость 0 (тишина) и пустой ник. Оба значения тихо затёрлись, потому что || не умеет отличать «ничего не задано» от просто falsy-значения.

Меняем на ??:

function createUser(options) {
  const volume = options.volume ?? 100;
  const nickname = options.nickname ?? 'Anonymous';
  return { volume, nickname };
}

console.log(createUser({ volume: 0, nickname: '' }));
console.log(createUser({}));

Теперь значения 0 и '' проходят без изменений, а дефолт подставляется только для реально отсутствующих полей. В 99% случаев именно это вам и нужно.

Как это работает в голове

У оператора ?? ровно один вопрос: слева null или undefined? Всё остальное его не волнует.

Значение слева	left || right вернёт	left ?? right вернёт
null	right	right
undefined	right	right
0	right	left (0)
''	right	left ('')
false	right	left (false)
NaN	right	left (NaN)
любой объект	left	left

Берите ??, когда в ваших данных falsy-значения имеют смысл. Берите ||, когда вам правда нужно отсечь всё falsy — пустые строки, нули и так далее. Такие случаи бывают, но гораздо реже, чем принято думать.

Короткое замыкание

Как и || с &&, оператор ?? работает через короткое замыкание. Если слева не nullish — правая часть вообще не выполняется:

function expensiveDefault() {
  console.log('computing default...');
  return 'fallback';
}

const a = 'real value' ?? expensiveDefault();
const b = null ?? expensiveDefault();

console.log(a);
console.log(b);

expensiveDefault() вызовется только один раз — для b. Это удобно, когда в качестве запасного значения у вас идёт вызов функции, сетевой запрос или любая другая операция, которую лишний раз запускать не хочется.

Связка с опциональной цепочкой

Операторы ?? и ?. появились вместе в ES2020 и изначально задумывались как команда. Опциональная цепочка (?.) проходит по пути, в котором какое-то звено может отсутствовать, и возвращает undefined, если что-то не нашлось. А ?? затем подставляет разумное значение по умолчанию:

const response = {
  user: {
    profile: null,
  },
};

const theme = response?.user?.profile?.theme ?? 'light';
const tags = response?.user?.posts?.[0]?.tags ?? [];

console.log(theme);
console.log(tags);

Без этой парочки тот же код превращается в уродливую цепочку проверок через && или в try/catch. А с ними безопасный доступ к свойствам и разумные значения по умолчанию укладываются в одну строку.

Оператор ??=: присваивание при null или undefined

a ??= b присваивает b переменной a только тогда, когда a равно null или undefined. Это и есть оператор логического nullish-присваивания, и он работает с коротким замыканием — если у a уже есть значение, правая часть попросту не вычисляется.

function withDefaults(options) {
  options.retries ??= 3;
  options.timeout ??= 5000;
  options.verbose ??= false;
  return options;
}

console.log(withDefaults({ timeout: 10000 }));
console.log(withDefaults({ verbose: false, retries: 0 }));

Обрати внимание: verbose: false и retries: 0 остались нетронутыми — ??= подставляет значение только туда, где его реально нет. Для сравнения: ||= затёр бы оба этих поля.

Приоритет операторов и правило скобок

Оператор ?? намеренно отказывается сочетаться с || или && без скобок. Такой код выбросит SyntaxError:

const x = a || b ?? c;   // SyntaxError

Разработчики языка посчитали, что приоритет операторов здесь слишком неоднозначный, и решили заставить нас явно указывать намерения. Достаточно добавить скобки — и всё заработает:

const a = null;
const b = 0;
const c = 'fallback';

const x = (a || b) ?? c;
const y = a || (b ?? c);

console.log(x);
console.log(y);

Разные группировки — разные ответы. Скобки здесь не для красоты: они говорят и парсеру, и тому, кто будет читать код после вас, что вы на самом деле имели в виду.

Это не то же самое, что значение по умолчанию в параметре функции

У параметров по умолчанию в сигнатуре функции своё правило: они срабатывают только тогда, когда аргумент равен undefined, но не null. И это тонкое отличие от ??, который одинаково реагирует на оба случая.

function greet(name = 'friend') {
  return `Hello, ${name}`;
}

console.log(greet());          // использует значение по умолчанию
console.log(greet(undefined)); // использует значение по умолчанию
console.log(greet(null));      // НЕ использует значение по умолчанию

Если нужно, чтобы null тоже запускал значение по умолчанию, используйте ?? прямо в теле функции:

function greet(name) {
  const who = name ?? 'friend';
  return `Hello, ${who}`;
}

console.log(greet(null));
console.log(greet(undefined));
console.log(greet('Rosa'));

Небольшая, но легко обжигающая разница — особенно когда API возвращает null в значении «ничего не задано».

Когда использовать ??

По умолчанию берите именно ??, если нет веской причины поступить иначе. Этот оператор лучше всего ложится на то, как данные ведут себя в реальности: 0, '' и false — это, как правило, осмысленные значения, которые стоит сохранить, а подменять на дефолт нужно только по-настоящему отсутствующие данные. || оставьте для случаев, когда вам действительно нужно заменить любое falsy-значение.

Дальше: классы

На этом с объектами и массивами закончили — у вас уже есть всё, чтобы безопасно собирать структуры данных и ходить по ним. Следующая глава — про организацию поведения: классы, наследование и прототипная система, которая лежит в их основе.