How do `||` and `??` differ when choosing a fallback value?

The difference is which left-hand values count as a reason to use the fallback. || returns the left value if it is truthy; otherwise, it returns the right value. That means a fallback can replace 0, false, or an empty string. [S1]

?? returns the fallback only when the left value is null or undefined. Other values, including 0 and an empty string, stay as they are. [S2]

A useful rule: use ?? when you mean “supply a value if this is missing.” Use || when you mean “supply a value if this is falsy.”

Assuming the fallback is 42, here’s a side-by-side comparison:

Left value     With ||       With ??
0              0 || 42 → 42   0 ?? 42 → 0
""             "" || 42 → 42  "" ?? 42 → ""
null           null || 42 → 42 null ?? 42 → 42
undefined      undefined || 42 → 42  undefined ?? 42 → 42
false          false || 42 → 42 false ?? 42 → false

|| falls back for any falsy left-hand value; ?? falls back only for null or undefined. [S1][S2] The examples show what each operator does, but they don’t decide which result your application should want—that depends on what the value means in your task.

If 0 is meaningful and only an unset value should trigger the default, ?? is the better fit. For example, assuming retryLimit is a setting where zero means “allow no retries” and 3 is the intended default when the setting is absent:

const retryLimit = settings.retryLimit ?? 3;

If settings.retryLimit is 0, the result remains 0. If it is null or undefined, the result is 3. [S2]

By contrast, settings.retryLimit || 3 would also replace 0 with 3, because || falls back for falsy values. [S1] That could erase a deliberate zero. The meaning of zero in this example is an assumption; check your own setting’s intended meaning before choosing.

Decide what an empty string represents in that specific case. If it is a valid, intentional value that should stay empty, use ?? so the fallback applies only to null or undefined. [S2] If an empty string should count as “no usable label” and be replaced, || matches that rule because it falls back for the empty string. [S1]

For example, assuming displayName is allowed to be deliberately blank in one feature, displayName ?? "Guest" preserves the blank value but uses "Guest" when the value is nullish. If your product instead treats a blank name as missing, displayName || "Guest" uses the fallback for that blank too. Write down the intended behavior first; the operator can’t decide what “missing” means for your application.