Objects

How to Safely Access Nested Properties

Use optional chaining (?.) to safely access nested properties

Quick Answer (2024 ES6+ Way)

javascript

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

Live Example

javascript

const data = {
  user: {
    name: 'John',
    address: {
      city: 'NYC'
    }
  }
};

// Safe access
const city = data?.user?.address?.city;
console.log(city); // "NYC"

// Won't throw error
const zip = data?.user?.address?.zipCode;
console.log(zip); // undefined

// With method calls
const result = user?.getName?.();

// With arrays
const firstItem = items?.[0]?.name;

Common Variations

Nullish Coalescing

javascript

const value = obj?.prop ?? 'default';
// Uses 'default' only if null or undefined

Combined

javascript

const name = user?.profile?.name ?? 'Anonymous';

❌ Don't Do This (Outdated Way)

Avoid nested conditionals for property access

javascript

// DON'T DO THIS
var city;
if (data && data.user && data.user.address) {
  city = data.user.address.city;
}

Browser Support

✓ Works in all modern browsers (ES2020+)

#objects#optional-chaining#safe-access