Update (October 19, 2025): Removed the historical sections about George Boole and Robert Recorde as they distracted from the main topic.
The title might sound like there is only a joke waiting here for you (an SEO desaster, I know). Sorry to disappoint. The story is that George Boole gave us Boolean logic, Robert Recorde gave us the equals sign — and ES2021 combined them into JavaScript's logical assignment operators.
Understanding Logical Assignment Operators
Logical assignment operators are syntactic sugar in JavaScript that combine assignment (=) with a logical (&&, ||) or nullish coalescing (??) operator. There are three types:
- Logical AND Assignment (
&&=): Assigns the value on the right to the variable on the left only if the left variable is truthy. - Logical OR Assignment (
||=): Assigns the value on the right to the variable on the left only if the left variable is falsy. - Nullish Coalescing Assignment (
??=): Assigns the value on the right to the variable on the left only if the left variable isnullorundefined.
Logical AND Assignment (&&=)
The &&= operator is a shortcut for setting a variable's value only if it currently holds a truthy value. It's particularly useful in scenarios where an action should only proceed if a certain condition remains true.
Example Use Case: Feature Toggle
Imagine a scenario where certain features should only be enabled for administrators:
const isAdmin = user.isAdmin();
let canAccessDashboard = isAdmin;
canAccessDashboard &&= user.isAuthenticated();
console.log(canAccessDashboard); // true if user is authenticated, otherwise false
This code snippet ensures that canAccessDashboard is only true if both isAdmin and user.isAuthenticated() are true, effectively guarding the feature behind two conditions.
Logical OR Assignment (||=)
The ||= operator allows you to assign a value to a variable if the variable currently holds a falsy value (e.g., null, undefined, 0, false, ""). This is incredibly useful for setting default values.
Example Use Case: Setting Defaults
const userSettings = {
theme: null,
};
// Set default theme if none is specified
userSettings.theme ||= "dark";
console.log(userSettings.theme); // Outputs 'dark'
This operator is ideal for initializing variables that have not been set, ensuring that your application uses a sensible default without overwriting potentially meaningful falsy values like 0 or false.
Nullish Coalescing Assignment (??=)
The ?? operator, known as the nullish coalescing operator, is a relatively recent addition to programming languages. It's not a logical assignment operator in the strict sense, even though the ES2021 specification classifies it as such, since it's not based on a logical operator. Instead, its development is more closely tied to the practical needs of programming, particularly in handling null and undefined values in a clean and predictable manner.
The ??= operator is used to assign a value to a variable if and only if the variable is currently null or undefined. This is more precise than the ||= operator, which also considers other falsy values.
Example Use Case: Configuration Defaults
const config = {
timeout: 0,
};
config.timeout ??= 5000; // Set default timeout if not specified, i.e. undefined, or null
console.log(config.timeout); // Outputs 0, preserving the explicitly set falsy value
This operator is particularly useful in configurations and settings where defaults should only fill in missing values without replacing other falsy but valid settings like 0.
Practical Benefits and Considerations
Using logical assignment operators, instead of if or ternary statements, reduces the amount of code you need to write, and can make your intentions clearer to other developers. As with many features, the key is to use these operators judiciously, especially when dealing with falsy values that are valid in your code's context.
Additional Note
There are more assignment operators in JavaScript, like the left shift assignment operator (<<=). Those seem less widely applicable to me but might be worth another post at some point...
(Cover image on top by starline on Freepik)
Top comments (0)