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 like0
,""
, orfalse
are treated as missing. - With
??
, onlynull
andundefined
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!)
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 handlenull
/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)