Logical Assignment Operators in JavaScript

Logical assignment operators in JavaScript combine logical operations (&&, ||, ??) with variable assignment into a single, concise syntax. Introduced in ECMAScript 2021 (ES12), operators such as &&=, ||=, and ??= help developers write cleaner, more readable code by eliminating boilerplate when conditionally assigning values. Crucially, these operators utilize short-circuit evaluation, meaning the assignment only executes if the logical condition requires it.

The Problem They Solve

Prior to ES2021, conditional assignments often resulted in repetitive code patterns like x = x || defaultValue or explicit if statements. While functional, the traditional approach has a subtle drawback: it always performs an assignment, even if the value does not change. This can trigger unnecessary property setters, reactive updates, or re-renders. Logical assignment operators solve this by only assigning a value when the condition is met.

1. Logical AND Assignment (&&=)

The &&= operator assigns the right-hand value to the left-hand variable only if the left-hand variable is truthy.

• Syntax: a &&= b
• Equivalent to: if (a) { a = b; }

let user = { isLoggedIn: true, role: "guest" };

// Assigns "admin" because user.isLoggedIn is truthy
user.isLoggedIn &&= (user.role = "admin");

let guest = { isLoggedIn: false, role: "guest" };

// Does nothing because guest.isLoggedIn is falsy
guest.isLoggedIn &&= (guest.role = "admin");

Common Use Case: Updating a property or running an assignment only when an existing value is already valid or present.

2. Logical OR Assignment (||=)

The ||= operator assigns the right-hand value to the left-hand variable only if the left-hand variable is falsy (false, 0, "", null, undefined, or NaN).

• Syntax: a ||= b
• Equivalent to: if (!a) { a = b; }

let title = "";
title ||= "Untitled Document"; // title becomes "Untitled Document"

let count = 10;
count ||= 5; // count remains 10

Common Use Case: Providing a fallback or default value when a variable is empty, unset, or otherwise falsy.

3. Nullish Coalescing Assignment (??=)

The ??= operator assigns the right-hand value to the left-hand variable only if the left-hand variable is nullish (null or undefined). Unlike ||=, it treats other falsy values such as 0, false, or empty strings "" as valid defined values.

• Syntax: a ??= b
• Equivalent to: if (a === null || a === undefined) { a = b; }

let config = {
  timeout: 0,
  retries: null
};

// timeout remains 0 because 0 is not nullish
config.timeout ??= 3000;

// retries becomes 3 because null is nullish
config.retries ??= 3;

Common Use Case: Setting default configuration settings or values where 0 or false are intentional and valid inputs.

Summary of Differences

Logical assignment operators minimize boilerplate, protect against unnecessary side effects via short-circuiting, and allow for clear, intent-driven state management in modern JavaScript applications.