?? vs || — The Default-Value Trap That Breaks Real Apps

const count = userInput || 10;

const count = 0 || 10;
console.log(count); // 10 ❌ — zero is a valid number!

false
0
""        // empty string
null
undefined
NaN

null
undefined

const page = searchParams.get("page") || 1;
// get("page") returns "0" → truthy string "0" ✅ fine
// but if page is numeric 0:
const pageNum = currentPage || 1; // 0 becomes 1 ❌

const nickname = user.nickname || "Anonymous";
// user wants blank display name → forced to "Anonymous" ❌

const enabled = settings.enabled || true;
// false (intentionally off) → becomes true ❌

function Badge({ count }: { count?: number }) {
  const display = count || "—";
  // count = 0 → shows "—" instead of 0 ❌
}

const pageNum = currentPage ?? 1;
const nickname = user.nickname ?? "Anonymous";
const enabled = settings.enabled ?? true;
const display = count ?? "—"; // still wrong for 0 — use explicit check:
const display = count != null ? count : "—";

// Show placeholder when name is empty, null, or undefined
const label = name.trim() || "Untitled";

// Enable feature unless explicitly disabled (false) — rare, but intentional
const showBanner = config.showBanner || true; // ❌ still wrong for false!

// Better for booleans:
const showBanner = config.showBanner ?? true;

// Guard before calling a function
callback && callback();  // short-circuit, not defaulting
if (!token) return;      // explicit check > operator magic

const title = post.title || "Draft"; // "" → "Draft" is probably what you want

// || stops at first truthy
0 || "" || "hello"   // "hello"
0 ?? "" ?? "hello"   // ""  (0 is not nullish, so ?? returns 0... wait)

0 ?? "" ?? "hello"   // 0 ✅ (first nullish check: 0 is not null/undefined → return 0)
null ?? "" ?? "hello" // "" ✅

// Common pattern: default chain
const port = process.env.PORT ?? 3000;
const theme = user.theme ?? system.theme ?? "light";

const x = a || b ?? c;  // ❌ SyntaxError without parentheses

const x = (a || b) ?? c;  // ✅
const x = a || (b ?? c);  // ✅ different meaning

console.log(0 || 42);    // 42
console.log(0 ?? 42);    // 0
console.log("" || "hi"); // "hi"
console.log("" ?? "hi"); // ""
console.log(null ?? 42); // 42
console.log(undefined || 42); // 42

Is 0, "", or false a valid value?
├── Yes → use ??
└── No  → || might be OK (e.g. empty string → placeholder)

Is it a number or boolean?
├── Yes → almost always ??
└── No  → think again about empty string cases