Optional Chaining, Nullish Coalescing, and Logical Assignment

## The distinction in one line `||` asks "is the left side falsy?". `??` asks "is the left side null or undefined?". Everything else follows from that. ## The two value sets JavaScript has exactly eight falsy values: `false`, `0`, `-0`, `0n` (the BigInt zero), `""`, `null`, `undefined` and `NaN`. Every other value — including `[]`, `{}`, `"0"` and `"false"` — is truthy. "Nullish" is a much smaller set: only `null` and `undefined`. Nothing else qualifies. `NaN` is not nullish. An empty string is not nullish. `false` is not nullish. So the values where the two operators disagree are precisely the falsy-but-not-nullish ones: `false`, `0`, `-0`, `0n`, `""` and `NaN`. ```js 0 || 50 // 50 0 ?? 50 // 0 '' || 'n/a' // 'n/a' '' ?? 'n/a' // '' false || true // true false ?? true // false NaN ?? 1 // NaN <- ?? does NOT rescue NaN null ?? 1 // 1 undefined ?? 1 // 1 ``` ## Why `||` was the historical idiom Before ES2020 there was no nullish test, so `const port = options.port || 3000` was the standard way to express "use the caller's value if they gave me one". It reads well and works fine as long as no legitimate value is falsy. The moment a legitimate value *is* falsy — a retry count of `0`, a `verbose: false` flag, an empty search string, a slider at zero — the default silently overrides the caller's explicit choice. These bugs are quiet: nothing throws, the program just behaves as if the setting was never provided. ```js function connect(opts = {}) { const retries = opts.retries || 3; // retries: 0 becomes 3 const debug = opts.debug || true; // ALWAYS true — the flag is unusable return { retries, debug }; } connect({ retries: 0, debug: false }); // { retries: 3, debug: true } ``` With `??` both values survive: ```js const retries = opts.retries ?? 3; // 0 stays 0 const debug = opts.debug ?? true; // false stays false ``` ## Short-circuit evaluation Both operators are short-circuiting: the right operand is an expression that is only evaluated if it is needed. `cached ?? computeExpensiveDefault()` does not call the function when `cached` is `0`, and `flag || warn()` does not call `warn` when `flag` is truthy. That matters whenever the right side has side effects or is costly. ## Distinguishing "absent" from "present but empty" The deeper point is that `??` lets you distinguish *missing* from *set to a falsy value*, which `||` cannot do. `undefined` typically means "the key was never provided" (a missing object property, a missing argument, an out-of-range array index). `null` usually means "explicitly set to no value". `??` treats both as absent and everything else as present. That is not always the rule you want. For a text input, an empty string usually *should* be treated as "the user typed nothing", so `||` — or better, an explicit check — is the correct semantic there. `??` is not a blanket replacement for `||`; it is the right tool when falsy-but-meaningful values exist. ## Relationship to default parameters Default parameter values and destructuring defaults use a third rule again: they trigger on `undefined` only, never on `null`. ```js function f(x = 5) { return x; } f(undefined); // 5 f(null); // null <- default does not apply const { a = 1 } = { a: null }; // a === null ``` So `??` sits between `||` (any falsy) and parameter defaults (`undefined` only). ## Syntax constraint `??` may not be mixed with `&&` or `||` in the same expression without parentheses — `a ?? b || c` is a SyntaxError, and you must write `(a ?? b) || c` or `a ?? (b || c)`. The language forces you to state which grouping you meant rather than guessing. ## What to say in an interview State the rule (nullish vs falsy), name the divergent values (`0`, `""`, `false`, `NaN`), give the classic bug (`count || 10` eating a deliberate zero), and add the judgment: `??` is the better default for numeric and boolean options, while an empty string often genuinely means "missing" and deserves an explicit check.