DEV Community

Cover image for Using the optional chaining operator in JavaScript
saransh kataria
saransh kataria

Posted on • Originally published at wisdomgeek.com

Using the optional chaining operator in JavaScript

Every now and then, you come across a JavaScript feature that vastly changes the way you write it. Destructuring, arrow functions, modules have been some of those features for me. Optional chaining is going to be the next one on that list for me.

Optional Chaining is in stage 4 of the ES2020 proposal, therefore should be added to the specification. It changes the way properties inside an object are accessed, especially the deeply nested ones. It is also available as a feature in TypeScript 3.7+.

The challenge

I am pretty sure you have run into null and undefined properties in JavaScript. The dynamic nature of the language makes it impossible to not run into them. And specially when dealing with nested objects, the following piece of code is a common occurrence:

if (data && data.children && data.children[0] && data.children[0].name) {
    // I have a name!
}
Enter fullscreen mode Exit fullscreen mode

The above piece of code was for an API response and I had to parse the JSON to make sure the name existed. But similar situations can be encountered when objects have optional properties or there are some configuration objects with some values that are mapped on the fly.

While that is what makes the language flexible, it increases the headache for the developer and a lot of boundary conditions need to be checked for. That is boilerplate code which everyone wants to avoid.

The optional chaining operator

The optional chaining operator makes life so much easier for developers. It checks nested properties for us without having to explicitly search down the ladder.

All you have to do is use the “?” operator after the property that you want to check for nullish values. You are free to use the operator as many times in an expression as you want to and it will do an early return if any of the items are undefined.

For static properties the usage is:

object?.property
Enter fullscreen mode Exit fullscreen mode

And for dynamic properties, it is changed to:

object?.[expression]
Enter fullscreen mode Exit fullscreen mode

The above piece of code can be reduced to:

let name = data?.children?.[0]?.name;
Enter fullscreen mode Exit fullscreen mode

And then if we have:

let data;
console.log(data?.children?.[0]?.name) // undefined

data  = {children: [{name:'Saransh Kataria'}]}
console.log(data?.children?.[0]?.name) // Saransh Kataria
Enter fullscreen mode Exit fullscreen mode

And it becomes as simple as that!

Since the operator short circuits as soon as a nullish values, it can also be used to conditionally invoke methods or apply conditional logic too.

const conditionalProperty;
let index = 0;

console.log(conditionalProperty?.[index++]); // undefined
console.log(index);  // 0
Enter fullscreen mode Exit fullscreen mode

And similarly with methods:

object.runsOnlyIfMethodExists?.()
Enter fullscreen mode Exit fullscreen mode

Using with nullish coalescing

The nullish coalescing proposal provides a way to handle undefined or null values and provide default values for the expression. You can use the “??” operator to provide a default value for an expression.

console.log(undefined ?? 'Wisdom Geek'); // Wisdom Geek
Enter fullscreen mode Exit fullscreen mode

And thus the nullish coalescing operator can be used in conjunction with the optional chaining operator to provide default values if the property does not exist.

let name = data?.children?.[0]?.name ?? 'magic!'; 

console.log(name); // magic!
Enter fullscreen mode Exit fullscreen mode

And that is it, folks! The optional chaining operator allows easy access to nested properties without writing a lot of boilerplate code. It is important to note that it is not supported in IE. So, you might want to add a Babel plugin if you need to support that or older versions of browsers. For Node.js you need to bump to a Node 14 LTS release for this, as it isn’t supported in 12.x.

If you have any questions, feel free to drop a comment below.

Originally published at https://www.wisdomgeek.com on March 18, 2021.

Top comments (8)

Collapse
 
tnifey profile image
Hub

there is a typo in 5th example

console.log(conditionalProperty?.[index++)]; // undefined
Enter fullscreen mode Exit fullscreen mode

should be

console.log(conditionalProperty?.[index++]); // undefined
Enter fullscreen mode Exit fullscreen mode
Collapse
 
saranshk profile image
saransh kataria

updated. Thanks!

Collapse
 
voboda profile image
voboda

So much more readable! Thanks for the great tip!

Collapse
 
saranshk profile image
saransh kataria

Yeah, it has changed the way I write JS code! Thanks for the comment.

Collapse
 
brandondamue profile image
Brandon Damue

Thanks for this write up.

Collapse
 
saranshk profile image
saransh kataria

Glad it was useful.

Collapse
 
esponges profile image
Fernando González Tostado

Awesome. Will help to reduce conditions for my APIs a lot.

Collapse
 
saranshk profile image
saransh kataria

It definitely will!