Logical Assignment Operators in JS: Complete Guide

JavaScript logical assignment operators combine a logical check with an assignment in one short expression. Instead of writing an if statement or a longer logical expression, you can use ||=, &&=, or ??= to conditionally update a variable.

They were introduced in ES2021 and are supported in all modern browsers and Node.js 15+.

The Three Logical Assignment Operators

Each one reads naturally: "OR-equals" means "assign if the left is falsy," "AND-equals" means "assign if the left is truthy," and "question-question-equals" means "assign if the left is nullish."

OR Assignment (||=)

OR assignment assigns a fallback value only when the left side is falsy. It is the most common of the three:

javascript

let username = "";
 
username ||= "Guest";
console.log(username); // "Guest" (empty string is falsy, so fallback assigned)

The short form does not introduce new behavior, it just saves you from repeating the variable name. The long-form equivalent below makes the underlying logic explicit so you can see exactly what the shorthand replaces:

javascript

let username = "";
 
// These two lines do the same thing:
username ||= "Guest";
username || (username = "Guest");

A practical use is setting default configuration values, where some settings might arrive as empty strings instead of being left out entirely:

javascript

const config = {
  theme: "",
  fontSize: 16
};
 
config.theme ||= "dark";
config.fontSize ||= 14;
 
console.log(config.theme);    // "dark"  (empty string replaced)
console.log(config.fontSize); // 16      (16 is truthy, kept)

The ||= operator looks at all falsy values: false, 0, an empty string, null, undefined, and NaN.

AND Assignment (&&=)

AND assignment assigns a value only when the left side is already truthy. It is useful for conditional updates:

javascript

let message = "Hello";
 
message &&= message.toUpperCase();
console.log(message); // "HELLO" (message was truthy, so assignment runs)

The assignment only fires when the current value is already truthy. If the left side is falsy instead, nothing happens and the variable keeps its original value:

javascript

let message = "";
 
message &&= message.toUpperCase();
console.log(message); // "" (empty string is falsy, assignment skipped)

A practical pattern is updating a nested property only if the parent object already exists, which avoids a separate existence check before the update:

javascript

const user = { profile: { name: "Alice" } };
 
user.profile &&= { ...user.profile, verified: true };
 
console.log(user.profile);
// { name: "Alice", verified: true }

If user.profile were null or undefined, the spread would never run, preventing a runtime error.

Nullish Coalescing Assignment (??=)

Nullish coalescing assignment assigns a fallback only when the left side is null or undefined, ignoring other falsy values like 0 and an empty string:

javascript

let score = 0;
 
score ??= 10;
console.log(score); // 0 (0 is not nullish, kept as-is)
 
let highScore = null;
highScore ??= 100;
console.log(highScore); // 100 (null triggers the fallback)

This is the most precise of the three. Use it when 0, an empty string, and false are meaningful values that should not be overridden. For more on how ?? differs from ||, see the nullish coalescing guide.

Important: Left Side Evaluated Only Once

Logical assignment operators evaluate the left-hand side only once, not twice. This matters when the left side is more than a simple variable:

javascript

const scores = { alice: 85, bob: 0 };
 
scores.bob ||= 50;   // Property access happens once
scores.bob || (scores.bob = 50); // Property access happens twice

Both produce the same result, but OR assignment is slightly more efficient and definitely shorter. When the left side is a function call or a deep property access, evaluating once avoids unnecessary work.

When to Use Each

For simple default value assignments where you are not using the assignment-operator shorthand, the plain logical short-circuiting pattern with || or ?? may read more naturally. Choose the form that makes your intent clearest.