Optional Chaining & Nullish Operators

Safe property access with ?., nullish coalescing with ??, nullish assignment ??=, and logical assignment — eliminating null checks from modern JavaScript.

What it is, in plain English: Optional chaining (?.) lets you read a property deep in an object chain without checking if each level exists — if any part is null or undefined, the expression short-circuits and returns undefined instead of throwing. The nullish coalescing operator (??) returns the right side only when the left side is null or undefined — unlike || which also triggers on 0, '', and false.

Where this bites you

?. doesn't make a missing value disappear; it turns it into undefined. Anything you compare with undefined afterwards is usually false. So cart?.items?.length === 0 is true for an empty array but false when there's no array at all, and the code skips the "empty" branch for exactly the user who has nothing yet.

function render(cart) {
  if (cart?.items?.length === 0) {
    return "Your cart is empty";
  }
  return `You have ${cart?.items?.length} item(s)`;
}

console.log(render({ items: [] }));   // a cart with no items
console.log(render({}));              // a new user: no items array yet
// Your cart is empty
// You have undefined item(s)

Safer code with fewer null checks

Two of the most common bugs in JavaScript involve null and undefined: trying to access a property on something that doesn't exist, and using || for defaults when 0 or "" should be valid values. Three operators fix both problems cleanly.

?. — Optional chaining

Read a deeply nested property without crashing if something in the chain is missing.

const order = {
  id: 1,
  customer: {
    name: "Alice",
    address: {
      city: "Mumbai"
    }
  }
};

// Without ?.  — you need a chain of checks:
const city1 = order && order.customer && order.customer.address
              && order.customer.address.city;

// With ?. — one clean expression:
const city2 = order?.customer?.address?.city;
console.log(city2);  // "Mumbai"

// If any step is missing — returns undefined, no crash:
console.log(order?.billing?.address?.city);  // undefined
// Without ?.: TypeError: Cannot read properties of undefined

// ?. on method calls:
const user = { getName: () => "Bob" };

console.log(user.getName?.());      // "Bob"
console.log(user.getEmail?.());     // undefined (method doesn't exist — no crash)

// ?. on array access:
const first = null;
console.log(first?.[0]);   // undefined (not: TypeError: Cannot read properties of null)

?? — Nullish coalescing (the better default operator)

Use ?? instead of || when 0, "", or false are valid values that should NOT trigger the default.

// The || problem:
function setVolume(vol) {
  const volume = vol || 50;  // BUG: volume=0 becomes 50!
  console.log("Volume:", volume);
}
setVolume(0);   // Volume: 50  ← wrong!
setVolume(80);  // Volume: 80  ← correct

// The ?? fix:
function setVolumeFix(vol) {
  const volume = vol ?? 50;  // Only defaults when vol is null/undefined
  console.log("Volume:", volume);
}
setVolumeFix(0);      // Volume: 0   ← correct
setVolumeFix(80);     // Volume: 80  ← correct
setVolumeFix(null);   // Volume: 50  ← correct (null → use default)
setVolumeFix(undefined); // Volume: 50 ← correct

Combining ?. and ??

const config = {
  server: {
    port: 0,           // 0 is a valid port
    timeout: null,     // null means "not set"
  }
};

const port    = config?.server?.port    ?? 3000;   // 0 (not 3000 — 0 is valid)
const timeout = config?.server?.timeout ?? 5000;   // 5000 (null → default)
const host    = config?.server?.host    ?? "localhost"; // "localhost" (undefined → default)

console.log(port, timeout, host);  // 0  5000  "localhost"

The config example above shows the habit that prevents this: follow ?. with ?? so a missing value becomes a real default before you compare it or print it. Work out the value once, then use it:

function render(cart) {
  const count = cart?.items?.length ?? 0;   // missing counts as zero
  if (count === 0) {
    return "Your cart is empty";
  }
  return `You have ${count} item(s)`;
}

console.log(render({ items: [] }));
console.log(render({}));
// Your cart is empty
// Your cart is empty

Try It Yourself

// Optional chaining (?.) — safe property access
const user = {
  name: "Alice",
  address: {
    city: "Mumbai",
    pin: "400001"
  },
  getEmail: () => "alice@example.com"
};

// Without ?. — verbose and error-prone:
const city1 = user && user.address && user.address.city;

