Logical OR assignment (||=)

Logical OR assignment short-circuits, meaning that x ||= y is equivalent to:

x || (x = y);

No assignment is performed if the left-hand side is not falsy, due to short-circuiting of the logical OR operator. For example, the following does not throw an error, despite x being const:

const x = 1;
x ||= 2;

Neither would the following trigger the setter:

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

x.value ||= 2;

In fact, if x is truthy, y is not evaluated at all.

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

If the "lyrics" element is empty, display a default value:

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

Here the short-circuit is especially beneficial, since the element will not be updated unnecessarily and won't cause unwanted side-effects such as additional parsing or rendering work, or loss of focus, etc.

Note: Pay attention to the value returned by the API you're checking against. If an empty string is returned (a falsy value), ||= must be used, so that "No lyrics." is displayed instead of a blank space. However, if the API returns null or undefined in case of blank content, ??= should be used instead.

• Logical OR (||)
• The nullish coalescing operator (??)
• Bitwise OR assignment (|=)
• Truthy
• Falsy