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,"", orfalseare treated as missing.
- With ??, onlynullandundefinedare treated as missing.
This makes ?? especially useful when:
- 
0is a valid count (e.g., items in a cart)
- 
""is a valid string (e.g., optional text fields)
- 
falseis 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 nullandundefined | ✅ 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)