JavaScript Nullish Coalescing

Introduction

Handling default values is a very common task in JavaScript. Often, developers want to assign a fallback value when a variable is null or undefined. Before modern JavaScript, the logical OR operator (||) was widely used for this purpose—but it came with unexpected behavior.

Example:

let value = 0 || 10;
console.log(value); // 10 (unexpected)

Here, 0 is a valid value, but JavaScript treats it as falsy and replaces it with 10. This can lead to bugs.

To solve this issue, JavaScript introduced the Nullish Coalescing Operator (??) in ES2020.

This operator ensures that default values are only applied when the value is null or undefined, not for other falsy values like 0, false, or “”.

What is JavaScript Nullish Coalescing?

The nullish coalescing operator (??) is used to return the right-hand value only when the left-hand value is null or undefined.

In simple terms:

?? = Use default value only if value is null or undefined

Basic Example

let value = null ?? "Default Data";
console.log(value); // Default Data

let value = 0 ?? 10;
console.log(value); // 0

Note: Unlike ||, it does not replace valid falsy values.

Why Nullish Coalescing is Used

There are many reasons to use Nullish coalescing

1. Prevents Unexpected Defaults

Does not override valid values like 0 or false.

2. Cleaner Code

Replaces long conditional checks.

3. Works Well with Optional Chaining

Commonly used with ?..

4. Improves Data Handling

Especially useful with API responses.

5. Modern JavaScript Feature

Used in professional applications.

Syntax

let result = value ?? defaultValue;

 If value is:

1. null or undefined → returns defaultValue
2. anything else → returns value

Example

I will show you many examples with different scenarios.

Example 1: Basic Usage

let a = null ?? "Hello";
console.log(a); // Hello

let b = "Hi" ?? "Hello";
console.log(b); // Hi

Example 2: Difference Between || and ??

let value1 = 0 || 100;
let value2 = 0 ?? 100;

console.log(value1); // 100
console.log(value2); // 0

Output:

Example 3: Nullish Coalescing With Boolean

let isActive = false ?? true;
console.log(isActive); // false

Output:

Example 4: Nullish Coalescing With Empty String

In the example below, if the name is empty string, then it returns the “”.

let name = "" ?? "Guest";
console.log(name); // ""

Output:

Example 5: Nullish Coalescing With Undefined

In the example below, the value is undefined, then it returns the defaultValue.

let data;
console.log(data ?? "No Data"); // No Data

Output:

Real-Life Example: User Profile Data

let user = {
 name: "John",
 age: null
};

let userName = user.name ?? "Guest";
let userAge = user.age ?? 18;

console.log(userName); // John
console.log(userAge);  // 18

Output:

Common Mistakes

1. Using || Instead of ??

let value1 = 0 || 10; // Wrong if 0 is valid
console.log(value1) // 10

let value2 = 0 ?? 10; 
console.log(value2) // 0

2. Mixing || and ?? Without Parentheses

Wrong way:

let value = null || undefined ?? "Hello"; // Error

✅ Correct:

let value = (null || undefined) ?? "Hello";

3. Assuming It Works for All Falsy Values

let value = false ?? true; // false

Note: Only works for null and undefined.

Interview Questions

Conclusion

JavaScript Nullish Coalescing (??) is a powerful feature that helps you handle default values correctly without overriding valid data. It solves one of the most common problems developers face when working with falsy values.