Optional Chaining (.?) in JS — Write Shorter & Safer Code!

shreya joshi — Thu, 26 Jun 2025 09:44:50 +0000

Handling undefined or null checks in JavaScript used to mean a bunch of messy if statements or long && chains. But ES2020 introduced some game-changing operators — Optional Chaining (?.) — to help you write shorter ✏️, safer 🛡️, and more expressive code.

Optional chaining is a new operator in JavaScript that lets you safely access deeply nested properties or call functions — even if some parts of the path are null or undefined.

No more "Cannot read property of undefined" errors! 🎉

📜 Content

⚠️ The Problem
🤔 Optional Chaining - the Solution
🎮 Three Syntaxes
🔑Key Difference Before & After Optional Chaining
🧐 Reference
🎯 Wrapping Up

1. ⚠️ The Problem

Before optional chaining, you had to do this:

let theme;
if (user && user.profile && user.profile.settings) {
  theme = user.profile.settings.theme;
}

Or worse, string together checks with &&:

const theme = user && user.profile && user.profile.settings && user.profile.settings.theme;

That's verbose, ugly, and prone to mistakes!

2. 🤔 Optional Chaining - the Solution

Before optional chaining, we had to do a lot of manual checks like this:

❌ Without ?.: (Old way)

const user = null;

let city;
if (user && user.address && user.address.city) {
  city = user.address.city;
} else {
  city = undefined;
}
// This is verbose and error-prone!

✅ With ?.: (New way)

const user = null;
const city = user?.address?.city; // 🎯 city = undefined

💡 What happens?
If user is null, JavaScript stops and returns undefined immediately — without throwing an error.
🎉 No extra if checks needed!

3. 🎮 Three Syntaxes

obj?.prop       // 🏷️ Access a property
obj?.[expr]     // 🎯 Access a dynamic property
func?.(args)    // 📞 Call a function if it exists

Imagine we have this user object:

const user = {
  profile: {
    username: "coder123",
    settings: {
      theme: "dark" 🖤
    }
  },
  greet(name) {
    return `Hello, ${name}!`; 👋
  }
};

1️⃣ Accessing Properties (`obj?.prop`)

Safely get a nested property:

// 🎯 Safe: returns "dark"
const theme = user?.profile?.settings?.theme;

// 😮‍💨 If user.profile is missing, returns undefined — no error

2️⃣ Accessing Dynamic Properties (`obj?.[expr]`)

Safely access a property by a dynamic key:

const key = "username"; 🔑
const username = user?.profile?.[key]; // 🎯 returns "coder123"

// 🚀 No errors even if profile is null or key is missing!

3️⃣ Calling Functions (`func?.(args)`)

Safely invoke a function if it exists:

// 📞 Safe function call
const greeting = user?.greet?.("Alice"); // 🎯 "Hello, Alice!"

// ❌ If greet is missing or undefined? -> No crash — returns undefined

4. 🔑 Key Difference Before & After Optional Chaining

📜 Without `?.`	✨ With `?.`
Nested `if` or `&&` checks	One short expression
Verbose & error-prone	Clean & safe
Throws errors if missing	Returns `undefined`

5. 🧐 Reference

More on this topic in the official docs — check out:

👉 MDN Docs: Optional Chaining (?.)

🎯 Wrapping Up

That's all for today! 🎉

💜 Thanks for reading — I hope you learned something new!

If you have any questions, please reach out at: shreyajoshi.work@gmail.com

☕ Support My Work

If you found this post helpful, here's how you can support my work:

Follow me — I share daily web dev tips & insights.

Keep coding & happy learning! 🎉

Forem: shreya joshi