Nullish coalescing 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 nullish coalescing assignment (??=
) operator, also known as the logical nullish assignment operator, only evaluates the right operand and assigns to the left if the left operand is nullish (null
or undefined
).
Try it
Syntax
x ??= y
Description
Nullish coalescing 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 nullish, due to short-circuiting of the nullish coalescing operator. For example, the following does not throw an error, despite x
being const
:
const x = 1;
x ??= 2;
Neither would the following trigger the setter:
const x = {
get value() {
return 1;
},
set value(v) {
console.log("Setter called");
},
};
x.value ??= 2;
In fact, if x
is not nullish, y
is not evaluated at all.
const x = 1;
x ??= console.log("y evaluated");
// Logs nothing
Examples
Using nullish coalescing assignment
You can use the nullish coalescing assignment operator to apply default values to object properties. Compared to using destructuring and default values, ??=
also applies the default value if the property has value null
.
function config(options) {
options.duration ??= 100;
options.speed ??= 25;
return options;
}
config({ duration: 125 }); // { duration: 125, speed: 25 }
config({}); // { duration: 100, speed: 25 }
Specifications
Specification |
---|
ECMAScript Language Specification # sec-assignment-operators |
Browser compatibility
BCD tables only load in the browser