??= assignment operation only takes effect when null or undefined on the left, 1. Used to set the default configuration value, such as user.age ??= 18; 2. Implement lazy initialization of variables, such as cache ??= initializeHeavyResource(); 3. Retain valid values when merging optional object properties, such as userData.email ??= getDefaultEmail(); this operator will not overwrite falsy values such as 0, '' or false, which is safer than ||=, and is suitable for modern environments, ultimately making the code more concise, safe and predictable.

The null coalescing assignment operator ( ??= ) is a concise and powerful feature introduced in modern JavaScript (ES2021) that helps streamline conditional assignments based on null or undefined checks. It's particularly useful when you want to assign a default value to a variable only if it's currently null or undefined .

What ??= Actually Does

The ??= operator works like this:

 a ??= b;

This means:
"If a is null or undefined , assign b to a . Otherwise, leave a unchanged."

It's equivalent to writing:

 if (a == null) {
  a = b;
}

But much more compact and readable.

? Important: ??= only triggers assignment if the left-hand side is null or undefined — not other false values like 0 , '' , or false .

When to Use ??=

1. Setting Default Configuration Values

When working with user-provided options, you often want to fill in defaults only when certain properties are missing.

 function createUser(settings) {
  const user = {};
  user.name = settings.name ?? 'Anonymous';
  user.age ??= settings.age ?? 18;
  user.isActive ??= settings.isActive ?? true;
  return user;
}

Or more cleanly:

 function createUser(settings) {
  const user = { name: 'Anonymous', age: 18, isActive: true };
  user.name ??= settings.name;
  user.age ??= settings.age;
  user.isActive ??= settings.isActive;
  return user;
}

This avoids overwriting with undefined while preserving intentional falsy values.

2. Lazy Initialization of Variables

You can use ??= to initialize expensive or conditional values only when needed.

 let cache;
cache ??= initializeHeavyResource(); // runs only once

Even if cache is reassigned to null later, this pattern allows reinitialization — unlike ||= which would fail on falsy results.

?? Compare with ||= :
||= triggers on any false value ( 0 , '' , false , etc.), which can lead to bugs.
??= is safe because it only cares about null and undefined .

3. Working with Optional Object Properties

When merging partial data, ??= helps preserve existing state.

 const userData = { id: 123, name: 'Alice' };
userData.email ??= getDefaultEmail(userData.name);
userData.role ??= fetchDefaultRole(); // async or computed

This avoids accidentally clearing valid but empty strings or false values.

Practical Example: Config Manager

 class Config {
  constructor() {
    this.apiKey = null;
    this.timeout = 0;
    this.retries = false;
  }

  applyDefaults() {
    this.apiKey ??= process.env.API_KEY;
    this.timeout ??= 5000;
    this.retries ??= 3;
  }
}

Here:

• timeout is 0 → kept as 0 (not replaced)
• retries is false → keep as false
• Only truly missing values ( null ) get defaults

This behavior makes ??= ideal for configuration systems.

Limitations and Gotchas

• Not available in older environments — requires ES2021 (Node.js 16 , modern browsers). Use Babel or checks in legacy code.
• Cannot be used directly on object destructuring like default params, but similar logic applications:

 // Destructuring with defaults still uses `=`, not `??=`
const { name = 'Default' } = obj;

// But you can do:
let { apiKey } = obj;
apiKey ??= 'fallback-key';

• Short-circuiting matters : The right-hand side is evaluated only if the left is null / undefined .

 let x = 1;
x ??= console.log('This won't run'); // no output

Summary

Use ??= when:

• You want to assign defaults only for null / undefined
• You need to preserve false values like 0 , '' , or false
• You're doing lazy initialization or merging partial data

Avoid ||= in these cases — it's too broad.

Basically:
??= = "only assign if really missing"
||= = "assign if false" — often too aggressive

With ??= , your code becomes cleaner, safer, and more predictable when handling optional values.

The above is the detailed content of Harnessing the Null Coalescing Assignment Operator (`??=`). For more information, please follow other related articles on the PHP Chinese website!