JavaScript has long had || for default values. But || has a blind spot. The ?? operator was introduced to fix it, precisely and without surprises.

The ?? operator returns its right-hand side only when the left-hand side is null or undefined. For any other value, including falsy ones like 0, "", or false, it returns the left-hand side unchanged.

      const result = value ?? defaultValue;

    

Read it as: "use value, unless it is null or undefined."

Why || Is Not Enough

The || operator returns its right-hand side for any falsy value. In JavaScript, falsy includes null and undefined, but also 0, "", false, and NaN. That distinction matters the moment your data legitimately contains those values.

A common real-world example: a configurable port number.

      // With ||
function createServer(port) {
  return port || 3000;
}

createServer(0);         // → 3000 — wrong, 0 is a valid port
createServer(undefined); // → 3000 — correct

    

      // With ??
function createServer(port) {
  return port ?? 3000;
}

createServer(0);         // → 0 — correct
createServer(undefined); // → 3000 — correct

    

The mental model: || asks "is this truthy?" while ?? asks "is this defined?".

Those are different questions.

Short-circuit Evaluation

Like || and &&, ?? short-circuits: if the left-hand side is not null or undefined, the right-hand side is never evaluated. This matters when the fallback has side effects such as a function call or an expensive computation.

      let count = 0;
const result = 42 ?? (++count);
console.log(count);  // → 0, right side was never evaluated

    

Chaining ??

Multiple ?? operators can be chained to walk through a list of candidates and pick the first non-null, non-undefined value:

      const firstName = null;
const lastName  = undefined;
const nickName  = 'SuperCoder';

const display = firstName ?? lastName ?? nickName ?? 'Anonymous';
console.log(display); // → 'SuperCoder'

    

With Optional Chaining ?.

?? and ?. were designed to work together. Optional chaining lets you traverse uncertain structures without throwing, and ?? provides the fallback at the end of the chain if anything along the way was missing.

      const user = {
  profile: { settings: null }
};

const theme    = user?.profile?.settings?.theme    ?? 'light';
const fontSize = user?.profile?.settings?.fontSize ?? 14;

console.log(theme);    // → 'light'
console.log(fontSize); // → 14

    

Without ?., accessing settings.theme on a null object would throw a TypeError. Without ??, a valid fontSize of 0 would incorrectly trigger the fallback. Both operators solve different halves of the same problem.

Conclusion

?? is not a drop-in replacement for ||. It is a more precise tool for a specific situation: providing a default when a value is genuinely absent, not merely falsy.

In any codebase where 0, empty strings, or false carry real meaning, such as configuration options, form inputs, or feature flags, reaching for ?? over || is the right call. It makes intent explicit, and intent is what separates readable code from clever code.