In the world of TypeScript, the introduction of the Nullish Coalescing Operator, denoted by ??, has provided developers with a powerful tool for handling null and undefined values in a more predictable manner. This operator is part of the TypeScript language since version 3.7 and has been widely adopted due to its utility and ease of use.

❓ What is the Nullish Coalescing Operator?

The Nullish Coalescing Operator is a logical operator that returns its right-hand side operand when its left-hand side operand is either null or undefined. If the left-hand side has a value other than null or undefined, it returns that value instead.

✍️ Syntax and Usage

The syntax for the Nullish Coalescing Operator is straightforward:

let result = value ?? defaultValue;

Here, value is the variable you want to test for nullishness, and defaultValue is the value you want to default to if value is null or undefined.

🤔 Why Use the Nullish Coalescing Operator?

Before the introduction of ??, developers often relied on the logical OR operator (||) to provide default values. However, this could lead to unintended consequences because || checks for any falsy value, including 0, NaN, "", and false, which are valid values in many contexts.

For example:

let port = userConfig.port || 3000;

If userConfig.port is 0, which is a falsy value but a valid port number, the || operator would incorrectly return 3000 instead of 0.

The Nullish Coalescing Operator solves this problem by only considering null or undefined as triggers for returning the default value.

🌍 Real-World Example

Consider a scenario where you’re configuring an application with optional settings:

interface AppConfiguration { name?: string;
items?: number;
active?: boolean;
}

function updateApp(config: Partial) {
config.name = config.name ?? "(no name)";
config.items = config.items ?? -1;
config.active = config.active ?? true;
}

In this example, the ?? operator ensures that only null or undefined values are replaced with defaults, preserving any other falsy values that may be intentional.

📢 Conclusion

The Nullish Coalescing Operator ?? is a valuable addition to TypeScript, offering a more precise way to handle default values. It avoids the pitfalls of the || operator and aligns with the need for more explicit control over nullish values in modern JavaScript development.

By understanding and utilizing the ?? operator, TypeScript developers can write more robust and predictable code, especially when dealing with configurations, options, and settings where null or undefined values may frequently occur.