Присваивание с логическим ИЛИ (||=)

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

Попробуйте

const a = { duration: 50, title: "" };

a.duration ||= 10;
console.log(a.duration);
// Expected output: 50

a.title ||= "title is empty.";
console.log(a.title);
// Expected output: "title is empty."

Синтаксис

x ||= y

Описание

Присваивание с логическим ИЛИ кратко замыкает, что означает, что x ||= y эквивалентно x || (x = y), за исключением того, что выражение x вычисляется только один раз.

Присваивание не выполняется, если левая часть не является ложной, из-за краткого замыкания оператора логического ИЛИ. Например, следующее не вызывает ошибку, хотя x является const:

const x = 1;
x ||= 2;

Также следующее не активирует сеттер:

const x = {
  get value() {
    return 1;
  },
  set value(v) {
    console.log("Setter called");
  },
};

x.value ||= 2;

Фактически, если x не является ложным, y вообще не вычисляется.

const x = 1;
x ||= console.log("y evaluated");
// Logs nothing

Примеры

Установка содержимого по умолчанию

Если элемент "lyrics" пуст, отобразите значение по умолчанию:

document.getElementById("lyrics").textContent ||= "No lyrics.";

Здесь краткое замыкание особенно выгодно, поскольку элемент не будет обновляться без необходимости и не вызовет нежелательных побочных эффектов, таких как дополнительная работа по разбору или отрисовке, потеря фокуса и т. д.

Примечание: Обратите внимание на значение, возвращаемое API, которое вы проверяете. Если возвращается пустая строка ( ложное значение), необходимо использовать ||=, чтобы вместо пустого места отображалось "No lyrics.". Однако, если API возвращает null или undefined в случае пустого содержимого, вместо этого следует использовать ??=.

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

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

См. также

• Логическое ИЛИ (||)
• Оператор объединения с null (??)
• Присваивание с побитовым ИЛИ (|=)
• Истинные значения
• Ложные значения