Vanta Logo
SPONSOR
Automate SOC 2 & ISO 27001 compliance with Vanta. Get $1,000 off.
Published
3 min read
Up to date

Trevor I. Lasn

Staff Software Engineer, Engineering Manager

JavaScript's &&= Operator: Understanding Logical AND Assignment

Use the &&= operator to safely update truthy values while preserving falsy states

The logical AND assignment operator &&= arrived alongside ??= in ECMAScript 2021. It combines logical AND && with assignment =, offering a shorthand way to conditionally update values.

The &&= operator is a logical assignment operator that updates values based on truthiness. It only assigns the new value if the existing value is truthy. Here’s how it works under the hood:

JavaScript
// Traditional if statement
if (x) {
x = y;
}
// Using logical AND with assignment
x = x && y;
// Modern &&= operator (ES2021)
x &&= y;

The behavior of &&= becomes clear when we examine different initial values.

JavaScript
let access = true;
access &&= 'granted'; // access becomes 'granted'
access = false;
access &&= 'granted'; // access stays false
access = '';
access &&= 'granted'; // access stays empty string
access = 0;
access &&= 'granted'; // access stays 0

Starting with true (truthy), the value changes to ‘granted’; but with false, an empty string, or 0 (all falsy values), the original value stays unchanged.

This demonstrates how &&= only performs assignment when the existing value is truthy, making it ideal for conditional updates where you want to preserve falsy states.

The &&= operator excels at handling conditional updates where you want to respect falsy values. Here’s a common use case with user permissions:

JavaScript
function updateUserAccess(user) {
// Only updates permissions if they already exist
user.canEdit &&= checkPermissions();
user.canDelete &&= checkAdminStatus();
return user;
}

The &&= operator is also useful for managing application states and validation:

JavaScript
const form = {
isValid: true,
isSubmitted: false,
hasErrors: false
};
// Only validate if form is currently valid
form.isValid &&= validateFields(); // Runs validation
form.isSubmitted &&= submitToServer(); // Skipped if not valid
form.hasErrors &&= checkErrors(); // Preserves false state

Or for an API response pattern:

JavaScript
const response = {
isAuthenticated: true,
hasPermission: true,
isExpired: false
};
// Each check only runs if previous checks pass
response.isAuthenticated &&= validateToken();
response.hasPermission &&= checkAccess();
response.isExpired &&= checkExpiration(); // Stays false if no permission

Keep in mind that the &&= operator is about conditional updates based on truthiness. If you need to handle null or undefined specifically, consider using the ??= operator instead.

If you found this article helpful, you might enjoy my free newsletter. I share developer tips and insights to help you grow your skills and career.


More Articles You Might Enjoy

If you enjoyed this article, you might find these related pieces interesting as well. If you like what I have to say, please check out the sponsors who are supporting me. Much appreciated!

Javascript
5 min read

Precise Decimal Math in JavaScript with Fraction.js

How to handle exact decimal calculations in JavaScript when floating-point precision isn't good enough

Nov 16, 2024
Read article
Javascript
6 min read

AggregateError in JavaScript

AggregateError helps you handle multiple errors at once in JavaScript. This makes your code easier to manage and more reliable.

Sep 2, 2024
Read article
Javascript
4 min read

The Only Widely Recognized JavaScript Feature Ever Deprecated

The 'with' statement is the only feature ever deprecated in JavaScript

Aug 22, 2024
Read article
Javascript
3 min read

JavaScript's ??= Operator: Default Values Made Simple

A guide to using ??= in JavaScript to handle null and undefined values elegantly

Nov 5, 2024
Read article
Javascript
3 min read

Float16Array in JavaScript

Understanding the new 16-bit floating point array in JavaScript

Apr 14, 2025
Read article
Javascript
4 min read

What is the JavaScript Pipeline Operator |>

A deep dive into how pipeline operators can make your code more readable and maintainable

Oct 29, 2024
Read article
Javascript
3 min read

navigator.clipboard - The New Asynchronous Clipboard API in JavaScript

Copy and paste text, images, and files using the new navigator.clipboard API

Dec 7, 2024
Read article
Javascript
9 min read

Exploring JavaScript Symbols

Deep dive into JavaScript Symbols - what they are, why they matter, and how to use them effectively

Nov 15, 2024
Read article
Javascript
4 min read

Understanding Bitwise Shifts in JavaScript: << and >>

A practical guide to left and right shift operators in JavaScript

Nov 12, 2024
Read article

Become a better engineer

Here are engineering resources I've personally vetted and use. They focus on skills you'll actually need to build and scale real projects - the kind of experience that gets you hired or promoted.

Many companies have a fixed annual stipend per engineer (e.g. $2,000) for use towards learning resources. If your company offers this stipend, you can forward them your invoices directly for reimbursement. By using my affiliate links, you support my work and get a discount at the same!


This article was originally published on https://www.trevorlasn.com/blog/javascript-logical-and-assignment-operator. It was written by a human and polished using grammar tools for clarity.