The logical OR assignment (x ||= y
) operator only assigns if x
is falsy.
Logical OR assignment (||=)
Try it
Syntax
expr1 ||= expr2
Description
Short-circuit evaluation
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.
Examples
Setting default content
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).
Specifications
Browser compatibility
Desktop | Mobile | Server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | Deno | Node.js | |
Logical_OR_assignment |
85
|
85
|
79
|
No
|
71
|
14
|
85
|
85
|
79
|
60
|
14
|
14.0
|
1.2
|
15.0.0
|
See also
© 2005–2022 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment