When it comes to writing clean, concise code, every developer knows that the more you can reduce redundancy, the better.
In ECMAScript 2021 (ES12), JavaScript introduced Logical Assignment Operators, which combine logical operators with assignment operations. These new operators allow developers to streamline their code and make it more expressive.
In this article, we’ll explore these new operators in-depth and demonstrate how they can simplify your code, with real-world examples.
You’ll see how they can help reduce boilerplate code and improve readability in your day-to-day JavaScript development.
What Are Logical Assignment Operators?
The new Logical Assignment Operators are a combination of logical operators (&&, ||, and ??) and the assignment operator (=). They allow you to perform a logical operation and an assignment in a single, concise step.
There are three logical assignment operators:
Logical AND Assignment (&&=)
Logical OR Assignment (||=)
Logical Nullish Assignment (??=)
Each of these operators operates based on the result of a logical operation and assigns the result to the left-hand variable.
Logical AND Assignment (&&=)
The &&= operator assigns a value to a variable only if the variable is truthy. If the variable is falsy, the assignment doesn’t occur.
Syntax:
x &&= y;
This is equivalent to:
x = x && y;
Example 1: Simple Use Case
Suppose you have a variable that should only be updated if it’s already truthy:
let user = { name: "John" };
// Only update the name if the user object is not null or undefined
user &&= { name: "Jane" };
console.log(user); // { name: "Jane" }
In this case, user is an object, so the assignment happens. If user had been null or undefined, the assignment would have been skipped.
Example 2: Skipping Falsy Values
let config = {
debug: false
};
// Update `debug` only if it's truthy
config.debug &&= true;
console.log(config.debug); // false (unchanged)
If config.debug had been true, it would have been updated to true, but since it was already false, no change happens.
Logical OR Assignment (||=)
The ||= operator assigns a value only if the left-hand side is falsy. This can be particularly useful for setting default values in a concise manner.
Syntax:
x ||= y;
This is equivalent to:
x = x || y;
Example 1: Setting Default Values
A common use case for ||= is setting default values for variables that may be undefined, null, or falsy.
let username = "";
// Set a default username if the current one is falsy (empty string in this case)
username ||= "Guest";
console.log(username); // "Guest"
Here, the empty string is falsy, so the value “Guest” is assigned to username.
Example 2: Simplifying Code Logic
let preferences = { theme: null };
// Use default theme if not set
preferences.theme ||= "light";
console.log(preferences.theme); // "light"
In this case, if preferences.theme were null, it would be updated to “light”. If it already had a value (even an empty string or false), it would stay the same.
Logical Nullish Assignment (??=)
The ??= operator is similar to the logical OR assignment (||=), but it only assigns a value when the left-hand side is null or undefined, not other falsy values like 0, NaN, or “”.
Syntax:
x ??= y;
This is equivalent to:
x = x ?? y;
Example 1: Defaulting Only When Null or Undefined
let user = { name: null };
// Only update `name` if it's null or undefined
user.name ??= "Anonymous";
console.log(user.name); // "Anonymous"
Here, the name property is null, so the assignment happens. If it had been an empty string, 0, or false, the value would not have been changed.
Example 2: Avoiding Unnecessary Changes
let config = { timeout: 0 };
// Don't overwrite existing value if not null or undefined
config.timeout ??= 5000;
console.log(config.timeout); // 0 (unchanged)
Since timeout is 0 (which is a falsy value but not null or undefined), the assignment doesn’t take place.
Why Use Logical Assignment Operators?
Conciseness: These operators help reduce repetitive code, making assignments cleaner and more expressive.
Readability: By combining logical operations and assignments, you can convey your intent more directly.
Performance: Although the performance improvement is minimal, using these operators in specific scenarios can reduce unnecessary operations (e.g., redundant checks or assignments).
Real-World Example: Dynamic Form Validation
Consider a scenario where you’re working with a dynamic form. You want to set default values for form fields only if they are missing or falsy, but not overwrite the user’s input if it’s already provided.
Code:
let formData = { email: "", username: null, phone: undefined };
// Set defaults only if values are null or undefined
formData.email ||= "[email protected]";
formData.username ??= "GuestUser";
formData.phone ??= "123-456-7890";
console.log(formData);
/* Output:
{
email: "[email protected]",
username: "GuestUser",
phone: "123-456-7890"
}
*/
Here, the logical assignment operators ensure that only missing or falsy values are updated with default values, keeping the user’s input intact.
Conclusion
JavaScript’s Logical Assignment Operators provide a clean and efficient way to simplify conditional assignments.
With &&=, ||=, and ??=, you can streamline your code, making it more readable and less prone to errors.
Whether you’re dealing with default values, conditional updates, or just trying to write more expressive code, these operators can save you valuable time and improve the quality of your codebase.
As a full-stack developer, being up-to-date with these new JavaScript features helps you write more elegant and efficient code, ultimately improving the performance and maintainability of your applications.
