The nullish coalescing assignment operator ??=
is relatively new to JavaScript. It was officially added in ECMAScript 2021 (ES12) 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
// 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:
// Using if statement - verbose and repetitiveif (user.name === null || user.name === undefined) { user.name = 'Anonymous';}
// Using || operator - catches too muchuser.name = user.name || 'Anonymous'; // Replaces '', 0, false too
// Using ternary - gets messy with longer expressionsuser.name = user.name === null || user.name === undefined ? 'Anonymous' : user.name;
// Using ??= - clean and preciseuser.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:
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.