Nullish Coalescing (??) vs Logical OR (||) Operator in TypeScript

In TypeScript, there are two operators that can be used for handling default values: the nullish coalescing operator (??) and the logical OR operator (||). While they may seem similar at first glance, they have key differences in their behavior.

In this tutorial, we’ll learn about the nullish coalescing operator and the logical OR operator in detail, providing examples to illustrate their usage and help you understand when to use each one.

Understanding the Logical OR Operator (||) in TypeScript

The logical OR operator (||) is a commonly used operator in TypeScript and JavaScript. It returns the first truthy value in a series of expressions. If all expressions evaluate to falsy values, it returns the last falsy value.

Here’s an example to illustrate the behavior of the logical OR operator:

const value1 = null;
const value2 = undefined;
const value3 = '';
const value4 = 0;
const value5 = 'Hello';

console.log(value1 || 'Default'); // Output: 'Default'
console.log(value2 || 'Default'); // Output: 'Default'
console.log(value3 || 'Default'); // Output: 'Default'
console.log(value4 || 'Default'); // Output: 'Default'
console.log(value5 || 'Default'); // Output: 'Hello'

In this example, the logical OR operator returns ‘Default’ for value1, value2, value3, and value4 because they are all falsy values. For value5, it returns ‘Hello’ since it is a truthy value.

Output:

Check out: Loose vs Strict Equality in TypeScript

Introducing the Nullish Coalescing Operator (??) in TypeScript

The nullish coalescing operator (??) is a relatively new addition to TypeScript and JavaScript. It returns the right-hand side operand when the left-hand side operand is either null or undefined. If the left-hand side operand is not null or undefined, it returns the left-hand side operand.

Here’s an example that demonstrates the behavior of the nullish coalescing operator:

const value1 = null;
const value2 = undefined;
const value3 = '';
const value4 = 0;
const value5 = 'Hello';

console.log(value1 ?? 'Default'); // Output: 'Default'
console.log(value2 ?? 'Default'); // Output: 'Default'
console.log(value3 ?? 'Default'); // Output: ''
console.log(value4 ?? 'Default'); // Output: 0
console.log(value5 ?? 'Default'); // Output: 'Hello'

Output:

In this example, the nullish coalescing operator returns ‘Default’ for value1 and value2 because they are null and undefined, respectively. For value3, value4, and value5, it returns their original values since they are not null or undefined.

Check out: Difference Between Protected vs Private in TypeScript

Key Differences Between ?? and || Operator in TypeScript

The main difference between the nullish coalescing operator (??) and the logical OR operator (||) lies in how they treat falsy values:

• The logical OR operator (||) considers all falsy values (e.g., null, undefined, empty string, 0) as equivalent and returns the first truthy value or the last falsy value.
• The nullish coalescing operator (??) only considers null and undefined as “nullish” values and returns the right-hand side operand only if the left-hand side operand is null or undefined.

Here’s an example that highlights this difference:

const emptyString = '';
const zero = 0;

console.log(emptyString || 'Default'); // Output: 'Default'
console.log(zero || 'Default'); // Output: 'Default'

console.log(emptyString ?? 'Default'); // Output: ''
console.log(zero ?? 'Default'); // Output: 0

In this example, the logical OR operator returns ‘Default’ for both emptyString and zero because they are falsy values. On the other hand, the nullish coalescing operator returns the original values of emptyString and zero because they are not null or undefined.

When to Use ?? vs || Operator in TypeScript

Now that we understand the differences between the nullish coalescing operator and the logical OR operator, let’s discuss when to use each one:

1. Use the logical OR operator (||) when you want to provide a default value for any falsy value, including null, undefined, empty string, 0, etc. It’s useful when you treat all falsy values as equivalent and want to fall back to a default value.
2. Use the nullish coalescing operator (??) when you specifically want to provide a default value only for null and undefined, while preserving other falsy values like an empty string or 0. It’s beneficial when you need to differentiate between intentionally false values and missing or undefined values.

Here’s an example that illustrates the appropriate usage:

function getUserName(name: string | null | undefined) {
  return name ?? 'Anonymous'; // Use ?? to provide a default name only for null or undefined
}

function getPageSize(size: number | null | undefined) {
  return size || 10; // Use || to provide a default page size for any falsy value
}

console.log(getUserName(null)); // Output: 'Anonymous'
console.log(getUserName('John')); // Output: 'John'

console.log(getPageSize(null)); // Output: 10
console.log(getPageSize(0)); // Output: 10
console.log(getPageSize(5)); // Output: 5

Check out: Difference Between Let vs Const in TypeScript

Output:

In the getUserName function, we use the nullish coalescing operator (??) to provide a default name only when the name parameter is null or undefined. If name is an empty string or any other truthy value, it will be returned as is.

In the getPageSize function, we use the logical OR operator (||) to provide a default page size of 10 for any falsy value, including null, undefined, or 0. If size is a positive number, it will be returned as is.

Summary

Conclusion

In this tutorial, we explored the differences between the nullish coalescing operator (??) and the logical OR operator (||) in TypeScript. We learned that the logical OR operator considers all falsy values as equivalent and returns the first truthy value or the last falsy value, while the nullish coalescing operator only considers null and undefined as “nullish” values and returns the right-hand side operand only in those cases.

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/