Modern JavaScript (ES2020)

Nullish Coalescing (??)

Smart default values - only for null/undefined, not falsy!

Find videos you like?

Save to resource drawer for future reference!

What is Nullish Coalescing?

The ?? operator is like a smart fallback system! Unlike || which treats0,'', andfalse as "no value",?? only uses the fallback fornull and undefined!

The Problem with ||

count || 10 returns 10 even when count is 0! With count ?? 10, 0 is kept because it's a valid value.

⚖️?? vs || Comparison

Value	`value \|\| 'default'`	`value ?? 'default'`
`null`	'default'	'default'
`undefined`	'default'	'default'
`0`	'default' ❌	0 ✅
`''` (empty string)	'default' ❌	'' ✅
`false`	'default' ❌	false ✅
`NaN`	'default' ❌	NaN ✅
`'hello'`	'hello'	'hello'

Example 1: Smart Defaults for Valid Values

Keep 0, false, and empty strings as valid values

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Example 2: Real-World Use Cases

Practical scenarios where ?? shines

javascript

code

DarkEditable

// 1. Configuration with 0 as valid value
const config = {
  port: 0,        // 0 is valid (auto-assign port)
  timeout: null,  // Not set
  retries: 3
};

const port = config.port ?? 8080;
console.log(port);  // 0 ✅ (not 8080!)

const timeout = config.timeout ?? 5000;
console.log(timeout);  // 5000 (null uses default)

// 2. API response with optional fields
function getUserDisplay(user) {
  const name = user.name ?? 'Anonymous';
  const age = user.age ?? 'Unknown';  // 0 would be kept!
  const posts = user.posts ?? 0;      // null becomes 0
  
  return `${name}, ${age} years, ${posts} posts`;
}

console.log(getUserDisplay({ name: 'Alice', age: 0, posts: null }));
// "Alice, 0 years, 0 posts" ✅

// 3. Form inputs with empty strings
function saveSettings(settings) {
  const theme = settings.theme ?? 'light';
  const lang = settings.language ?? 'en';
  const bio = settings.bio ?? '';  // Keep empty string if provided
  
  return { theme, lang, bio };
}

console.log(saveSettings({ theme: 'dark', language: '', bio: null }));
// { theme: 'dark', lang: '', bio: '' }
// Empty string for language is preserved!

// 4. Combining with optional chaining
const user = {
  profile: null
};

const city = user.profile?.address?.city ?? 'Not specified';
console.log(city);
// "Not specified"

// 5. Multiple fallbacks
const value = null ?? undefined ?? 0 ?? 'final';
console.log(value);
// 0 (first non-nullish value)

Console Output

Click "Run Code" to see output here...

When to Use Each

Use ?? When

✅ 0 is a valid value (counts, indices)
✅ Empty strings are valid
✅ false is meaningful
✅ Only null/undefined need defaults
✅ Strict fallback logic needed

Use || When

✅ Any falsy value needs default
✅ 0, '', false should use fallback
✅ Simple truthy/falsy logic
✅ Backward compatibility needed
✅ Less strict fallback logic

Key Takeaways

🎯

Nullish Only

Only null/undefined trigger fallback

✅

Valid Values

Keeps 0, false, '', NaN as valid

🔗

Pairs with ?.

Works great with optional chaining

💡

ES2020

Modern JavaScript - safer defaults

Previous Topic

Optional Chaining

?. operator for safe property access without null/undefined errors (ES2020).

Next Topic

BigInt

Working with arbitrarily large integers beyond Number.MAX_SAFE_INTEGER (ES2020).

Ask a Question

Have a question about Nullish Coalescing? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.