Advanced JS Nullish Coalescing Full Tutorial

const count = 0;
 
// || treats 0 as falsy — returns fallback
const a = count || 10;   // 10 (wrong if 0 is a valid count)
 
// ?? treats 0 as a real value — keeps it
const b = count ?? 10;   // 0 (correct)

function greet(name) {
  const displayName = name ?? "Guest";
  return `Hello, ${displayName}!`;
}
 
greet("Alice");     // "Hello, Alice!"
greet(undefined);   // "Hello, Guest!"
greet(null);        // "Hello, Guest!"
greet("");          // "Hello, !" — empty string is NOT nullish
greet(0);           // "Hello, 0!" — 0 is NOT nullish

const config = {
  api: {
    timeout: 0,    // zero is a valid timeout
    retries: null, // null means "use default"
  },
};
 
const timeout = config?.api?.timeout ?? 3000; // 0 (kept, not nullish)
const retries = config?.api?.retries ?? 3;    // 3 (null triggers fallback)
const baseUrl = config?.api?.baseUrl ?? "http://localhost"; // "http://localhost"

function resolveTheme(user, system) {
  return (
    user?.preferences?.theme ??
    system?.defaultTheme ??
    "light"
  );
}
 
// Tries user preference first, then system default, then hardcoded fallback

function createConfig(overrides = {}) {
  return {
    host:    overrides.host    ?? process.env.HOST    ?? "localhost",
    port:    overrides.port    ?? process.env.PORT    ?? 3000,
    debug:   overrides.debug   ?? false,
    logLevel: overrides.logLevel ?? "info",
  };
}
 
// port: 0 is kept (not nullish)
createConfig({ port: 0 }); // { host: "localhost", port: 0, debug: false, logLevel: "info" }

// SyntaxError — ambiguous without explicit grouping
// const x = a || b ?? c;
 
// Must use parentheses
const x = (a || b) ?? c;
const y = a || (b ?? c);

const options = { timeout: 0, retries: null };
 
options.timeout ??= 5000; // 0 is not nullish — stays 0
options.retries ??= 3;    // null is nullish — becomes 3
options.debug   ??= false; // undefined is nullish — becomes false
 
console.log(options);
// { timeout: 0, retries: 3, debug: false }

function parseJSON(text, fallback = null) {
  try {
    return JSON.parse(text) ?? fallback;
  } catch {
    return fallback;
  }
}
 
parseJSON('{"a":1}');         // { a: 1 }
parseJSON('null', {});        // {} — JSON.parse("null") returns null
parseJSON('invalid', []);     // [] — catch returns fallback

function getInputValue(selector, defaultValue = "") {
  return document.querySelector(selector)?.value ?? defaultValue;
}

function normalizeProduct(raw) {
  return {
    id:          raw.id,
    name:        raw.name        ?? "Untitled Product",
    description: raw.description ?? "",
    price:       raw.price       ?? 0,        // 0 from API is kept
    stock:       raw.stock       ?? null,      // null means unknown
    tags:        raw.tags        ?? [],
    rating:      raw.rating      ?? undefined, // unrated
  };
}

class Cache {
  #data = new Map();
 
  get(key, computeFn) {
    let value = this.#data.get(key);
    if (value === undefined) {
      value = computeFn();
      this.#data.set(key, value);
    }
    return value ?? null; // distinguish between cached undefined and null
  }
}