Understanding Default Operator (`||`) vs Nullish Coalescing Operator (`??`) in JavaScript

When working with JavaScript, it’s common to provide default values in case a variable is missing or undefined. Two popular ways are:

• Using the logical OR operator (||)
• Using the nullish coalescing operator (??)

While they may look similar, they behave differently — and knowing the difference will save you from subtle bugs.

🔹 The Default Operator (||)

The || operator returns the right-hand side value if the left-hand side is falsy.
In JavaScript, the following are considered falsy:

• 0
• "" (empty string)
• false
• null
• undefined
• NaN

Example:

let userName = "";
let displayName = userName || "Guest";

console.log(displayName); // "Guest"

Here, even though userName is an empty string (which might be valid input), it is treated as falsy. So "Guest" is used instead.

Another case:

let count = 0;
let items = count || 10;

console.log(items); // 10 (oops, we actually wanted 0)

🔹 The Nullish Coalescing Operator (??)

The ?? operator only considers null or undefined as missing values.
Other falsy values like 0, false, or "" are preserved.

Example:

let userName = "";
let displayName = userName ?? "Guest";

console.log(displayName); // "" (empty string is valid, not replaced)

Another case:

let count = 0;
let items = count ?? 10;

console.log(items); // 0 ✅ (correct, because 0 is a valid number)

✅ Advantage of ?? over ||

The key benefit of ?? is that it does not mistakenly override valid falsy values.

• With ||, values like 0, "", or false are treated as missing.
• With ??, only null and undefined are treated as missing.

This makes ?? especially useful when:

• 0 is a valid count (e.g., items in a cart)
• "" is a valid string (e.g., optional text fields)
• false is a valid boolean flag (e.g., user preferences)

🔹 Quick Comparison Table

🌍 Real-World Use Cases

1. API Response Defaults

When working with APIs, some fields may be missing (null/undefined) but others might be valid even if falsy.

let response = { items: 0 };

let itemCount = response.items ?? 10;
console.log(itemCount); // 0 (valid number, not replaced!)

If you used ||, this would incorrectly give 10 instead of 0.

2. Config Settings with Boolean Flags

Sometimes false is a deliberate setting, not a missing value.

let config = { darkMode: false };

let theme = config.darkMode ?? true;
console.log(theme); // false (respects the user setting)

Using || here would incorrectly turn it into true.

3. User Input Handling

A user might leave a text field empty intentionally. With ??, you can respect that choice.

let userInput = "";
let value = userInput ?? "Default text";

console.log(value); // "" (user chose empty string, not replaced)

With ||, this would turn into "Default text" unexpectedly.

🎯 Final Thoughts

• Use || when you want to fall back on any falsy value.
• Use ?? when you want to preserve valid falsy values and only handle null/undefined.

In modern JavaScript, ?? is often the safer choice for handling defaults, especially with APIs, configs, and user input.

👉 Next time you’re about to write || for defaults, ask yourself: Do I really want to override 0, "", or false?
If not — reach for ??.