Nullish Coalescing Operator (??) in JavaScript

The Nullish Coalescing Operator (??) is a useful tool in JavaScript. It provides a simple way to give a default value when a variable is null or undefined. This feature is essential when dealing with user inputs, optional settings, or data that might come from external sources like APIs.

In this guide, we’ll break down how the Nullish Coalescing Operator works, when to use it, and some practical tips for writing cleaner code.

In this section, we’ll cover the following topics:

What is the Nullish Coalescing Operator (??)?

The Nullish Coalescing Operator is like a safety net for your code. It lets you check if a value is null or undefined and replace it with a default value. Unlike other ways to handle missing values, the ?? operator focuses specifically on these two situations, making it a precise and reliable tool for developers.

For example, if you have a variable for user input, it might not always have a value. Instead of crashing your program or writing extra code to check for missing values, you can use ?? to provide a fallback, such as a default configuration or a placeholder.

Nullish Values: null and undefined

Before we dive into how the operator works, it’s important to understand null and undefined. These two values are often used in JavaScript to represent “nothing” or the absence of a value:

• null: This means there is no value, and it’s usually assigned intentionally by a programmer.
• undefined: This means a value has not been set, often because a variable has been declared but not assigned.

Without proper handling, using null or undefined in your code can cause errors, such as trying to access properties on these values. For example:

let user = null;
console.log(user.name); // This will throw an error!

To avoid these errors, the ?? operator can help you provide a safe default.

How the Nullish Coalescing Operator Works

The ?? operator checks whether a value is null or undefined. If it finds that the value is either of these, it uses a default value you provide. If the value is anything else—such as 0, an empty string, or false—the operator will leave it unchanged.

Here’s a simple way to understand it:

• If the value is null or undefined, use the fallback.
• Otherwise, use the original value.

For example:

let userInput = null;
let finalValue = userInput ?? "Default Value";
console.log(finalValue); // Output: "Default Value"

This behavior ensures that only truly missing values (null or undefined) trigger the default value.

How ?? Differs from Logical OR (||)

The || operator might seem similar to ??, but it behaves differently. The || operator considers many values “falsy,” including null, undefined, 0, false, and "" (an empty string). This can lead to unintended behavior when you want to allow some falsy values like 0 or false.

For example:

let userInput = 0;

console.log(userInput || 10); // Output: 10 (0 is falsy)
console.log(userInput ?? 10); // Output: 0 (0 is not null or undefined)

The ?? operator solves this by focusing only on null or undefined, making it a better choice in many cases.

Syntax and Use Cases

Basic Syntax

The syntax of the ?? operator is simple and easy to remember:

let result = value1 ?? value2;

Here’s what happens:

• If value1 is null or undefined, the operator returns value2.
• Otherwise, it returns value1.

Common Use Cases

The Nullish Coalescing Operator (??) is versatile and can simplify many common programming scenarios. Below are some detailed use cases with practical examples to help beginners understand how and when to use it effectively.

1. Default Value Assignment

A frequent use case for ?? is assigning default values to variables that might be null or undefined. This is especially helpful when working with configuration settings or user inputs where a value may be missing.

const apiUrl = config.url ?? "https://default.api.com";
console.log(apiUrl);
// If `config.url` is `null` or `undefined`, it falls back to 'https://default.api.com'.

This ensures your application always has a valid URL to work with, even if the configuration is incomplete.

2. Handling Optional or Missing Data

When working with APIs or external data sources, you might encounter null or undefined values in the responses. The ?? operator can help you provide safe fallback values, avoiding potential errors.

const responseData = apiResponse.data ?? {};
console.log(responseData);
// If `apiResponse.data` is missing (null or undefined), it defaults to an empty object.

This is particularly useful when you’re processing data and need a predictable structure to work with.

3. Simplifying Complex Conditional Logic

When deciding which value to display or use, you might have a chain of possible values to check. The ?? operator allows you to write concise and readable code instead of using lengthy if-else statements.

const userDisplayName = user.name ?? user.username ?? "Anonymous";
console.log(userDisplayName);
// The first non-nullish value in the chain (user.name or user.username) will be used. If both are null or undefined, it defaults to 'Anonymous'.

This pattern is especially common in user interfaces where you want to display the most specific available information.

4. Fallback for Function Parameters

You can use ?? to provide default values for function parameters when they are explicitly passed as null or undefined.

function greetUser(name) {
  const greetingName = name ?? "Guest";
  console.log(`Hello, ${greetingName}!`);
}

greetUser("Alice"); // Output: Hello, Alice!
greetUser(null); // Output: Hello, Guest!
greetUser(); // Output: Hello, Guest!

This is a clean and efficient way to ensure functions behave correctly even when some arguments are missing.

Best Practices for Nullish Coalescing Operator

When using the Nullish Coalescing Operator, keep the following best practices in mind:

• Use it for precise checks: The ?? operator should only be used when you specifically want to handle null or undefined. If you want to check for other falsy values, such as 0 or an empty string, consider using a different approach.
• Avoid overusing it: While ?? is a powerful tool, don’t rely on it for every default value in your code. Sometimes, it’s better to handle missing values through other mechanisms, such as initial assignments or validation.
• Combine it with optional chaining: The optional chaining operator (?.) works well with ?? to handle deeply nested properties. For example, you can safely access an object property and provide a default value if it’s missing.
• Stay consistent: Decide where and how you’ll use the ?? operator in your codebase, and stick to that approach. Consistency helps maintain readability and reduces confusion for other developers.
• Be mindful of readability: While ?? can make your code concise, overusing it in complex expressions can reduce readability. Use it sparingly and break down complex logic into smaller, clearer steps when necessary.

The Nullish Coalescing Operator (??) is a simple yet powerful feature in JavaScript that helps you handle null or undefined values with ease. By understanding its behavior and following best practices, you can write cleaner, more robust code that handles missing values gracefully. Whether you’re managing user inputs, API responses, or application settings, ?? ensures your programs remain stable and predictable.

Reference links:

MDN's documentation on the Nullish Coalescing Operator