Logical Assignment Operators in JavaScript — The Tiny Feature That Saves You Time

Write cleaner logic with JavaScript’s ||=, &&=, and ??= — here’s how and when to use them.

Logical Assignment Operators in JavaScript — The Tiny Feature That Saves You Time

Have you ever written code like this?

if (!config.port) {
  config.port = 3000;
}

Or like this?

if (user.isLoggedIn) {
  user.token = getToken();
}

If yes, I have good news — JavaScript has a much cleaner way to handle these patterns thanks to logical assignment operators, introduced in ES2021. These small additions to the language can eliminate repetitive code and make your logic much more expressive.

Let’s explore what they are, how they work, and where you should (and shouldn’t) use them.

What Are Logical Assignment Operators?

Logical assignment operators combine:

• A logical operator (||, &&, or ??)
• With the assignment operator (=)

That gives us:

• ||= – Logical OR assignment (assign if falsy)
• &&= – Logical AND assignment (assign if truthy)
• ??= – Nullish coalescing assignment (assign if nullish)

The syntax is compact, but the logic stays the same — and like standard logical expressions, they short-circuit, meaning the right-hand side won’t even be evaluated unless it needs to be.

||= – Logical OR assignment (Assign If Falsy)

Use this when you want to set a default only if the value is currently falsy (i.e., false, 0, '', null, or undefined).

settings.theme ||= 'light';

This is equivalent to:

if (!settings.theme) {
  settings.theme = 'light';
}

Example:

let retryCount = 0;
retryCount ||= 5; 
console.log(retryCount); // 5 — 0 is falsy!

Be careful — if 0, '', or false are valid values in your case, use ??= instead.

&&= – Logical AND assignment (Assign If Truthy)

Use this when the left-hand value must be truthy for an update to happen.

user.isLoggedIn &&= getUserData();

This is the same as:

if (user.isLoggedIn) {
  user.isLoggedIn = getUserData();
}

Example:

let isFeatureEnabled = true;
isFeatureEnabled &&= false;
console.log(isFeatureEnabled); // false

This shows that the right-hand result replaces the left-hand value.

??= – Nullish coalescing assignment (Assign If Null or Undefined)

This one is great when you want to set a value only if it’s null or undefined, without overwriting things like 0, false, or ''.

config.timeout ??= 3000;

Same as:

if (config.timeout === null || config.timeout === undefined) {
  config.timeout = 3000;
}

Example:

let title = '';
title ??= 'Untitled';
console.log(title); // ''

Because '' is not null or undefined, it stays as-is.

Why logical assignment matters in your code

Logical assignment operators really shine in situations like:

Setting default props in React

props.showHelpText ??= true;

Defining global config values

config.apiBase ||= '/api/v1';

Sanitizing form data

formData.email &&= formData.email.trim();

Avoiding unnecessary function calls

config.apiKey ||= fetchApiKey(); // only runs if apiKey is falsy

A Quick Gotcha

Let’s take a look at a small side effect:

let calls = 0;
let obj = { val: 0 };

obj.val ||= ++calls;
console.log(obj.val); // 1

obj.val ||= ++calls;
console.log(obj.val); // still 1

Why? On the first line, obj.val is 0 (falsy), so ++calls runs and assigns 1. On the second, obj.val is now truthy (1), so the right-hand side never runs again.

Browser + Node Support

You’re good to go on all modern platforms:

✅ Chrome 85+, Firefox 79+, Safari 14+, Edge 85+ ✅ Node.js 15+ ❌ Not supported in Internet Explorer (RIP)

If you still support older environments, use Babel with @babel/preset-env.

Final Thoughts

Logical assignment operators are easy to overlook — they’re tiny! But once you start using them, you’ll wonder how you lived without them.

They help you:

• Reduce repetitive if statements
• Write cleaner and more expressive logic
• Improve readability in stateful or config-heavy code

If you’re already using ||, &&, and ?? for expressions, switching to ||=, &&=, and ??= will feel totally natural — just like upgrading your JavaScript muscle memory.

Let me know in the comments if you’ve started using these operators in your codebase! Have they simplified your logic or caused any surprises?

A message from our Founder

Hey, Sunil here. I wanted to take a moment to thank you for reading until the end and for being a part of this community.

Did you know that our team run these publications as a volunteer effort to over 200k supporters? We do not get paid by Medium!

If you want to show some love, please take a moment to follow me on LinkedIn, TikTok and Instagram. And before you go, don’t forget to clap and follow the writer️!