code, coding, vs code

The Nullish Coalescing Operator (??) in JavaScript: A Safer Alternative to the OR Operator (||)

TL;DR

Learn about the nullish coalescing operator (??) in JavaScript, a safer alternative to the OR operator (||) when dealing with default values. Understand how it handles falsy values, ensuring you get the desired default only when the left value is null or undefined.

Introduction

JavaScript developers often use the OR operator (||) to provide default values when the left operand is falsy. However, this can lead to unexpected results when dealing with values like 0, “”, or false. Enter the nullish coalescing operator (??), introduced in TypeScript 3.7 and later adopted in ES2020. This operator offers a more precise way to handle default values, specifically when the left value is null or undefined.

Problem

The OR operator (||) can be problematic when falsy values such as 0 or “” are valid inputs. It may produce unintended defaults in these cases, as it considers any falsy value on the left as a trigger to use the right value. The nullish coalescing operator (??) addresses this issue by only using the right value when the left is explicitly null or undefined.

console.log(0 || "not found"); // "not found"
console.log(0 ?? "not found"); // 0

Explanation

The nullish coalescing operator (??) ensures a more precise default value assignment. It differs from the OR operator (||) in that it only considers null or undefined as triggers to use the right value. This makes it a safer choice when dealing with scenarios where falsy values are valid inputs.

console.log("" || "not found"); // "not found"
console.log("" ?? "not found"); // ""

The nullish coalescing operator is available in TypeScript 3.7 and later, as well as in Node 14 and newer versions. As it becomes more widely supported, incorporating it into your codebase offers a more reliable and explicit way to handle default values.

More examples

console.log(0 || "not found"); // "not found"
console.log(0 ?? "not found"); // 0
// In the first case, the OR operator considers 0 as falsy and uses the right value. 
// In the second case, the nullish coalescing operator recognizes 0 as a valid value and uses it.

console.log("" || "not found"); // "not found"
console.log("" ?? "not found"); // ""
// Similar to the first example, the OR operator considers an empty string ("") as falsy, while the nullish coalescing operator recognizes it as a valid value.

console.log(false || "not found"); // "not found"
console.log(false ?? "not found"); // false
// The OR operator treats false as falsy, resulting in the right value being used. The nullish coalescing operator, however, recognizes false as a valid value and retains it.

console.log(null || "not found"); // "not found"
console.log(null ?? "not found"); // "not found"
// Both operators behave the same when encountering null, as null is considered falsy by the OR operator as well.

console.log(undefined || "not found"); // "not found"
console.log(undefined ?? "not found"); // "not found"
// Just like null, undefined is treated as falsy by the OR operator, and both operators produce the same result.

console.log("enkodo" || "not found"); // "enkodo"
console.log("enkodo" ?? "not found"); // "enkodo"
// When the left operand is a truthy value, both operators yield the left value.

console.log(42 || "not found"); // 42
console.log(42 ?? "not found"); // 42
// The OR and nullish coalescing operators both prioritize truthy left values and use them as the result.

console.log(NaN || "not found"); // "not found"
console.log(NaN ?? "not found"); // NaN
// NaN is considered falsy by the OR operator, while the nullish coalescing operator retains it.

console.log([] || "not found"); // []
console.log([] ?? "not found"); // []
// An empty array is truthy, and both operators retain it.

console.log({} || "not found"); // {}
console.log({} ?? "not found"); // {}
// An empty object is also truthy, and both operators retain it.

console.log(-1 || "not found"); // -1
console.log(-1 ?? "not found"); // -1

console.log(10 / 0 || "not found"); // Infinity
console.log(10 / 0 ?? "not found"); // Infinity
// Division by zero results in Infinity, which is truthy, and both operators use the left value.

console.log(1 && "not found"); // "not found"
console.log(1 && "not found" ?? "default"); // "not found"
// The logical AND operator (&&) can be used to achieve similar behavior when the left operand is truthy.

console.log(Infinity || "not found"); // Infinity
console.log(Infinity ?? "not found"); // Infinity
// Infinity is truthy, and both operators use the left value.

console.log(true || "not found"); // true
console.log(true ?? "not found"); // true
// Boolean true is truthy, and both operators use the left value.

console.log(false || 42); // 42
console.log(false ?? 42); // false
// The OR operator uses the right value since false is falsy, while the nullish coalescing operator retains false.

console.log(3.14 || "not found"); // 3.14
console.log(3.14 ?? "not found"); // 3.14
// Non-zero numbers are truthy, and both operators use the left value.

Conclusion

When providing default values in JavaScript, choosing between the OR operator (||) and the nullish coalescing operator (??) depends on your use case. If you want to consider all falsy values on the left as triggers for the default, the OR operator may suffice. However, if you specifically want to handle null or undefined, the nullish coalescing operator provides a more precise and safer alternative.

Happy Coding,
Sebastiaan


Posted

in

by

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *