Hasan Zohdy

Posted on Nov 26, 2022

13-ES6++: Optional Chaining in Javascript

#javascript #es6 #esnext

Optional Chaining

Optional chaining is a new feature that was released in ES2020 (ES11). It is a new way to access properties of objects without having to check if the object is undefined or not. It is a very useful feature that can be used to avoid writing long if statements.

In simple words?

Optional chaining is a new way to access properties of objects without having to check if the object is undefined or not. It is a very useful feature that can be used to avoid writing long if statements.

How to use it?

The syntax for optional chaining is ?.. It is used to access properties of objects. It is used to avoid writing long if statements.

Let's see the old way first

const user = {
  name: "Hasan",
  age: 20,
  address: {
    city: "Cairo",
  },
};

if (user && user.address && user.address.city) {
  console.log(user.address.city);
}

Now let's see the new way

const user = {
  name: "Hasan",
  age: 20,
  address: {
    city: "Cairo",
  },
};

if (user?.address?.city) {
  console.log(user.address.city);
}

See? It is much shorter and easier to read.

So basically you don't have to check if the object is undefined or not. You can just use ?. to access properties of objects and its nested objects.

What if the object is undefined?

When using optional chaining, if the object is undefined, it will return undefined. So you don't have to check if the object is undefined or not.

const user = undefined;

console.log(user?.name); // undefined because user is undefined

What if the property doesn't exist?

Same exact situation as above. If the property doesn't exist, it will return undefined.

const user = {};

console.log(user?.name); // undefined because user.name doesn't exist

What if the property is null?

If the property is null, it will return null.

const user = {
  name: null,
};

console.log(user?.name); // null because user.name is null

What if the property is 0?

If the property is 0, it will return 0.

const user = {
  age: 0,
};

console.log(user?.age); // 0 because user.age is 0

What if the property is an empty string?

If the property is an empty string, it will return an empty string.

const user = {
  name: "",
};

console.log(user?.name); // "" because user.name is an empty string

Of course if you're sure that the object is defined you won't need to use the optional chaining feature. But if you're not sure, it is a very useful feature to use.

Is it possible to check with array indexes?

Yes, it is possible to check with array indexes. But you have to use brackets instead of dot notation.

const user = {};

console.log(user.friends?.[0]); // undefined because user.friends[0] doesn't exist

We can go over with more complex nested objects and arrays, for example i want to access the name of the first index in the friends array of the user object.

const user = {
  friends: [
    {
      name: "Ahmed",
    },
  ],
};

console.log(user.friends?.[0]?.name); // Ahmed

Here we defined the ?. before the array brackets and the dot notation.

Nesting functions

It is possible to use optional chaining with functions. For example, i want to call the getName function of the user object and that function returns an object that contains first and last properties.

const user = {
  getName: () => {
    return {
      first: "Hasan",
      last: "Zohdy",
    };
  },
};

console.log(user.getName?.()?.first); //Hasan
console.log(user.getName?.()?.middle); //undefined

You see, we added it just before the function parentheses, then we can continue our chain with dot notation.

💡 A Pro tip

Don't overuse optional chaining, if you're certain about an object that already exists, so don't use it with it, but if you're not sure with it or with its nested objects, then you can use it.

const user = {};

// ❌
console.log(user?.name); // undefined

// ✅
console.log(user.name); // undefined

Because we already knows that the user object is defined, so we don't need to use optional chaining with it.

const user = {};

// ❌
console.log(user?.address?.city); // undefined

// ✅
console.log(user.address?.city); // undefined

I know that the user already exists, but address may or may not exist, thus we need to use optional chaining with the address only and not with the user.

Should i use it in my code? 🤔

Of course you should, it will relieve you from writing long if statements and it will make your code much cleaner and easier to read.

A tip about feature usage

If your project uses a bundler like webpack or rollup, then you can use the optional chaining operator in your code. But if you are using a browser, then you should use a transpiler like babel to transpile your code to ES5. You can use babel repl to transpile your code.

🎨 Conclusion

Optional chaining is a new feature that was released in ES2020 (es9). It is a new way to access properties of objects without having to check if the object is undefined or not. It is a very useful feature that can be used to avoid writing long if statements and checks.

☕♨️ Buy me a Coffee ♨️☕

If you enjoy my articles and see it useful to you, you may buy me a coffee, it will help me to keep going and keep creating more content.

😍 Join our community

Join our community on Discord to get help and support (Node Js 2023 Channel).

📚 Bonus Content 📚

You may have a look at these articles, it will definitely boost your knowledge and productivity.

General Topics

Packages & Libraries

React Js Packages

useFetcher: easiest way to fetch data in React Js

Courses (Articles)

DEV Community