Logical OR assignment (||=)

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

The logical OR assignment (||=) operator only evaluates the right operand and assigns to the left if the left operand is falsy.

Try it

const a = { duration: 50, title: "" };

a.duration ||= 10;
console.log(a.duration);
// Expected output: 50

a.title ||= "title is empty.";
console.log(a.title);
// Expected output: "title is empty."

Syntax

js
x ||= y

Description

Logical OR assignment short-circuits, meaning that x ||= y is equivalent to x || (x = y), except that the expression x is only evaluated once.

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:

js
const x = 1;
x ||= 2;

Neither would the following trigger the setter:

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

x.value ||= 2;

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

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

Examples

Setting default content

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

js
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.

Specifications

Specification
ECMAScript® 2025 Language Specification
# sec-assignment-operators

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
Logical OR assignment (x ||= y)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also