JavaScript Logical OR Assignment

The logical OR assignment (||=) operator evaluates the left operand and assigns the right operand to the left operand only if the left operand is falsy.

x ||= y

Mechanics and Short-Circuit Evaluation

The operator relies on short-circuit evaluation. When the JavaScript engine encounters x ||= y, it performs the following steps:

Evaluates the left-hand side (LHS) operand.
Coerces the LHS value to a boolean.
If the LHS is truthy, the operation short-circuits. The right-hand side (RHS) is never evaluated, and no assignment takes place.
If the LHS is falsy, the engine evaluates the RHS and assigns its resulting value to the LHS.

In JavaScript, the following values are falsy and will trigger the assignment: false, 0, -0, 0n, "" (empty string), null, undefined, and NaN.

Logical Equivalence

The ||= operator is strictly equivalent to the following logical expression:

x || (x = y)

It is a common misconception that x ||= y is equivalent to x = x || y. While the resulting value is often the same, the underlying mechanics differ significantly. The expression x = x || y always performs an assignment operation, whereas x ||= y conditionally performs the assignment.

Syntax Visualization

let a = 0;      // 0 is falsy
a ||= 10;       // RHS is evaluated and assigned
console.log(a); // 10

let b = 42;     // 42 is truthy
b ||= 10;       // Short-circuits; RHS is ignored, no assignment occurs
console.log(b); // 42

let c = "";     // Empty string is falsy
c ||= "text";   // RHS is evaluated and assigned
console.log(c); // "text"

Impact on Object Setters

Because ||= only performs an assignment if the LHS is falsy, it prevents unnecessary setter invocations on objects. This is the primary technical distinction between ||= and standard assignment combined with a logical OR.

const obj = {
  _value: 100,
  get value() {
    return this._value;
  },
  set value(val) {
    console.log("Setter invoked!");
    this._value = val;
  }
};

// obj.value evaluates to 100 (truthy).
// The operation short-circuits. The setter is NEVER invoked.
obj.value ||= 200; 

// Contrast with standard assignment:
// The setter IS invoked here, even though the value remains 100.
obj.value = obj.value || 200; 

Tired of Poor JavaScript Skills? Fix That With Deep Grasping!Learn More

Functions

Methods

Constructors

Classes

Destructuring

Decorators

Modules

Accessors

Variables

Fields

Parameters

Error Handling

Control Flow

Statement Forms

Loops

Primitive Types

Comments

Access Operators

Spread Operators

Call Operators

Conditional Operators

Logical Operators

Equality Operators

Relational Operators

Arithmetic Operators

Assignment Operators

Update Operators

Unary Operators

Yield Operators

Bitwise Operators

Shift Operators

JavaScript Logical OR Assignment

Mechanics and Short-Circuit Evaluation

Logical Equivalence

Syntax Visualization

Impact on Object Setters

​Mechanics and Short-Circuit Evaluation

​Logical Equivalence

​Syntax Visualization

​Impact on Object Setters

Mechanics and Short-Circuit Evaluation

Logical Equivalence

Syntax Visualization

Impact on Object Setters