JavaScript Nullish Coalescing Guide

The nullish coalescing operator (??) provides a better way to handle default values when dealing with null or undefined.

Basic Syntax#

// ?? returns right-hand side when left is null or undefined
const value1 = null ?? 'default';     // 'default'
const value2 = undefined ?? 'default'; // 'default'
const value3 = 'hello' ?? 'default';   // 'hello'

// Compare with || (OR)
const a = '' || 'default';    // 'default' (empty string is falsy)
const b = '' ?? 'default';    // '' (empty string is NOT nullish)

const c = 0 || 100;    // 100 (0 is falsy)
const d = 0 ?? 100;    // 0 (0 is NOT nullish)

const e = false || true;   // true (false is falsy)
const f = false ?? true;   // false (false is NOT nullish)

Why Use Nullish Coalescing#

// Problem with || operator
const config = {
  port: 0,          // Valid port
  timeout: '',      // Intentionally empty
  debug: false,     // Intentionally false
  retries: null     // Not set
};

// || treats falsy values as "not set"
config.port || 3000;     // 3000 (wrong! 0 is valid)
config.timeout || '5s';  // '5s' (wrong! '' was intentional)
config.debug || true;    // true (wrong! false was intentional)
config.retries || 3;     // 3 (correct)

// ?? only falls back for null/undefined
config.port ?? 3000;     // 0 (correct!)
config.timeout ?? '5s';  // '' (correct!)
config.debug ?? true;    // false (correct!)
config.retries ?? 3;     // 3 (correct!)

With Optional Chaining#

const user = {
  name: 'John',
  settings: {
    theme: 'dark'
  }
};

// Combine ?. and ??
const theme = user?.settings?.theme ?? 'light';
// 'dark'

const language = user?.settings?.language ?? 'en';
// 'en'

// Deep nested access with defaults
const config = {};
const port = config?.server?.port ?? 3000;
// 3000

const host = config?.server?.host ?? 'localhost';
// 'localhost'

// Array access
const users = [];
const firstName = users?.[0]?.name ?? 'Guest';
// 'Guest'

Function Parameters#

// Default parameter values
function greet(name) {
  const displayName = name ?? 'Guest';
  return `Hello, ${displayName}!`;
}

greet('John');     // 'Hello, John!'
greet(undefined);  // 'Hello, Guest!'
greet(null);       // 'Hello, Guest!'
greet('');         // 'Hello, !' (empty string is not nullish)

// Compare with default parameters
function greetDefault(name = 'Guest') {
  return `Hello, ${name}!`;
}

greetDefault('John');     // 'Hello, John!'
greetDefault(undefined);  // 'Hello, Guest!' (same)
greetDefault(null);       // 'Hello, null!' (different!)

// Use both for complete coverage
function process(value = getDefault()) {
  // Default param handles undefined
  const result = value ?? fallbackValue;
  // ?? handles null passed explicitly
  return result;
}

Object Defaults#

// Setting object property defaults
function createUser(options) {
  return {
    name: options.name ?? 'Anonymous',
    age: options.age ?? 0,
    active: options.active ?? true,
    bio: options.bio ?? ''
  };
}

createUser({ name: 'John' });
// { name: 'John', age: 0, active: true, bio: '' }

createUser({ name: 'Jane', age: null, active: false });
// { name: 'Jane', age: 0, active: false, bio: '' }

// Merging with defaults
const defaults = {
  theme: 'light',
  fontSize: 14,
  showSidebar: true
};

function applyConfig(userConfig) {
  return {
    theme: userConfig.theme ?? defaults.theme,
    fontSize: userConfig.fontSize ?? defaults.fontSize,
    showSidebar: userConfig.showSidebar ?? defaults.showSidebar
  };
}

applyConfig({ theme: 'dark', fontSize: 0 });
// { theme: 'dark', fontSize: 0, showSidebar: true }

Nullish Coalescing Assignment#

// ??= assigns if left side is null or undefined
let a = null;
a ??= 'default';
console.log(a);  // 'default'

let b = 'existing';
b ??= 'default';
console.log(b);  // 'existing'

let c = '';
c ??= 'default';
console.log(c);  // '' (empty string kept)

let d = 0;
d ??= 100;
console.log(d);  // 0 (zero kept)

// Practical use: lazy initialization
const cache = {};

function getOrCompute(key, computeFn) {
  return cache[key] ??= computeFn();
}

getOrCompute('data', () => expensiveOperation());
// First call: computes and caches
// Second call: returns cached value

Chaining#

// Chain multiple fallbacks
const a = null;
const b = undefined;
const c = '';
const d = 'value';

