ReviseAlgo Logo

ES6+ Modern JavaScript

Logical Assignment Operators (&&=, ||=, ??=)

Master logical assignment operators in JavaScript. Learn how to combine logical checks with assignment operations using ||=, &&=, and ??=.

Last Updated: July 15, 2026 • 10 min read

1. Introduction

ES2021 introduced Logical Assignment Operators which combine logical operators (||, &&, or ??) with an assignment operator (=). The three operators are: ||= (Logical OR Assignment), &&= (Logical AND Assignment), and ??= (Nullish Coalescing Assignment).

2. Why It Matters

Initializing properties or updating settings dynamically often requires writing repetitive code like x = x ?? y. Logical assignment operators simplify these expressions, reducing boilerplate code and making it easier to read.

3. Real-World Analogy

Think of a Smart Office Desk Assistant:

  • Traditional Check (x = x ?? y): The assistant walks to the desk, inspects the document holder. If the holder is empty, they walk back to their desk, fetch a new form, and place it in the holder. The assistant performs separate inspection and fetch steps.
  • Logical Assignment (??=): The assistant stands next to the desk with a pen in hand. They look at the holder. If it is empty, they instantly stamp and write on the desk in a single motion. If the holder is not empty, they do nothing, skipping the assignment step entirely.

4. The Three Operators

Let's explore the syntax and behavior of the three logical assignment operators:

1. Logical OR Assignment (||=):

Assigns the right-hand value to the variable only if the variable's current value is falsy (e.g. false, 0, "", null, or undefined).

2. Nullish Coalescing Assignment (??=):

Assigns the right-hand value to the variable only if the variable's current value is nullish (null or undefined). Falsy values like 0 or false are preserved.

3. Logical AND Assignment (&&=):

Assigns the right-hand value to the variable only if the variable's current value is truthy.

5. Practical Example

This script demonstrates using the logical assignment operators to set defaults inside a user settings initialization function:

6. Common Mistakes

  • Assuming ||= behave identically to ??=: The ||= operator checks for any falsy value, whereas the ??= operator checks only for nullish values (null or undefined). Be careful to choose the correct operator to avoid overwriting valid falsy values like 0 or false.

7. Quick Quiz

Q1: Which logical assignment operator assigns the right-hand value only if the variable is null or undefined?

A) ||=

B) ??=

Answer: B — The ??= operator assigns the right-hand value only if the left-hand variable is null or undefined.

8. Scenario-Based Challenge

The Sticky State Cache Validator:

An application caches a token locally: let token = null. Every time a module runs, verify: if the token is nullish, load it using a heavy generator fetch request. Write this lazy loader using the nullish coalescing assignment operator.

9. Debugging Exercise

Explain why this parameter assignment crashes, and how to fix it:

const config = {
  db: null
};

// Objective: initialize db object property safely
// Bug: using optional chaining with assignments is not allowed!
config.db?.host ??= 'localhost'; // SyntaxError! Why?
View Solution

Diagnosis: You cannot combine optional chaining (?.) with logical assignment operators on the left-hand side of assignments, because optional chaining cannot be used as a write target, throwing a SyntaxError.

Fix: Ensure the parent object property is initialized before setting nested properties:

config.db ??= {}; // Initialize parent object if nullish
config.db.host ??= 'localhost'; // Safe to assign nested property

10. Interview Questions

🟢 Q1: Explain how the nullish coalescing assignment operator (??=) works and why it is useful.

Answer: The nullish coalescing assignment operator (??=) assigns the right-hand value to the variable only if the variable's current value is nullish (null or undefined).
It is useful because:
• Short-circuits: If the variable already has a valid value (including falsy values like 0, false, or empty strings), the assignment is skipped.
• Reduces Boilerplate: It simplifies expressions like x = x ?? y into a single operator x ??= y, making code cleaner and easier to read.

11. Production Considerations

  • • Browser Compatibility: Logical assignment operators are supported in all modern browsers and Node.js versions. If you need to support older environments (like IE11), ensure your build tool (e.g. Babel) is configured to transpile these operators into standard assignment expressions.