Understanding the Nullish Coalescing Operator (??) in JavaScript

What is the Nullish Coalescing Operator (??)?

The nullish coalescing operator (??) is a logical operator in JavaScript that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand. In simpler terms, it provides a concise way to handle default values when dealing with potentially null or undefined variables.

How Does It Differ from the OR (||) Operator?

It’s crucial not to confuse the nullish coalescing operator (??) with the logical OR (||) operator. The || operator returns the right-hand side operand if the left-hand side operand is any ‘falsy’ value (e.g., null, undefined, 0, ”, false, NaN). The ?? operator is more specific; it only considers null and undefined as ‘nullish’ values. This subtle difference makes ?? more precise when you need to handle specific default values and can save you from unintended results

Syntax of the Nullish Coalescing Operator

The syntax is straightforward:

const result = value ?? defaultValue;

Here’s a breakdown:

• value: The variable or expression being checked.
• ??: The nullish coalescing operator.
• defaultValue: The value to be used as a default if value is null or undefined.

Examples

Let’s look at some practical examples

// Example 1: Setting a default value
const userName = user.name ?? "Guest";
console.log(userName); // Output: "Guest" if user.name is null or undefined, otherwise the user's name

// Example 2: Using with 0
const count = 0;
const displayCount = count ?? 10; 
console.log(displayCount); // Output: 0 (since 0 is not null or undefined)

// Example 3: Using with empty String
const message = "";
const greeting = message ?? "Hello";
console.log(greeting); // Output: "" (since '' is not null or undefined)

// Example 4: Using with null
const productPrice = null; 
const price = productPrice ?? 100;
console.log(price); // Output: 100 (since productPrice is null)

//Example 5: Using with undefined
let userAge; 
const age = userAge ?? 18
console.log(age) // Output: 18 (since userAge is undefined)

Use Cases of Nullish Coalescing Operator

• Providing default values for missing or optional properties in JavaScript objects.
• Setting a fallback when reading data that may be missing from APIs or external sources.
• Handling situations where a variable may or may not be initialized.
• Conditionally setting user preferences based on availability

Browser Support

The nullish coalescing operator is widely supported in modern browsers and Node.js. However, if you need to support older browsers you might need to use a transpiler such as Babel

Conclusion

The nullish coalescing operator (??) is a useful feature that improves the way you handle default values. By understanding its behavior and how it differs from the OR operator, you can write more robust and reliable JavaScript code. It offers a clean and concise way to assign default values, making your code easier to read and maintain. This is a great addition to your JavaScript toolkit.

Related Resources

• Accessible React development
• More JavaScript guides
• MDN: Nullish coalescing

Work With Us

If you’re already deep in the codebase, it’s a good time to check accessibility too. Our accessible React development service builds WCAG 2.2 compliance into every component from the start.

Get a free accessibility needs assessment — no commitment required.