How to Use Optional Chaining in JavaScript

When you access a deeply nested property in JavaScript, JavaScript gives an error like Cannot read property 'x' of undefined.

That’s frustrating, right? 😖

Optional chaining (?.) solves this problem. It allows you to safely access deeply nested values without worrying about breaking your code when something in the chain is null or undefined.

In this post, you’ll learn how Optional Chaining works and how to safely access deeply nested properties without runtime errors.

Before we get started, don’t forget to subscribe to my newsletter!
Get the latest tips, tools, and resources to level up your web development skills delivered straight to your inbox. Subscribe here!

Now let’s jump right into it!🚀

What is Optional Chaining?

Optional chaining is a feature in JavaScript introduced in ES2020 that lets you access properties of an object without throwing an error, even if they are null or undefined.

Syntax:

object?.property;
object?.[expression];
object?.method?.();

If the left-hand side is null or undefined, it short-circuits and returns undefined, instead of throwing an error.

Why Use Optional Chaining?

Before optional chaining, accessing deeply nested missing properties could crash your app.

const user = {};
 
console.log(user.address.country); // Error: Cannot read property 'country' of undefined

Now with optional chaining:

console.log(user.address?.country); // Output: undefined

👉 If you’re new to JavaScript, check out my beginner-friendly tutorials over on Learnify, my curated platform to help you learn JavaScript step by step, with examples and simple explanations.

Examples of Optional Chaining

Accessing a Nested Property

Without optional chaining:

const user = {
  name: "Shefali",
  address: {
    country: "India",
  },
};
 
console.log(user.address.country); // Output: India
console.log(user.profile.bio); // Uncaught TypeError: user.profile is undefined

With optional chaining:

const user = {
  name: "Shefali",
  address: {
    country: "India",
  },
};
 
console.log(user.address?.country); // Output: India
console.log(user.profile?.bio); // Output: undefined

Accessing an Array Item Safely

Without optional chaining:

const users = null;
 
console.log(users[0]); // Uncaught TypeError: users is null

With optional chaining:

const users = null;
 
console.log(users?.[0]); // Output: undefined

Calling a Method Safely

Without optional chaining:

const user = {
  sayHi: () => console.log("Hello!"),
};
 
user.sayHi(); // Output: Hello!
user.sayBye(); // Uncaught TypeError: user.sayBye is not a function

With optional chaining:

const user = {
  sayHi: () => console.log("Hello!"),
};
 
user.sayHi?.(); // Output: Hello!
user.sayBye?.(); // Output: undefined (no error thrown)

If the method doesn’t exist, JavaScript won’t throw an error, it just skips the call.

API Responses

Without optional chaining:

const apiResponse = {
  data: {
    user: {
      profile: { name: "Shefali" },
    },
  },
};
 
console.log(apiResponse.data.user.profile.name); // Output: 'Shefali'
console.log(apiResponse.data.user.settings.theme); // Uncaught TypeError: apiResponse.data.user.settings is undefined

With optional chaining:

const apiResponse = {
  data: {
    user: {
      profile: { name: "Shefali" },
    },
  },
};
 
console.log(apiResponse.data?.user?.profile?.name); // Output: 'Shefali'
console.log(apiResponse.data?.user?.settings?.theme); // Output: undefined

Optional Chaining with Nullish Coalescing

You can combine optional chaining with the nullish coalescing ?? operator to provide a default value.

For example:

const user = {};
 
const bio = user.profile?.bio ?? "No bio available!";
 
console.log(bio); // Output: No bio available!

If profile or bio doesn’t exist, it returns the fallback.

Things to Keep in Mind

• You can only use ?. on something that might be null or undefined. If the object exists but the property doesn’t, it still returns undefined, and that’s fine!
• Don’t overuse it. Optional chaining is powerful, but you should still validate your data properly in most cases.

That’s all for today!

If you enjoy my work and want to support what I do:

👉 Become a Patreon supporter
👉 Or buy me a coffee

Every small gesture keeps me going! 💛

Follow me on X (Twitter) to get daily web development tips & insights.