// With ?. — clean:
console.log(user?.address?.city);    // "Mumbai"
console.log(user?.phone?.number);    // undefined (no error!)
console.log(user?.getEmail?.());     // "alice@example.com"
console.log(user?.getPosts?.());     // undefined (method doesn't exist)

// On arrays:
const users = [{ name: "Bob" }, null, { name: "Carol" }];
console.log(users[0]?.name);   // "Bob"
console.log(users[1]?.name);   // undefined (not an error)

// Nullish coalescing (??) — default when null/undefined
const score = 0;
console.log(score || "no score");    // "no score" ← WRONG (0 is falsy)
console.log(score ?? "no score");    // 0          ← CORRECT

const name = null;
console.log(name ?? "Anonymous");    // "Anonymous"
console.log(name || "Anonymous");    // "Anonymous" (same here)

// The difference:
console.log(0  ?? "default");   // 0      — ?? only cares about null/undefined
console.log(0  || "default");   // "default" — || triggers on all falsy values
console.log("" ?? "default");   // ""     — empty string is NOT null/undefined
console.log("" || "default");   // "default"

// Nullish assignment (??=) — assign only if null/undefined
let config = { timeout: 0, retries: null };
config.timeout  ??= 5000;  // 0 is not null — stays 0
config.retries  ??= 3;     // null → assigned 3
console.log(config);  // { timeout: 0, retries: 3 }

Assignment operators and advanced patterns

??= — Nullish assignment

// Assign only if the current value is null or undefined:
let a = null;
let b = 0;
let c = "hello";

a ??= "default";  // null → assigned
b ??= "default";  // 0 is not null/undefined → unchanged
c ??= "default";  // "hello" → unchanged

console.log(a, b, c);  // "default"  0  "hello"

// Common use: initialise cache entries
const cache = {};
function getOrSet(key, fn) {
  cache[key] ??= fn();  // only compute if not already cached
  return cache[key];
}

// Common use: default config object keys
function configure(options) {
  options.timeout  ??= 5000;
  options.retries  ??= 3;
  options.debug    ??= false;
  return options;
}
configure({ timeout: 0 });  // { timeout: 0, retries: 3, debug: false }

||= and &&= — Logical assignment

// ||= — assign if falsy (existing JS || semantics)
let username = "";
username ||= "Anonymous";   // "" is falsy → "Anonymous"

// &&= — assign only if truthy (both sides must be truthy)
let user = { name: "Alice", verified: true };
user.verified &&= false;   // truthy → assign false
console.log(user.verified);   // false

user = null;
user &&= { name: "Bob" };   // null is falsy → skip
console.log(user);   // null (unchanged)

Short-circuit evaluation

// ?. short-circuits — the right side is NOT evaluated if left is null/undefined:
let sideEffect = 0;
const obj = null;
obj?.prop;                  // fine
obj?.[sideEffect++];        // sideEffect NOT incremented! (short-circuit)
console.log(sideEffect);   // 0

// This matters when the right side has expensive operations:
const result = maybeNull?.expensiveComputation?.();  // safe, no crash, no computation

Spec details and edge cases

Optional chaining spec (ECMA-262 §13.5.7)

The ?. operator introduces a new kind of reference called an Optional Chain. The base value is evaluated, and if it is null or undefined, the entire chain tail is skipped and the expression evaluates to undefined. The short-circuit covers the entire tail — not just the immediately following access:

// The short-circuit covers the entire remaining chain:
const obj = null;
console.log(obj?.a.b.c);     // undefined (not: Cannot read 'b' of undefined)
// The whole ".a.b.c" tail is skipped when obj is null

// But if obj is defined and a is null:
const obj2 = { a: null };
console.log(obj2?.a.b);      // TypeError: Cannot read 'b' of null
// ?. only checked obj2 — not obj2.a
// Use: obj2?.a?.b to guard further

?? vs || — the IsNullish abstract operation

The ?? operator checks the left operand using the abstract IsNullish operation — true only for null and undefined. The || operator uses ToBoolean, which is false for null, undefined, 0, NaN, "", and false. This is the key semantic difference.

// Mixing ?? and || requires explicit parentheses (SyntaxError otherwise):
// null ?? undefined || "default"  // SyntaxError
(null ?? undefined) || "default"  // "default"
null ?? (undefined || "default")  // "default"

// ??= spec: only assigns when [[Get]] returns null/undefined
// Uses the same IsNullish check — not ToBoolean

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.