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