Write Better JavaScript Using ||=, &&=, and ??= Operators

Discover the hidden treasures in JavaScript with ||=, &&=, and ??= operators. Learn how these lesser-known tools can streamline your code, making it more clean and easier to read.

2 min read
Write Better JavaScript Using ||=, &&=, and ??= Operators
Photo by LUM3N / Unsplash

JavaScript is a programming language full of hidden treasures that can make coding easier and more efficient. Among these gems are the ||=, &&=, and ??= operators. While they might not be so commonly used, they can be incredibly useful in specific scenarios. Let's explore how these interesting operators can clean and simplify your code.

The ||= Operator

The ||= operator, also known as the logical OR assignment, simplifies the process of assigning a default value if a variable is falsy (i.e., null, undefined, 0, false, NaN, or an empty string).

Example:

let options = {};
options.newOption ||= 1;

This code checks if options.newOption is falsy. If it is, it assigns the value 1. Otherwise, it keeps the current value of options.newOption.

The &&= Operator

The &&= operator, or logical AND assignment, is useful when you want to assign a value only if the variable is truthy (i.e., not null, undefined, 0, false, NaN, or an empty string).

Example:

let options = { newOption: 2 };
options.newOption &&= 1;

Here, options.newOption will be set to 1 only if it already has a truthy value. If newOption were 0 or null, for instance, it would remain unchanged.

The ??= Operator

The ??= operator, known as the nullish coalescing assignment, assigns a value to a variable only if that variable is null or undefined. This is particularly useful when you want to avoid overriding values like 0 or an empty string which are falsy but might be valid in your context.

Example:

let options = { newOption: 0 };
options.newOption ??= 1;

In this case, options.newOption retains its value of 0 because 0 is not null or undefined. If newOption were null or undefined, it would be set to 1.

Benefits of Using These Operators

  1. Conciseness: These operators allow you to write more concise code, reducing the need for verbose conditional statements.
  2. Readability: Code becomes more readable as the intent of the assignment is clearer.
  3. Maintainability: With less boilerplate code, maintaining and understanding the logic becomes easier.

Conclusion

Simplifying JavaScript with ||=, &&=, and ??=

JavaScript is full of hidden treasures that can make coding easier and more efficient. Among these gems are the ||=, &&=, and ??= operators. While they might not be widely used in many projects, they can be incredibly useful in specific scenarios. Let's explore how these lesser-known operators can simplify your code.


By incorporating ||=, &&=, and ??= into your JavaScript toolkit, you can elevate your coding game, making your code not only more readable but also more elegant. These operators streamline common patterns, reducing boilerplate and enhancing readability. Whether you're setting default values, managing conditional assignments, or ensuring variables are properly initialized, these tools offer a sleek, modern solution.

Why not give them a try in your next project?

Harduex blog


Follow