Optional chaining & nullish coalescing

12345678910

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

// Before optional chaining
const handle = data && data.user && data.user.profile && data.user.profile.handle;
console.log(handle);   // undefined

// Or with try/catch — even uglier
let h;
try { h = data.user.profile.handle; } catch { h = undefined; }
console.log(h);

1234567891011

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

// Optional chaining
const handle = data?.user?.profile?.handle;
console.log(handle);   // undefined

// On method calls too
const onChange = obj?.callback?.(); // calls only if callback exists

// On array access
const first = arr?.[0];

12345678910

// || picks the right side for ANY falsy value — wrong for 0 / "" / false
console.log(0 || 10);            // 10  (probably not what you wanted!)
console.log("" || "default");    // 'default'
console.log(false || true);      // true

// ?? picks the right side ONLY for null / undefined
console.log(0 ?? 10);            // 0  ✓
console.log("" ?? "default");    // ''  ✓
console.log(null ?? "fallback"); // 'fallback'
console.log(undefined ?? 42);    // 42

1234567

function getDisplay(user) {
    return user?.profile?.displayName ?? "Anonymous";
}

console.log(getDisplay({}));                                  // Anonymous
console.log(getDisplay({ profile: { displayName: "Alice" } })); // Alice
console.log(getDisplay(null));                                 // Anonymous