Modern JavaScript (ES2020)

Optional Chaining (?.)

Access nested properties safely - no more 'cannot read property' errors!

Find videos you like?

Save to resource drawer for future reference!

What is Optional Chaining?

The ?. operator is like a safety net for property access! Instead of throwing an error when you try to access a property on null orundefined, it simply returns undefined. No more crashes!

Problem Solved!

Before ES2020, accessing nested properties required lengthy checks likeobj && obj.prop && obj.prop.nested. Now just use obj?.prop?.nested!

🔗Three Ways to Use ?.

📦

obj?.prop

Access object properties safely

Returns undefined if obj is null/undefined

📋

arr?.[index]

Access array elements safely

Works with bracket notation

🔧

func?.()

Call functions safely

Only calls if function exists

Example 1: Safe Property Access

Access deeply nested properties without errors

javascript

code

DarkEditable

// Without optional chaining (Old way)
const user = null;

// ❌ This throws an error!
// const name = user.profile.name;
// TypeError: Cannot read property 'profile' of null

// Ugly workaround
const name1 = user && user.profile && user.profile.name;
console.log(name1);  // undefined (safe, but verbose!)

// With optional chaining (New way)
const name2 = user?.profile?.name;
console.log(name2);  // undefined (safe and clean!)

// Real-world example: API response
const apiResponse = {
  data: {
    user: {
      name: 'Alice',
      address: {
        city: 'NYC'
        // street is missing!
      }
    }
  }
};

// Safe access to nested properties
console.log(apiResponse?.data?.user?.name);
// "Alice"

console.log(apiResponse?.data?.user?.address?.city);
// "NYC"

console.log(apiResponse?.data?.user?.address?.street);
// undefined (no error!)

console.log(apiResponse?.data?.posts?.length);
// undefined (posts doesn't exist, no error!)

// Works with arrays too
const users = null;
console.log(users?.[0]?.name);
// undefined (safe!)

Console Output

Click "Run Code" to see output here...

Example 2: Optional Function Calls

Safely call functions that might not exist

javascript

code

DarkEditable

// Optional method calls
const user = {
  name: 'Bob',
  greet() {
    return `Hello, I'm ${this.name}`;
  }
  // sayGoodbye is missing!
};

// Call existing method
console.log(user.greet?.());
// "Hello, I'm Bob"

// Try to call non-existent method
console.log(user.sayGoodbye?.());
// undefined (no error!)

// Without ?. this would crash:
// user.sayGoodbye();  // ❌ TypeError!

// Real-world: Callbacks
function processData(data, onSuccess, onError) {
  try {
    const result = data * 2;
    onSuccess?.(result);  // Only call if provided
  } catch (error) {
    onError?.(error);     // Only call if provided
  }
}

processData(5, (result) => console.log('Result:', result));
// Result: 10
// No error even though onError wasn't provided!

// Array access with optional chaining
const config = {
  settings: null
};

const theme = config.settings?.[0]?.theme;
console.log(theme);  // undefined

// Combining with nullish coalescing (??)
const defaultTheme = config.settings?.[0]?.theme ?? 'light';
console.log(defaultTheme);  // 'light' (fallback value)

Console Output

Click "Run Code" to see output here...

When to Use Optional Chaining

✅ Use When

• Accessing optional API data
• Calling optional callbacks
• Deep nested object access
• User-provided config objects
• Properties might be null/undefined

⚠️ Don't Overuse

• Don't hide actual bugs
• Properties that should exist
• Use proper validation instead
• When you need to know about errors
• Required properties

Key Takeaways

🔗

Safe Access

Returns undefined instead of throwing errors

✨

Clean Code

Replaces lengthy && chains

🎯

Three Forms

?. ?.[] ?.() for props, arrays, functions

💡

ES2020

Modern JavaScript - widely supported now

Previous Topic

Mutation Observer

Watching for changes to the DOM tree.

Next Topic

Nullish Coalescing

?? operator for default values with null/undefined (ES2020).

Ask a Question

Have a question about Optional Chaining? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.