---
title: "Nullish Coalescing Assignment (??=) in JavaScript"
description: "x ??= y assigns y only when x is null or undefined, so 0, false and empty strings stay. How it differs from || and where it saves code."
canonical: "https://www.trevorlasn.com/blog/javascript-nullish-coalescing-assignment-operator"
author: "Trevor I. Lasn"
published: "2024-11-05"
last-updated: "2024-11-05"
topics: ["JavaScript"]
---
# Nullish Coalescing Assignment (??=) in JavaScript
x ??= y assigns y only when x is null or undefined, so 0, false and empty strings stay. How it differs from || and where it saves code.
By Trevor I. Lasn · Published 2024-11-05 · https://www.trevorlasn.com/blog/javascript-nullish-coalescing-assignment-operator
The nullish coalescing assignment operator `??=` is relatively new to JavaScript. It was officially added in [ECMAScript 2021 (ES12)](https://262.ecma-international.org/12.0/index.html) as part of the "Logical Assignment Operators" proposal.
Think of `??=` as a smart guardian for your variables. It only assigns a new value if the current one is `null` or `undefined`
```js frame="code" title="JavaScript"
// Old way (pre-2021)
if (user.name === null || user.name === undefined) {
user.name = 'Anonymous';
}
// Or using the nullish coalescing operator (??)
user.name = user.name ?? 'Anonymous';
// New way (ES2021 and later)
user.name ??= 'Anonymous';
```
When you write something like `user.name ??= 'Anonymous'`, the operator first checks if `user.name` is `null` or `undefined`.
If it is `null` or `undefined`, only then does it assign `'Anonymous'` -- If `user.name` already has any other value - even an empty string or 0 - it stays untouched.
### Why ??= Beats The Alternatives
Before `??=`, we had several ways to handle default values, but each had its drawbacks. Compare these approaches:
```js frame="code" title="JavaScript"
// Using if statement - verbose and repetitive
if (user.name === null || user.name === undefined) {
user.name = 'Anonymous';
}
// Using || operator - catches too much
user.name = user.name || 'Anonymous'; // Replaces '', 0, false too
// Using ternary - gets messy with longer expressions
user.name = user.name === null || user.name === undefined
? 'Anonymous'
: user.name;
// Using ??= - clean and precise
user.name ??= 'Anonymous';
```
The `??`= operator gives us precision we didn't have before. It only triggers when we truly have no value, making it perfect for cases where zero, empty strings, or false are valid data:
```js frame="code" title="JavaScript"
let score = 0;
score ??= 100; // Keeps 0
let tag = '';
tag ??= 'default'; // Keeps empty string
let active = false;
active ??= true; // Keeps false
```
This precision helps prevent bugs that can occur when using broader checks. When building user interfaces or handling form data, you often want to preserve falsy values rather than replacing them with defaults.