Advanced JS Optional Chaining Complete Guide

// Without optional chaining
const city = user && user.address && user.address.city;
 
// With optional chaining
const city = user?.address?.city;

const user = { profile: { name: "Alice" } };
 
console.log(user?.profile?.name);    // "Alice"
console.log(user?.address?.city);    // undefined (no error)
console.log(null?.profile?.name);    // undefined

const data = { "user-name": "Alice", items: ["a", "b", "c"] };
 
console.log(data?.["user-name"]);  // "Alice"
console.log(data?.["missing"]);    // undefined
 
// With dynamic keys
const key = "items";
console.log(data?.[key]?.[0]);    // "a"

const logger = {
  log: (msg) => console.log(msg),
};
 
logger?.log?.("hello");    // "hello"
logger?.warn?.("caution"); // undefined (warn does not exist, no error)

const result = null?.a.b.c.d(); // undefined — b, c, d() are never evaluated

let called = false;
const obj = null;
 
obj?.method(called = true);
console.log(called); // false — the argument expression was never evaluated

const theme = user?.settings?.theme ?? "light";
// If user, settings, or theme is missing: "light"
// If theme is "" (empty string) or 0: keeps the value (not nullish)

async function getUserCity(userId) {
  const response = await fetch(`/api/users/${userId}`);
  const data = await response.json();
 
  // Safe access through multiple optional levels
  return data?.user?.addresses?.[0]?.city ?? "Unknown";
}

function normalizeUser(apiResponse) {
  return {
    id:      apiResponse?.id ?? null,
    name:    apiResponse?.profile?.displayName ?? "Anonymous",
    email:   apiResponse?.contact?.email ?? null,
    avatar:  apiResponse?.profile?.images?.[0]?.url ?? "/default-avatar.png",
    role:    apiResponse?.permissions?.role ?? "viewer",
    joinedAt: apiResponse?.metadata?.createdAt ?? null,
  };
}

const users = [
  { name: "Alice", address: { city: "Portland" } },
  { name: "Bob" },
  null,
  { name: "Carol", address: { city: "Seattle" } },
];
 
const cities = users
  .filter(Boolean) // remove null entries
  .map(user => user?.address?.city ?? "No city")
  .filter(city => city !== "No city");
 
console.log(cities); // ["Portland", "Seattle"]

const config = { debug: { verbose: true } };
 
delete config?.debug?.verbose; // Works — deletes the property
delete config?.missing?.prop;  // No error — short-circuits

const obj = null;
 
// This DOES throw — you cannot assign through optional chaining
// obj?.name = "Alice"; // SyntaxError
 
// To conditionally assign, use an if check
if (obj != null) {
  obj.name = "Alice";
}

function getApiUrl(config) {
  return (
    config?.api?.url ??
    config?.api?.baseUrl ??
    process.env?.API_URL ??
    "http://localhost:3000"
  );
}

const width = document.querySelector(".sidebar")?.getBoundingClientRect()?.width ?? 0;

function processData(data, options) {
  const transformed = transform(data);
  options?.onSuccess?.(transformed); // call only if provided
  return transformed;
}
 
// Both are valid
processData(data, { onSuccess: result => console.log(result) });
processData(data, {}); // onSuccess not called, no error