TypeScript, as a superset of JavaScript, continually evolves to provide developers with new features and functionality that improve code readability, maintainability, and efficiency. One such feature, introduced in TypeScript 3.7, is the double question mark (??) operator, also known as the nullish coalescing operator. This powerful operator simplifies handling default values and null or undefined values in your code. In this article, we will explore the double question mark operator in detail and learn how to use it effectively in your TypeScript projects.

Understanding the Double Question Mark Operator

The double question mark operator (??) is a logical operator that returns the right-hand operand when the left-hand operand is null or undefined; otherwise, it returns the left-hand operand. Essentially, the operator allows you to specify a default value for a variable or expression when the original value is null or undefined.

Here’s a simple example:

const name: string | null = null;
const displayName = name ?? "Anonymous";
console.log(displayName); // Output: "Anonymous"

In this example, the name variable is set to null. When using the double question mark operator, if name is null or undefined, the displayName variable will be assigned the default value “Anonymous.”

Comparing with the OR (||) Operator

You might be familiar with the OR (||) operator, which can also be used to set default values in JavaScript and TypeScript. However, the double question mark operator differs from the OR operator in one significant aspect: it only considers null and undefined as falsy values, while the OR operator considers all falsy values (e.g., false, 0, NaN, empty string).

Here’s a comparison between the two operators:

const count: number = 0;
const displayCountUsingOr = count || 10;
const displayCountUsingNullish = count ?? 10;

console.log(displayCountUsingOr); // Output: 10
console.log(displayCountUsingNullish); // Output: 0

In this example, the OR operator returns the default value 10 because it considers 0 as a falsy value. In contrast, the double question mark operator correctly returns the original value 0, as it only checks for null and undefined values.

Use Cases for the Double Question Mark Operator

  1. Setting default values: The double question mark operator is ideal for setting default values for variables or expressions when the original value may be null or undefined.
const user: { name: string | null } = { name: null };
const displayName = user.name ?? "Anonymous";
console.log(displayName); // Output: "Anonymous"
  1. Handling optional properties: When working with objects that have optional properties, the double question mark operator can help you handle cases where these properties are not set.
interface User {
  id: number;
  name?: string;
}

const user: User = { id: 1 };
const displayName = user.name ?? "Anonymous";
console.log(displayName); // Output: "Anonymous"
  1. Working with function parameters: The double question mark operator can be useful when working with function parameters that have default values, especially when null or undefined values need to be handled explicitly.
function greet(name: string | null | undefined) {
  const displayName = name ?? "Anonymous";
  console.log(`Hello, ${displayName}!`);
}

greet(null); // Output: "Hello, Anonymous!"

Conclusion

The double question mark operator is a valuable addition to TypeScript that simplifies handling default values and null or undefined values in your code

Similar Posts