Logical OR assignment (||=)
The logical OR assignment (
x ||= y) operator only assigns if
x is falsy.
expr1 ||= expr2
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
undefined return values).
|ECMAScript Language Specification (ECMAScript)|
BCD tables only load in the browser