How Logical Nullish Assignment Works in JavaScript

The logical nullish assignment operator (??=) in JavaScript provides a concise way to assign a value to a variable only when that variable is null or undefined. This article breaks down how this operator evaluates expressions, explores its short-circuiting behavior, and demonstrates how it preserves other falsy values like 0 or false during assignment.

Syntax and Basic Mechanism

The logical nullish assignment operator combines the nullish coalescing operator (??) with the assignment operator (=):

a ??= b;

This expression is functionally equivalent to:

a ?? (a = b);

The operator first evaluates the left-hand operand (a). If a is strictly null or undefined, the right-hand operand (b) is evaluated, and its result is assigned to a. If a contains any other value, no assignment occurs.

Evaluation Steps and Short-Circuiting

The evaluation of x ??= y follows these sequential steps:

1. Evaluate the Left-Hand Side: JavaScript reads the reference and current value of the variable or property on the left.
2. Check for Nullish Values: It checks whether the value is strictly null or undefined.
3. Short-Circuit if Defined: If the value is defined (neither null nor undefined), the operation immediately short-circuits. The right-hand expression is entirely skipped, meaning any function calls or side effects on the right-hand side do not execute.
4. Evaluate and Assign if Nullish: If the value is null or undefined, the right-hand expression is evaluated, and the resulting value is assigned to the left-hand target.

Example of Short-Circuiting:

function getDefault() {
  console.log("Function executed!");
  return 100;
}

let count = 42;
count ??= getDefault(); 
// Output: count remains 42; "Function executed!" is NOT logged.

let total = null;
total ??= getDefault(); 
// Output: "Function executed!" is logged; total is now 100.

Difference Between ??= and ||=

While the logical OR assignment operator (||=) reassigns a value whenever the left operand is falsy, the ??= operator only reassigns when the left operand is nullish.

Because ??= ignores values like 0, "", and false, it prevents bugs where valid user inputs or default falsy values are unintentionally overwritten.

Practical Use Cases

The most common use cases for logical nullish assignment include setting default properties on configuration objects and managing state initialization:

function initializeUser(options = {}) {
  // Sets defaults without overwriting 0 or false values
  options.timeout ??= 3000;
  options.retries ??= 0;
  options.enableLogging ??= true;

  return options;
}

const config = initializeUser({ timeout: 1000, retries: 0, enableLogging: false });
console.log(config);
// Output: { timeout: 1000, retries: 0, enableLogging: false }

By leveraging ??=, code remains concise while ensuring that assignment occurs strictly when a value is genuinely absent.