const result = a ?? b ?? c ?? d;
// '' (c is not nullish, so it's returned)

// Different from ||
const result2 = a || b || c || d;
// 'value' (c is falsy, so continues to d)

// Practical example
function getValue() {
  return localStorage.getItem('value')
    ?? sessionStorage.getItem('value')
    ?? cookies.get('value')
    ?? defaultValue;
}

With Logical Operators#

// Cannot directly mix with && or || without parentheses
// const result = a || b ?? c;  // SyntaxError

// Use parentheses to clarify
const result1 = (a || b) ?? c;  // OK
const result2 = a || (b ?? c);  // OK

// Example
const value = null;
const fallback = 'fallback';
const override = false;

// Get value, then apply override
const final = (value ?? fallback) && !override;
// 'fallback' && true = 'fallback' (truthy but not useful)

// Better approach
const result = override ? null : (value ?? fallback);
// 'fallback'

Type Coercion#

// ?? doesn't coerce types
const a = null ?? 0;
console.log(a, typeof a);  // 0, 'number'

const b = undefined ?? '';
console.log(b, typeof b);  // '', 'string'

const c = null ?? false;
console.log(c, typeof c);  // false, 'boolean'

// vs || which can change types unexpectedly
const d = 0 || 'default';
console.log(d, typeof d);  // 'default', 'string' (type changed!)

const e = 0 ?? 'default';
console.log(e, typeof e);  // 0, 'number' (type preserved)

Common Use Cases#

// API response handling
async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  const data = await response.json();

  return {
    name: data.name ?? 'Unknown',
    email: data.email ?? 'N/A',
    avatar: data.avatar ?? '/default-avatar.png',
    bio: data.bio ?? '',
    followers: data.followers ?? 0
  };
}

// Configuration
const userConfig = loadUserConfig();
const config = {
  port: userConfig.port ?? process.env.PORT ?? 3000,
  host: userConfig.host ?? process.env.HOST ?? 'localhost',
  debug: userConfig.debug ?? process.env.DEBUG === 'true' ?? false
};

// DOM element properties
function getElementText(selector) {
  const element = document.querySelector(selector);
  return element?.textContent ?? 'Element not found';
}

// State management
function reducer(state, action) {
  switch (action.type) {
    case 'SET_VALUE':
      return {
        ...state,
        value: action.payload ?? state.value
      };
    default:
      return state;
  }
}

TypeScript Integration#

// TypeScript understands nullish coalescing
function process(value: string | null | undefined): string {
  return value ?? 'default';
  // Return type is string (not string | null | undefined)
}

// With optional properties
interface Config {
  port?: number;
  host?: string;
}

function createConfig(config: Config) {
  return {
    port: config.port ?? 3000,
    host: config.host ?? 'localhost'
  };
}
// Return type: { port: number; host: string }

// Strict null checks
function getValue(map: Map<string, string>, key: string): string {
  const value = map.get(key);
  return value ?? 'not found';
  // TypeScript knows value could be undefined
}

Comparison Summary#

// Summary of || vs ??

// Values treated as "empty" by ||:
// false, 0, -0, 0n, '', null, undefined, NaN

// Values treated as "empty" by ??:
// null, undefined (only these two!)

// Use || when:
// - Any falsy value should trigger default
// - You want "truthy or default" logic

// Use ?? when:
// - Only null/undefined should trigger default
// - 0, '', false are valid values
// - You want "nullish or default" logic

const examples = [
  { value: null,      '||': 'default', '??': 'default' },
  { value: undefined, '||': 'default', '??': 'default' },
  { value: false,     '||': 'default', '??': false },
  { value: 0,         '||': 'default', '??': 0 },
  { value: '',        '||': 'default', '??': '' },
  { value: NaN,       '||': 'default', '??': NaN },
];

Best Practices#

When to Use ??:
✓ Default values for optional config
✓ API response fallbacks
✓ User input defaults
✓ When 0, '', or false are valid

When to Use ||:
✓ When any falsy value means "use default"
✓ Boolean coercion is desired
✓ Legacy code compatibility

With Optional Chaining:
✓ Use both together: obj?.prop ?? default
✓ Chain from access to default naturally
✓ Handles deep nesting elegantly

Avoid:
✗ Mixing ?? with && or || without ()
✗ Using || when ?? is needed
✗ Forgetting null vs undefined semantics

The nullish coalescing operator (??) provides precise control over default values by only triggering for null and undefined, unlike || which triggers for any falsy value. Use it when zero, empty strings, or false are valid values. Combine it with optional chaining (?.) for elegant handling of potentially missing nested properties. The ??= assignment operator adds convenient lazy initialization patterns.