JS Optional Chaining (?.) Syntax Complete Guide

const user = {
  name: "Alex",
  address: {
    street: "123 Main St",
    city: "Portland"
  }
};
 
const anotherUser = {
  name: "Jordan"
  // no address property at all
};
 
// This works fine
console.log(user.address.city); // "Portland"
 
// This crashes
console.log(anotherUser.address.city);
// TypeError: Cannot read properties of undefined (reading 'city')

// Old approach - verbose and hard to read
const city = anotherUser && anotherUser.address && anotherUser.address.city;
 
// Or with ternary
const city2 = anotherUser.address ? anotherUser.address.city : undefined;

const user = {
  name: "Jordan",
  profile: {
    bio: "Full-stack developer",
    social: {
      twitter: "@jordan_dev"
    }
  }
};
 
// Safe nested access
console.log(user.profile?.bio);           // "Full-stack developer"
console.log(user.profile?.social?.twitter); // "@jordan_dev"
console.log(user.settings?.theme);         // undefined (no crash)
console.log(user.settings?.theme?.color);  // undefined (no crash)

const logger = {
  info(msg) { console.log(`[INFO] ${msg}`); },
  warn(msg) { console.log(`[WARN] ${msg}`); }
};
 
// info exists, so it runs
logger.info?.("Application started");     // [INFO] Application started
 
// debug does NOT exist, returns undefined silently
logger.debug?.("Verbose output");         // undefined (no crash)
 
// Without optional chaining this would throw
// logger.debug("Verbose output"); // TypeError: logger.debug is not a function

const users = [
  { name: "Maya", greet() { return `Hi, I'm ${this.name}`; } },
  { name: "Alex" }  // no greet method
];
 
users.forEach(user => {
  const greeting = user.greet?.();
  console.log(greeting ?? "No greeting available");
});
// Hi, I'm Maya
// No greeting available

const translations = {
  en: { greeting: "Hello", farewell: "Goodbye" },
  es: { greeting: "Hola", farewell: "Adiós" }
};
 
const lang = "fr";
 
// Dynamic key that might not exist
console.log(translations[lang]?.greeting);  // undefined
console.log(translations["en"]?.greeting);  // "Hello"
 
// Useful with variables
function getTranslation(locale, key) {
  return translations[locale]?.[key] ?? "Translation missing";
}
 
console.log(getTranslation("es", "greeting")); // "Hola"
console.log(getTranslation("fr", "greeting")); // "Translation missing"

const data = {
  users: [
    { name: "Alice", scores: [95, 88, 92] },
    { name: "Bob" }  // no scores
  ]
};
 
// Safe array access
console.log(data.users?.[0]?.name);       // "Alice"
console.log(data.users?.[0]?.scores?.[1]); // 88
console.log(data.users?.[1]?.scores?.[0]); // undefined (no crash)
console.log(data.users?.[5]?.name);       // undefined (index out of bounds)

const config = {
  display: {
    theme: "dark"
    // no fontSize property
  }
};
 
// Optional chaining + nullish coalescing
const theme = config.display?.theme ?? "light";
const fontSize = config.display?.fontSize ?? 16;
const sidebar = config.layout?.sidebar ?? true;
 
console.log(theme);    // "dark" (found)
console.log(fontSize); // 16 (default)
console.log(sidebar);  // true (default)

const settings = { volume: 0, name: "" };
 
// || treats 0 and "" as falsy - WRONG defaults
console.log(settings.volume || 50);  // 50 (bug! 0 is valid)
console.log(settings.name || "Anonymous"); // "Anonymous" (bug!)
 
// ?? only triggers on null/undefined - CORRECT
console.log(settings.volume ?? 50);  // 0 (correct!)
console.log(settings.name ?? "Anonymous"); // "" (correct!)

// BAD - overuse hides bugs
const name = response?.data?.user?.profile?.name?.first;
// If 'first' is missing, is that a bug or expected?
 
// BETTER - chain only at the uncertainty boundary
const user = response?.data?.user;
if (user) {
  // Inside here, profile.name.first should exist
  // If it doesn't, a crash here reveals a data contract violation
  const firstName = user.profile.name.first;
}

function parseUserResponse(response) {
  const user = response?.data?.user;
 
  return {
    id: user?.id ?? null,
    name: user?.name ?? "Unknown User",
    email: user?.email ?? null,
    avatar: user?.profile?.avatar?.url ?? "/default-avatar.png",
    role: user?.permissions?.role ?? "viewer",
    lastLogin: user?.activity?.lastLogin
      ? new Date(user.activity.lastLogin)
      : null,
    tags: user?.metadata?.tags ?? []
  };
}
 
// Works with complete data
const full = parseUserResponse({
  data: {
    user: {
      id: 1,
      name: "Maya",
      email: "maya@example.com",
      profile: { avatar: { url: "/avatars/maya.jpg" } },
      permissions: { role: "admin" },
      activity: { lastLogin: "2026-03-01" },
      metadata: { tags: ["developer", "lead"] }
    }
  }
});
 
// Works with partial data
const partial = parseUserResponse({ data: { user: { id: 2, name: "Alex" } } });
 
// Works with empty response
const empty = parseUserResponse({});
console.log(empty.name); // "Unknown User"
console.log(empty.avatar); // "/default-avatar.png"

const user = {};
 
// SyntaxError - cannot use ?. for assignment
// user?.name = "Alex";
 
// Correct - check first, then assign
if (user) {
  user.name = "Alex";
}

const data = { count: 0, message: "" };
 
// These are NOT equivalent
data.count?.toString();  // "0" (count exists, just equals 0)
(data.count || 10).toString(); // "10" (0 is falsy, so falls through)

// Each ?. independently checks for null/undefined
const val = obj?.a?.b?.c;
// Equivalent to:
// obj == null ? undefined : obj.a == null ? undefined : obj.a.b == null ? undefined : obj.a.b.c