TypeScript – Double Question Marks (??) Explained

In TypeScript, the double question mark (??) is known as the nullish coalescing operator. It is used to provide a default value for a variable that may be null or undefined.

The nullish coalescing operator (??), a valuable addition to TypeScript, streamlines the process of handling null and undefined values. By providing a succinct way to assign fallback values, this operator enhances code readability and maintainability. In this article, we’ll delve into the significance of the nullish coalescing operator in TypeScript and showcase its application with practical examples.

Understanding the Nullish Coalescing Operator (??)

The nullish coalescing operator (??) is a logical operator that evaluates the left-hand operand and returns the right-hand operand if the left-hand operand is null or undefined. Conversely, if the left-hand operand holds a non-null, non-undefined value, that value is returned. In essence, the operator returns the right-hand side value as a fallback if the left-hand side is null or undefined.

Consider this example:

const userName: string | null = null;
const defaultName = "Guest";
const displayName = userName ?? defaultName;
console.log(displayName); // Output: "Guest"

Since userName is null, the displayName is assigned the value of defaultName, which is “Guest”.

The nullish coalescing operator proves highly beneficial when working with optional properties or values that may be undefined in certain cases. It simplifies the code and enhances readability.

Distinguishing Between ?? and ||

A prevalent misconception is that the nullish coalescing operator (??) functions identically to the logical OR operator (||). Although both operators can supply default values, their behavior differs significantly:

1. The logical OR operator (||) returns the right-hand operand when the left-hand operand is falsy, encompassing values such as null, undefined, false, 0, NaN, and empty strings.
2. In contrast, the nullish coalescing operator (??) returns the right-hand operand only when the left-hand operand is null or undefined, treating other falsy values as valid.

To illustrate the distinction, let’s examine an example:

const count: number | null = 0;
const defaultCount = 10;

const usingOr = count || defaultCount; // 10
const usingNullish = count ?? defaultCount; // 0

console.log(usingOr); // Output: 10
console.log(usingNullish); // Output: 0

In this instance, count equals 0, which is a falsy value. Therefore, when using the logical OR operator, the usingOr variable is assigned the defaultCount value (10). However, with the nullish coalescing operator, the usingNullish variable receives the count value (0), as 0 is considered valid.

Conclusion

TypeScript’s nullish coalescing operator (??) is a powerful instrument for assigning default values when working with potentially null or undefined values. By exclusively treating null and undefined as invalid, it presents a more accurate and predictable method for handling fallback values compared to the logical OR operator. Incorporating this operator into your TypeScript code can lead to enhanced readability and maintainability, resulting in more robust applications.