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

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

Trevor I. Lasn ·

Nov 5, 2024 · 3 min read

Building 0xinsider.com — see who's winning across prediction markets (Polymarket, Kalshi, and more) — and what they're trading right now.

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:

1
// Traditional if statement
2
if (x) {
3
  x = y;
4
}
5

6
// Using logical AND with assignment
7
x = x && y;
8

9
// Modern &&= operator (ES2021)
10
x &&= y;

JavaScript Truthy and Falsy: A Deep Dive

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

1
let access = true;
2
access &&= 'granted';    // access becomes 'granted'
3

4
access = false;
5
access &&= 'granted';    // access stays false
6

7
access = '';
8
access &&= 'granted';    // access stays empty string
9

10
access = 0;
11
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:

1
function updateUserAccess(user) {
2
  // Only updates permissions if they already exist
3
  user.canEdit &&= checkPermissions();
4
  user.canDelete &&= checkAdminStatus();
5

6
  return user;
7
}

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

1
const form = {
2
  isValid: true,
3
  isSubmitted: false,
4
  hasErrors: false
5
};
6

7
// Only validate if form is currently valid
8
form.isValid &&= validateFields();     // Runs validation
9
form.isSubmitted &&= submitToServer(); // Skipped if not valid
10
form.hasErrors &&= checkErrors();      // Preserves false state

Or for an API response pattern:

1
const response = {
2
  isAuthenticated: true,
3
  hasPermission: true,
4
  isExpired: false
5
};
6

7
// Each check only runs if previous checks pass
8
response.isAuthenticated &&= validateToken();
9
response.hasPermission &&= checkAccess();
10
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.

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

Trevor I. Lasn

Building 0xinsider.com — see who's winning across prediction markets (Polymarket, Kalshi, and more) — and what they're trading right now. Product engineer based in Tartu, Estonia, building and shipping for over a decade.

Found this article helpful? You might enjoy my free newsletter. I share dev tips and insights to help you grow your coding skills and advance your tech career.