codepedia
Simplify Your JavaScript Assignments with Nullish Assignment(??=) and Nullish Coalescing Operator (??)

Photo by Glenn Carstens-Peters on Unsplash

Simplify Your JavaScript Assignments with Nullish Assignment(??=) and Nullish Coalescing Operator (??)

Gaiya M. Obed's photo
Gaiya M. Obed
·

3 min read

Table of contents

Introduction

In JavaScript, handling null or undefined values when assigning variables can often lead to verbose and repetitive code. Thankfully, the introduction of nullish assignment and the nullish coalescing operator (??) in ECMAScript 2020 (ES2020) has provided developers with a more concise and efficient approach. In this post, we will explore the concept of nullish assignment, understand how it helps streamline variable assignments, and delve into the power of the nullish coalescing operator.

Understanding Nullish Assignment

Nullish assignment allows developers to assign a value to a variable only if it is currently null or undefined. This feature addresses the common scenario where you want to provide a default value or initialize a variable only when it doesn't have a meaningful value.

Syntax and Usage: The syntax for nullish assignment involves combining the nullish coalescing operator (??) with the assignment operator (=).

variable ??= value;

The nullish assignment operator checks whether the variable on the left-hand side is null or undefined. If it is, the value on the right-hand side is assigned to the variable. However, if the variable has a value other than null or undefined, the assignment does not occur, and the variable retains its original value.

Example:

let myVariable = null;
let defaultValue = "Default Value";

myVariable ??= defaultValue;

console.log(myVariable); // Output: "Default Value"

myVariable = "Existing Value";

myVariable ??= defaultValue;

console.log(myVariable); // Output: "Existing Value"

In the above example, myVariable is initially assigned the value null. When we use the nullish assignment operator (??=), the defaultValue is assigned to myVariable since it is null. In the second assignment, myVariable already has the value "Existing Value", so the nullish assignment does not occur, and it retains its original value.

Introducing the Nullish Coalescing Operator (??): The nullish coalescing operator (??) is a powerful addition to JavaScript that simplifies the process of selecting the first non-nullish value from a series of operands.

Syntax and Usage: The nullish coalescing operator evaluates the operands from left to right and returns the first operand that is not null or undefined. If all operands are null or undefined, the operator returns the last operand.

Example:

const username = null;
const displayName = username ?? "Guest";
console.log(displayName); // Output: "Guest"

In the example above, the variable username is assigned the value null. When we use the nullish coalescing operator (??), it checks if username is null or undefined. Since it is null, the operator returns the second operand "Guest", which is then assigned to displayName.

Benefits of Nullish Assignment and the Nullish Coalescing Operator:

  1. Concise and Readable Code: Nullish assignment and the nullish coalescing operator provide a more compact and expressive syntax for conditional assignments, reducing the need for lengthy if-else statements.

  2. Avoiding Unintended Assignments: By assigning values only when variables are null or undefined, nullish assignment helps prevent accidental overwriting of existing values.

  3. Default Value Handling: The nullish coalescing operator offers a simple way to provide default values when variables are null or undefined, enhancing code clarity and reducing verbosity.

Conclusion

Nullish assignment and the nullish coalescing operator (??) are valuable additions to JavaScript, simplifying the process of assigning values and handling null or undefined

JavaScript