JavaScript's ??= Operator: Default Values Made Simple

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

1
// Old way (pre-2021)
2
if (user.name === null || user.name === undefined) {
3
  user.name = 'Anonymous';
4
}
5

6
// Or using the nullish coalescing operator (??)
7
user.name = user.name ?? 'Anonymous';
8

9
// New way (ES2021 and later)
10
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:

1
// Using if statement - verbose and repetitive
2
if (user.name === null || user.name === undefined) {
3
  user.name = 'Anonymous';
4
}
5

6
// Using || operator - catches too much
7
user.name = user.name || 'Anonymous';  // Replaces '', 0, false too
8

9
// Using ternary - gets messy with longer expressions
10
user.name = user.name === null || user.name === undefined
11
  ? 'Anonymous'
12
  : user.name;
13

14
// Using ??= - clean and precise
15
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:

1
let score = 0;
2
score ??= 100;    // Keeps 0
3

4
let tag = '';
5
tag ??= 'default'; // Keeps empty string
6

7
let active = false;
8
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.