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.

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"

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.