Logical Assignment Operators in JavaScript

ES12 (ECMAScript 2021) introduced several operators that aim to reduce boilerplate code without sacrificing clarity. Among these, the logical assignment operators (||=, &&=, ??=) solve a very concrete problem: assigning a value only if a certain condition is satisfied, avoiding repetitive if / else blocks.

To truly understand these operators, it is essential to start from a premise:
👉 they do not introduce new logic, but condense patterns that we have always used.

🔗 Do you like Techelopment? Check out the site for all the details!

A key concept: conditional assignment

In JavaScript, before the introduction of these operators, the only way to assign a value conditionally was to write something like:

if (condition) {
   a = value;
}

This pattern is so common that the language decided to offer a dedicated syntactic form, shorter but semantically equivalent. This is exactly what ||=, &&=, and ??= do.

OR Assignment (`||=`)

Let's start with the most intuitive operator, because it derives directly from the historical use of the || operator to provide fallback values.

Basic Idea

The ||= operator assigns a value only if the current variable is falsy.

falsy values in JavaScript:

false
0
""
null
undefined
NaN

In other words, we're telling JavaScript:

"If this value is invalid, replace it with a default value."

A first concrete example

Suppose we want to ensure that a username variable always has a value:

let username = "";
username ||= "Guest";

To understand what happens, let's translate it as explicitly as possible:

if (!username) {
   username = "Guest";
}

The behavior is identical:

"" is a falsy value
so the assignment occurs

The ||= operator simply makes this intention explicit in a single line.

When `||=` becomes dangerous

The problem arises when a falsy value is semantically valid.

Consider this case:

let counter = 0;
counter ||= 10;

At first glance, this might seem correct, but let's translate it with if:

if (!counter) {
   counter = 10;
}

Here the problem is obvious:

0 is falsy
but represents a valid value

👉 In this scenario, ||= is not the right operator.

AND Assignment (`&&=`)

If ||= axisWhen something is invalid, &&= does the opposite: it assigns only when the current value is valid (truthy).

Intuition

&&= is useful when we want to continue a logical chain only if an initial condition is satisfied.

Guided Example

let isLogged = true;
isLogged &&= "authenticated user";

This code means:

if (isLogged) {
   isLogged = "authenticated user";
}

The assignment occurs only because isLoggedIn was truthy.

If it had been false, the value would have remained unchanged.

Why is it useful?

Let's think about the need to refresh a cache:

let cachedValue = cache.get("result");
cachedValue &&= refreshCache("result");

Explicit translation:

let cachedValue = cache.get("result");

if (cachedValue) { 
   cachedValue = refreshCache("result");
}

Step-by-step analysis

cachedValue gets the value from the cache.
With &&= we say:
“If there is already a value (cachedValue is truthy), we update the cache.”
If cachedValue is false (null or undefined), we do nothing.

This way:

we avoid errors and unnecessary operations
we avoid if
we make it clear that the operation is conditional on the existence of the value

Nullish Assignment (`??=`)

Now we come to the most important and often misunderstood operator.

The problem it solves

Very often, we want to assign a default value only if a variable hasn't been initialized, not when it's simply false.

And this is where ||= fails.

The behavior of `??=`

??= assigns a value only if the variable is null or undefined.

It doesn't look at truthiness, it looks at the real absence of the value.

Clarifying example

let pageSize = 0;
pageSize ??= 10;

Let's translate it:

if (pageSize === null || pageSize === undefined) {
   pageSize = 10;
}

Since pageSize is 0, the assignment does not occur.

👉 This makes ??= the correct choice for:

numbers
booleans
empty strings
configurations

The big limitation of `?.` in assignment

Now we come to a real problem that many people encounter.

Seemingly logical, but incorrect code

user?.profile?.name = "Mario";

JavaScript rejects it because:

?. is only for reading
does not produce a writable reference

Explicitly, JavaScript doesn't allow this:

if (user && user.profile) {
   user.profile.name = "Mario";
}

The correct solution: Initialize first

The correct way to approach the problem is to ensure the structure exists, then assign.

user.profile ||= {};
user.profile.name = "Mario";

Full translation:

if (!user.profile) {
   user.profile = {};
}

user.profile.name = "Mario";

Here, ||= isn't just a syntactic shortcut: it becomes a structural tool.

Pattern for nested objects

This approach scales very well:

user.settings ||= {};
user.settings.preferences ||= {};
user.settings.preferences.theme ??= "dark";

Each line:

prepares the groundwork
secures the next one

The equivalent version with if/else would be very verbose:

if (!user.settings) {
   user.settings = {};
}

if (!user.settings.preferences) {
   user.settings.preferences = {};
}

if (user.settings.preferences.theme === null || 
     user.settings.preferences.theme === undefined) { 
   user.settings.preferences.theme = "dark";
}

Conclusion

The operators ||=, &&=, and ??= aren't just for "writing less code," they're for writing better code:

more readable
more declarative
closer to actual intent

When used together:

they eliminate the need for ?. when writing
they replace entire if/else blocks
they become a fundamental pattern of modern JavaScript

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog