DEV Community

Cover image for Understanding Default Operator (`||`) vs Nullish Coalescing Operator (`??`) in JavaScript
Alifa Ara Heya
Alifa Ara Heya

Posted on

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

#javascript #webdev #beginners #programming

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"
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

🔹 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)
Enter fullscreen mode Exit fullscreen mode

Another case:

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

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

✅ 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

Operator Treats as “missing” Preserves 0 / "" / false? Example Result
` ` All falsy values (0, "", false, null, undefined, NaN) ❌ No `0 \
{% raw %}?? Only null and undefined ✅ Yes 0 ?? 5 → 0

🌍 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!)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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 ??.

Top comments (0)