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

Интерактивный пример

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."

Синтаксис

expr1 ||= expr2;

Описание

Сокращённое вычисление

Оператор логического ИЛИ работает следующим образом:

x || y;
// возвращает x, если x истинноподобен
// возвращает y, если x не истинноподобен

Оператор логического ИЛИ OR производит вычисление по сокращённой схеме: второй операнд будет вычисляться только в случае, если при вычислении первого операнда не удалось получить значение.

Оператор присваивания логического ИЛИ также поддерживает сокращённое вычисление, т.е. выполнит операцию присваивания только при вычислении правого выражения. Проще говоря, x ||= y эквивалентно следующему коду:

x || (x = y);

В отличие от следующего примера, где операция присваивания произойдёт в любом случае:

x = x || y;

Обратите внимание, что математические и побитовые операторы присваивания работают по-разному.

Примеры

Определение значения по умолчанию

Если в элементе с идентификатором "lyrics" нет содержимого, то следующее выражение вставит в него надпись:

document.getElementById("lyrics").textContent ||= "Нет слов.";

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

Примечание: обратите внимание на значение в левом операнде. Если это пустая строка (ложноподобное значение), то должно использовать оператор ||=, в противном случае — оператор ??= (если ожидается получение значения null или undefined).

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

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

Смотрите также

• Логическое ИЛИ(||)
• Оператор нулевого слияния (??)
• Оператор присваивания побитового ИЛИ (|=)
• Истиноподобное значение
• Ложноподобное значение