Understanding the ?? Operator in TypeScript

Описание: Discover what the "??" operator does in TypeScript and how it can simplify your code. Learn about its usage and benefits.
---
Understanding the ?? Operator in TypeScript

TypeScript continues to evolve, providing developers with robust features that enhance productivity and code readability. One such addition, introduced in TypeScript 3.7, is the nullish coalescing operator (??). Understanding its usage and benefits can help streamline your code, especially when dealing with null or undefined values. Let's dive into how the ?? operator works in TypeScript.

What is the ?? Operator?

The ?? operator, also known as the nullish coalescing operator, allows for more concise handling of null and undefined values compared to other conditional operators. Its primary purpose is to return the right-hand operand when the left-hand operand is null or undefined. If the left-hand operand is any other value (including false, 0, NaN, or an empty string), it returns the left-hand operand. This property makes the nullish coalescing operator particularly useful for providing default values.

Syntax

The syntax for the ?? operator is simple:

[[See Video to Reveal this Text or Code Snippet]]

How It Works

If leftOperand is neither null nor undefined, result will be equal to leftOperand.

If leftOperand is null or undefined, result will be equal to rightOperand.

Practical Examples

Let's consider some practical examples to understand how this works:

Example 1: Providing Default Values

Imagine you have a setting that can be either a number or undefined. You want to ensure that you have a default setting if none is provided:

[[See Video to Reveal this Text or Code Snippet]]

In this example, since userSetting is undefined, effectiveSetting becomes 10.

Example 2: Handling Falsey Values

The ?? operator only considers null and undefined as nullish values, unlike the logical OR (||) which considers additional falsey values like 0 and false. Let's see a comparison:

[[See Video to Reveal this Text or Code Snippet]]

Here, falseyValue is 0, and:

Using ||, which considers 0 as falsey, returns the defaultValue of 10.

Using ??, which only considers null and undefined as nullish values, returns falseyValue of 0.

Conclusion

The ?? operator in TypeScript is a powerful feature for handling null and undefined values effectively. By using this operator, you can write cleaner and more concise code, avoiding the pitfalls of other falsey values. Introduced in TypeScript 3.7, this operator is a practical addition that simplifies scenarios involving default values and nullish checks, enhancing both readability and maintainability of your code.

Adopting the nullish coalescing operator can significantly streamline your code, making it easier to handle null and undefined values in the most intuitive way possible.