typescript double question mark

3 min read 02-10-2024

TypeScript is a powerful superset of JavaScript that offers enhanced type safety and modern features, making it a popular choice among developers. One of the language's useful features is the nullish coalescing operator, represented by the double question mark (??). In this article, we will dive into what the double question mark operator is, how to use it, and why it can be beneficial for your TypeScript projects.

What is the Double Question Mark Operator?

The double question mark (??) operator is a logical operator in TypeScript (and JavaScript) that returns the right-hand operand when the left-hand operand is null or undefined. This feature was introduced in TypeScript 3.7, providing a more concise way to handle default values compared to traditional methods.

Syntax

const result = value1 ?? value2;

value1: The first value to check.
value2: The value to return if value1 is null or undefined.

How Does it Work?

Let’s take a closer look with some examples:

Basic Example

let username: string | null | undefined = null;
let defaultUsername = "Guest";

let currentUser = username ?? defaultUsername;
console.log(currentUser); // Output: "Guest"

In this example, since username is null, the value of currentUser becomes "Guest".

Multiple Operators

You can chain multiple nullish coalescing operators:

let firstName: string | null | undefined = null;
let lastName: string | null | undefined = null;
let defaultFirstName = "John";
let defaultLastName = "Doe";

let displayName = firstName ?? lastName ?? defaultFirstName + " " + defaultLastName;
console.log(displayName); // Output: "John Doe"

Here, if both firstName and lastName are null, the displayName will fall back to the default value.

Advantages of Using the Double Question Mark Operator

1. Improved Readability

Using the nullish coalescing operator enhances code clarity. Instead of writing complex ternary operations or using || (which treats falsy values like 0, false, or empty strings as "no value"), the ?? operator only looks for null or undefined.

2. Simplicity

It simplifies handling default values. With ??, you can set defaults in a more straightforward manner without worrying about the falsy values that might affect your logic.

3. Type Safety

TypeScript's type system provides better type inference when using ??, making your code safer and more predictable.

Example Scenarios

1. API Response Handling

Imagine you are handling an API response where certain fields might be null or undefined:

interface User {
    id: number;
    name: string | null;
    age?: number;
}

function getUserDetails(user: User) {
    const userName = user.name ?? "Anonymous";
    const userAge = user.age ?? 18; // Default age if not specified

    return `${userName} is ${userAge} years old.`;
}

const user: User = { id: 1, name: null };
console.log(getUserDetails(user)); // Output: "Anonymous is 18 years old."

2. Configuration Defaults

In an application, you may want to set default configuration values:

interface Config {
    timeout?: number;
    retry?: number;
}

function getConfig(config: Config) {
    const timeout = config.timeout ?? 5000; // Default timeout
    const retry = config.retry ?? 3; // Default retry attempts

    return { timeout, retry };
}

console.log(getConfig({})); // Output: { timeout: 5000, retry: 3 }

Conclusion

The double question mark (??) operator is a versatile and effective feature of TypeScript that streamlines how developers manage null and undefined values. By leveraging this operator, you can write cleaner, more intuitive code while maintaining type safety.

Takeaway: Always consider using the nullish coalescing operator when you need to provide defaults for possibly null or undefined variables in your TypeScript projects. This will improve both the readability and maintainability of your code.