JavaScript Logical Assignment Operators: A Complete Tutorial with Examples

JavaScript introduced logical assignment operators in ES2021 (ES12) to simplify common patterns where logical operators are combined with assignment.

These operators combine logical operations (||, &&, ??) with assignment (=) in a compact way. The logical assignment operators include:

Logical OR Assignment (||=)
Logical AND Assignment (&&=)
Nullish Coalescing Assignment (??=)

Each of these operators is used to conditionally assign values based on the state of the existing value.

1. Logical OR Assignment (||=)

The logical OR assignment (||=) operator assigns a value to a variable only if the variable is falsy (i.e., false, 0, “”, null, undefined, or NaN).

Syntax

variable ||= value;

This is a shorthand for:

variable = variable || value;

Example 1: Using ||=

let name = '';
name ||= 'Default Name';

console.log(name); // Output: "Default Name"

Explanation

name is an empty string (“”), which is a falsy value.
The ||= operator checks if name is falsy, and since it is, assigns “Default Name” to name.

Example 2: When ||= Doesn't Assign

let age = 25;
age ||= 18;

console.log(age); // Output: 25

Explanation

age is 25, which is truthy.
The ||= operator does not assign the value 18 because age is not falsy.

2. Logical AND Assignment (&&=)

The logical AND assignment (&&=) operator assigns a value to a variable only if the variable is truthy.

Syntax

variable &&= value;

This is a shorthand for:

variable = variable && value;

Example 1: Using &&=

let isActive = true;
isActive &&= 'Active';

console.log(isActive); // Output: "Active"

Explanation

isActive is true, which is truthy.
The &&= operator assigns “Active” to isActive because the original value is truthy.

Example 2: When &&= Doesn't Assign

let isVerified = false;
isVerified &&= 'Verified';

console.log(isVerified); // Output: false

Explanation

isVerified is false, which is falsy.
The &&= operator does not assign the value “Verified” because isVerified is false.

3. Nullish Coalescing Assignment (??=)

The nullish coalescing assignment (??=) operator assigns a value to a variable only if the variable is null or undefined.

Syntax

variable ??= value;

This is a shorthand for:

variable = variable ?? value;

Example 1: Using ??=

let user = null;
user ??= 'Guest';

console.log(user); // Output: "Guest"

Explanation

user is null, so the ??= operator assigns “Guest” to user.
This operator only checks for null or undefined, not other false values like 0 or false.

Example 2: When ??= Doesn't Assign

let score = 0;
score ??= 100;
console.log(score); // Output: 0

Explanation

score is 0, which is a falsy value but not null or undefined.
The ??= operator does not assign 100 to score because score is defined and not null.

Comparing Logical Assignment Operators

Let's compare how each of these logical assignment operators behaves in different scenarios:

Example 1: Using All Three Operators

let a = 0;
let b = '';
let c = null;

a ||= 10;  // a is falsy (0), so assigns 10 to a
b &&= 'Hello';  // b is falsy (''), so no assignment
c ??= 'Default';  // c is null, so assigns 'Default' to c

console.log(a); // Output: 10
console.log(b); // Output: ''
console.log(c); // Output: 'Default'

Explanation

a ||= 10 assigns 10 because a is 0 (falsy).
b &&= ‘Hello' does not assign ‘Hello' because b is an empty string (“”), which is falsy.
c ??= ‘Default' assigns ‘Default' because c is null.

Summary Table of Logical Assignment Operators

Key Points

• ||= assigns the right-hand value if the left-hand variable is falsy.
• &&= assigns the right-hand value if the left-hand variable is truthy.
• ??= assigns the right-hand value if the left-hand variable is null or undefined.

These logical assignment operators make your code more concise and readable when you need to conditionally assign values based on the state of an existing variable.