Logical OR assignment (||=)

The logical OR assignment (x ||= y) operator only assigns if x is falsy.

The logical OR operator works like this:

x || y;
// returns x when x is truthy
// returns y when x is not truthy

The logical OR operator short-circuits: the second operand is only evaluated if the first operand doesn't already determine the result.

Logical OR assignment short-circuits as well, meaning it only performs an assignment if the logical operation would evaluate the right-hand side. In other words, x ||= y is equivalent to:

x || (x = y);

And not equivalent to the following which would always perform an assignment:

x = x || y;

Note that this behavior is different to mathematical and bitwise assignment operators.

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, otherwise you want to use the ??= operator (for null or undefined return values).

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