JavaScript Optional Chaining & Nullish Coalescing

The problem before optional chaining

Accessing properties on nested objects requires checking every intermediate value. Before optional chaining, even one null or undefined in the chain would crash with a TypeError.

const user = {
  profile: {
    address: {
      city: 'Mumbai'
    }
  }
}
 
// Safe access before optional chaining — verbose and error-prone
const city = user && user.profile && user.profile.address && user.profile.address.city
 
// If any API response is incomplete:
const incompleteUser = { profile: null }
const city2 = incompleteUser.profile.address.city
// TypeError: Cannot read properties of null (reading 'address')

Optional chaining (?.) — the short-circuit operator

The ?. operator evaluates the left side. If it is null or undefined, it short-circuits and returns undefined without evaluating the right side. If it has a value, evaluation continues normally.

const user = {
  profile: {
    address: { city: 'Mumbai' }
  }
}
 
// Optional chaining — clean and crash-safe
const city = user?.profile?.address?.city
console.log(city)   // 'Mumbai'
 
// When any part of the chain is null/undefined — returns undefined, no crash
const incompleteUser = { profile: null }
const city2 = incompleteUser?.profile?.address?.city
console.log(city2)   // undefined — no TypeError ✓

Optional chaining works in four forms:

// 1. Property access
user?.profile?.address
 
// 2. Bracket notation — dynamic property names
user?.settings?.['theme-color']
const key = 'firstName'
user?.profile?.[key]
 
// 3. Method calls — only calls the method if it exists
user?.getAddress?.()   // calls getAddress() if it exists
                       // returns undefined if user or getAddress is null/undefined
 
// 4. Optional function call — for when the value itself might not be a function
const callback = null
callback?.()           // returns undefined — no TypeError
const valid = () => 42
valid?.()              // returns 42 — called normally

Optional chaining with method calls — the common pitfall

The position of ?. matters. It checks whether the thing immediately to its left is null or undefined.

const user = {
  getName: null,
  getAddress: function() { return null },
}
 
// Correct: checks if getName exists before calling it
user?.getName?.()    // undefined — getName is null, short-circuits before call
 
// Wrong: checks if user exists, then tries to call getName (which is null)
user?.getName()      // TypeError: user.getName is not a function
// Because: user exists, so ?. passes — then getName() is called on null
 
// Chaining into a method's return value
user?.getAddress?.()?.city   // undefined — getAddress() returns null, ?. handles it

Nullish coalescing (??) — the smarter fallback

The ?? operator returns its right-hand side only when its left-hand side is null or undefined. All other values, including false, 0, NaN, and "", pass through unchanged.

// ?? — only triggers on null/undefined
console.log(null      ?? 'default')    // 'default'
console.log(undefined ?? 'default')    // 'default'
console.log(0         ?? 'default')    // 0       — 0 is a valid value
console.log(false     ?? 'default')    // false   — false is a valid value
console.log('')       ?? 'default')    // ''      — empty string is valid
console.log(NaN       ?? 'default')    // NaN     — passes through

The critical difference from ||:

// || triggers on any falsy value — WRONG for these cases
const port        = userInput.port     || 3000   // bug: port 0 becomes 3000
const isEnabled   = settings.enabled  || true    // bug: false becomes true
const name        = response.name     || 'Guest' // bug: empty string "" becomes 'Guest'
const count       = data.count        || 0       // bug: redundant but can shadow 0
 
// ?? triggers only on null/undefined — CORRECT
const port2       = userInput.port     ?? 3000   // 0 stays 0 ✓
const isEnabled2  = settings.enabled  ?? true    // false stays false ✓
const name2       = response.name     ?? 'Guest' // '' stays '' ✓
const count2      = data.count        ?? 0       // 0 stays 0 ✓

Combining ?. and ?? — the most common real-world pattern

Optional chaining and nullish coalescing are designed to work together. ?. safely navigates, ?? provides the fallback for when navigation produces nothing.

const config = {
  theme: {
    dark: {
      background: '#1a1a1a'
    }
  }
}
 
// Get value or fallback to default
const bg       = config?.theme?.dark?.background ?? '#ffffff'
const fontSize = config?.theme?.dark?.fontSize   ?? 16
 
// API response handling
const users    = response?.data?.users   ?? []
const total    = response?.meta?.total   ?? 0
const userName = response?.user?.name    ?? 'Anonymous'
 
// Event handling
const value    = event?.target?.value?.trim() ?? ''

Logical assignment operators — ??=, ||=, &&=

ES2021 introduced three logical assignment operators that combine assignment with logical evaluation. They are shorthand for common conditional assignment patterns.

// ??= — nullish assignment
// Assigns right side only if left side is null or undefined
let a = null
a ??= 'default'
console.log(a)    // 'default' — was null, so assigned
 
let b = 0
b ??= 'default'
console.log(b)    // 0 — was not null/undefined, unchanged
 
// Equivalent to:
a = a ?? 'default'
 
// ||= — logical OR assignment
// Assigns right side if left side is falsy
let c = ''
c ||= 'fallback'
console.log(c)    // 'fallback' — '' is falsy, so assigned
 
// &&= — logical AND assignment
// Assigns right side only if left side is truthy
let d = 'Alice'
d &&= d.toUpperCase()
console.log(d)    // 'ALICE' — was truthy, so assigned
 
let e = null
e &&= e.toUpperCase()
console.log(e)    // null — was falsy, so unchanged (no crash)

These operators are lazy — the right side is never evaluated if the assignment won't happen. This is important for performance and for avoiding side effects.

Short-circuit evaluation — when ?. stops evaluating

Optional chaining's short-circuit is complete — once it encounters null or undefined, the entire remaining expression to the right is not evaluated. This prevents side effects in the bypassed code.

let count = 0
const obj = null
 
obj?.method(count++)   // count++ never runs — short-circuited
console.log(count)     // 0 — side effect was prevented
 
// Delete with optional chaining
delete obj?.property   // no-op if obj is null — does not throw
 
// With arrays
const arr = null
arr?.[0]               // undefined — no TypeError
arr?.map(x => x * 2)  // undefined — map is never called

The ?. with || trap — the most common interview output question

When combining ?. with ||, the precedence and short-circuit interactions produce non-obvious output. This appears frequently as an output prediction question.

const obj = { value: 0 }
 
console.log(obj?.value || 'missing')    // 'missing' — value is 0 (falsy), || kicks in
console.log(obj?.value ?? 'missing')    // 0         — 0 is not null/undefined, ?? does not kick in
 
const obj2 = null
console.log(obj2?.value || 'missing')   // 'missing' — undefined is falsy
console.log(obj2?.value ?? 'missing')   // 'missing' — undefined triggers ??

Both produce 'missing' when the object is null — but they differ when the value is 0, false, or ''. Using || instead of ?? when accessing values that can legitimately be falsy is a real production bug.