JS Nullish Coalescing Operator (??) Full Guide

function createPlayer(name, score, active) {
  return {
    name: name || "Anonymous",
    score: score || 100,
    active: active || true
  };
}
 
// Looks correct, but has bugs
const player = createPlayer("", 0, false);
console.log(player);
// { name: "Anonymous", score: 100, active: true }
// BUG: empty string, 0, and false were all valid inputs!

function createPlayer(name, score, active) {
  return {
    name: name ?? "Anonymous",
    score: score ?? 100,
    active: active ?? true
  };
}
 
const player = createPlayer("", 0, false);
console.log(player);
// { name: "", score: 0, active: false }
// Correct! All valid inputs preserved

function applyConfig(userConfig) {
  const config = {
    volume: userConfig.volume ?? 75,
    brightness: userConfig.brightness ?? 100,
    muted: userConfig.muted ?? false,
    username: userConfig.username ?? "Guest",
    retryCount: userConfig.retryCount ?? 3
  };
  return config;
}
 
// User explicitly wants volume at 0 and muted true
const result = applyConfig({ volume: 0, muted: true, username: "" });
console.log(result);
// { volume: 0, brightness: 100, muted: true, username: "", retryCount: 3 }
// All user values preserved, only missing ones get defaults

// Default params only trigger on undefined, NOT null
function greet(name = "World") {
  console.log(`Hello, ${name}!`);
}
greet(null); // "Hello, null!" - default not triggered
 
// ?? handles both null and undefined
function greetBetter(name) {
  const safeName = name ?? "World";
  console.log(`Hello, ${safeName}!`);
}
greetBetter(null);      // "Hello, World!"
greetBetter(undefined); // "Hello, World!"
greetBetter("");        // "Hello, !"  - empty string preserved

const userTheme = null;
const savedTheme = undefined;
const systemTheme = "dark";
const defaultTheme = "light";
 
const theme = userTheme ?? savedTheme ?? systemTheme ?? defaultTheme;
console.log(theme); // "dark" (first non-nullish value)

const response = {
  data: {
    user: {
      preferences: {
        theme: "dark"
      }
    }
  }
};
 
// Safe access + default in one line
const theme = response?.data?.user?.preferences?.theme ?? "light";
const lang = response?.data?.user?.preferences?.language ?? "en";
const fontSize = response?.data?.user?.preferences?.fontSize ?? 16;
 
console.log(theme);    // "dark"
console.log(lang);     // "en"
console.log(fontSize); // 16

// SyntaxError - cannot mix without parentheses
// const result = a || b ?? c;
// const result = a && b ?? c;
 
// Correct - use parentheses to clarify intent
const result1 = (a || b) ?? c;  // Apply || first, then ??
const result2 = a || (b ?? c);  // Apply ?? first, then ||
const result3 = (a && b) ?? c;  // Apply && first, then ??

const options = {
  color: null,
  size: 0,
  label: ""
};
 
options.color ??= "blue";    // null -> assigned "blue"
options.size ??= 10;         // 0 -> NOT assigned (0 is not nullish)
options.label ??= "Default"; // "" -> NOT assigned ("" is not nullish)
options.icon ??= "star";     // undefined -> assigned "star"
 
console.log(options);
// { color: "blue", size: 0, label: "", icon: "star" }

function processFormData(formData) {
  // Parse raw form values with safe defaults
  const processed = {
    firstName: formData.get("firstName") ?? "",
    lastName: formData.get("lastName") ?? "",
    age: parseInt(formData.get("age")) || null,
    score: (() => {
      const raw = formData.get("score");
      const parsed = raw !== null ? Number(raw) : null;
      return Number.isNaN(parsed) ? null : parsed ?? 0;
    })(),
    newsletter: formData.get("newsletter") ?? "off",
    bio: formData.get("bio") ?? null
  };
 
  // Validate required fields
  const errors = [];
  if ((processed.firstName ?? "") === "") {
    errors.push("First name is required");
  }
  if ((processed.lastName ?? "") === "") {
    errors.push("Last name is required");
  }
 
  return { data: processed, errors, isValid: errors.length === 0 };
}

// Bug: discount of 0% gets replaced with 10%
const discount = userDiscount || 10;
 
// Fix: only default when truly missing
const discount = userDiscount ?? 10;

const value = 0;
 
// ?? only checks null/undefined
const a = value ?? "fallback"; // 0 (not nullish)
 
// If you need to check for falsy, use || or a ternary
const b = value || "fallback";          // "fallback"
const c = value ? value : "fallback";   // "fallback"

// Always wrap when mixing
const result = (config.debug || false) ?? defaultDebug;
// NOT: config.debug || false ?? defaultDebug (SyntaxError)