DEV Community

loading...

Optional Chaining In JavaScript

Gift Egwuenu
Frontend Engineer and Content Creator. I'm passionate about making the web accessible to everyone and also an advocate for building open-source software and developer communities.
Originally published at giftegwuenu.com on ・2 min read

Are you always frustrated when you try to access a value from an object/array and it returns this error Uncaught TypeError: Cannot read property 'value' of undefined because the value is not available yet or does not exist? Let's see an example, say we have countries object with values like this:

countries = {
  name: 'Nigeria',
  region: 'Africa',
  population: 186988000,
  currency: {
    code: 'NGN',
    name: 'Nigerian Naira',
    symbol: '',
  }
};
Enter fullscreen mode Exit fullscreen mode

and we try to return a value that is not yet available or doesn't exist yet:

console.log(countries.languages.name);
Enter fullscreen mode Exit fullscreen mode

we will get back an error from the browser that the value is undefined. How do we tackle this problem? we can validate that each reference in the nested property is available with an expression like this:

console.log(countries.languages && countries.languages.name);
Enter fullscreen mode Exit fullscreen mode

Now, this won't throw an error and will return undefined if a value doesn't exist. To avoid doing that extra step of validating we can use a different method - Optional Chaining.

Introducing the Optional Chaining Operator

The JavaScript Optional Chaining Operator is a native feature introduced in ES2020 that allows you to safely access deeply nested properties of an object without having to check for the existence of each of them.

Optional Chaining uses the ?. operator to access the properties of objects. The usage of the ?. operator is similar to the typical . operator, but when a reference is undefined or null, rather than throwing an error, it would return undefined.

The syntax for optional chaining can be used in any of the following positions:

obj?.prop       // optional static property access
obj?.[expr]     // optional dynamic property access
func?.(...args) // optional function or method call
Enter fullscreen mode Exit fullscreen mode

In our previous example, we can then change the expression to this:

console.log(countries?.languages?.name);
Enter fullscreen mode Exit fullscreen mode

This will check if the parent value exists and if it doesn't it returns undefined. Optional chaining can be used often when we are fetching responses from an API we may not be 100% sure if a certain object exists in our API response.

Browser Support

The Optional Chaining Operator is currently supported in all browsers except Internet Explorer as seen from CanIUse.

Can I use - Optional Chaining

Resources

Video Format

Discussion (2)

Collapse
gokulkrishh profile image
Gokulakrishnan Kalaikovan

Good one.

I didn't know we can call an optional function or method call using this Optional chaining.

Collapse
sandeshsapkota profile image
sandeshsapkota

ohh nice ! this is interesting.