Web/JavaScript/Reference/Operators/Logical OR assignment
The logical OR assignment (x ||= y
) operator only assigns if x
is falsy.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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, set the innerHTML
to a default value:
document.getElementById('lyrics').innerHTML ||= '<i>No lyrics.</i>'
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
Specification |
---|
Logical Assignment OperatorsThe definition of 'Assignment operators' in that specification. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | Server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Logical OR assignment (x |
= y) | Chrome
Full support 85 |
Edge
Full support 85 |
Firefox
Full support 79 |
IE
No support No |
Opera
No support No |
Safari
Full support 14 |
WebView Android
Full support 85 |
Chrome Android
Full support 85 |
Firefox Android
Full support 79 |
Opera Android
No support No |
Safari iOS
Full support 14 |
Samsung Internet Android
No support No |
nodejs
No support No |
Legend
- Full support
- Full support
- No support
- No support
See also
- Logical OR (||)
- The nullish coalescing operator (
??
) - Bitwise OR assignment (
|=
) Boolean
- Truthy
- Falsy
Logical OR assignment (||=) by Mozilla Contributors is licensed under CC-BY-SA 2.5.