Оператор нулевого слияния (??)

Оператор нулевого слияния (??) — это логический оператор, который возвращает свой правый операнд, когда его левый операнд является null или undefined, и в противном случае возвращает свой левый операнд.

Попробуйте

const foo = null ?? "default string";
console.log(foo);
// Expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// Expected output: 0

Синтаксис

leftExpr ?? rightExpr

Описание

Оператор нулевого слияния можно рассматривать как частный случай оператора логического ИЛИ (||). Последний возвращает правый операнд, если левый операнд является *любым* ложным значением, а не только null или undefined. Другими словами, если вы используете || для предоставления значения по умолчанию другой переменной foo, вы можете столкнуться с неожиданным поведением, если считаете некоторые ложные значения допустимыми (например, '' или 0). См. ниже для получения дополнительных примеров.

Оператор нулевого слияния имеет пятый по величине приоритет операторов, непосредственно ниже || и непосредственно выше условного (тернарного) оператора.

Невозможно напрямую объединить операторы И (&&) или ИЛИ (||) с ??. В таких случаях будет сгенерирована ошибка синтаксиса.

null || undefined ?? "foo"; // raises a SyntaxError
true && undefined ?? "foo"; // raises a SyntaxError

Вместо этого используйте круглые скобки для явного указания приоритета:

(null || undefined) ?? "foo"; // returns "foo"

Примеры

Использование оператора нулевого слияния

В этом примере мы предоставим значения по умолчанию, но сохраним значения, отличные от null или undefined.

const nullValue = null;
const emptyText = ""; // falsy
const someNumber = 42;

const valA = nullValue ?? "default for A";
const valB = emptyText ?? "default for B";
const valC = someNumber ?? 0;

console.log(valA); // "default for A"
console.log(valB); // "" (as the empty string is not null or undefined)
console.log(valC); // 42

Назначение значения по умолчанию переменной

Ранее, когда нужно было назначить значение по умолчанию переменной, распространенным шаблоном было использование оператора логического ИЛИ (||):

let foo;

// foo is never assigned any value so it is still undefined
const someDummyText = foo || "Hello!";

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

const count = 0;
const text = "";

const qty = count || 42;
const message = text || "hi!";
console.log(qty); // 42 and not 0
console.log(message); // "hi!" and not ""

Оператор нулевого слияния позволяет избежать этой ловушки, возвращая второй операнд только тогда, когда первый оценивается как null или undefined (но не другие ложные значения):

const myText = ""; // An empty string (which is also a falsy value)

const notFalsyText = myText || "Hello world";
console.log(notFalsyText); // Hello world

const preservingFalsy = myText ?? "Hi neighborhood";
console.log(preservingFalsy); // '' (as myText is neither undefined nor null)

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

Как и логические операторы 'ИЛИ' и 'И', выражение правой части не вычисляется, если левая часть оказывается ни null, ни undefined.

function a() {
  console.log("a was called");
  return undefined;
}
function b() {
  console.log("b was called");
  return false;
}
function c() {
  console.log("c was called");
  return "foo";
}

console.log(a() ?? c());
// Logs "a was called" then "c was called" and then "foo"
// as a() returned undefined so both expressions are evaluated

console.log(b() ?? c());
// Logs "b was called" then "false"
// as b() returned false (and not null or undefined), the right
// hand side expression was not evaluated

Связь с оператором опциональной цепочки (?.)

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

const foo = { someFooProp: "hi" };

console.log(foo.someFooProp?.toUpperCase() ?? "not available"); // "HI"
console.log(foo.someBarProp?.toUpperCase() ?? "not available"); // "not available"

Спецификации

Совместимость с браузерами

См. также

• Оператор присваивания нулевого слияния (??=)
• Опциональная цепочка (?.)
• Логическое ИЛИ (||)
• Параметры по умолчанию