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:
// Traditional if statementif (x) { x = y;}
// Using logical AND with assignmentx = x && y;
// Modern &&= operator (ES2021)x &&= y;The behavior of &&= becomes clear when we examine different initial values.
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 0Starting 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:
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:
const form = { isValid: true, isSubmitted: false, hasErrors: false};
// Only validate if form is currently validform.isValid &&= validateFields(); // Runs validationform.isSubmitted &&= submitToServer(); // Skipped if not validform.hasErrors &&= checkErrors(); // Preserves false stateOr for an API response pattern:
const response = { isAuthenticated: true, hasPermission: true, isExpired: false};
// Each check only runs if previous checks passresponse.isAuthenticated &&= validateToken();response.hasPermission &&= checkAccess();response.isExpired &&= checkExpiration(); // Stays false if no permissionKeep 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.
