Optional Chaining in ES7

What is optional chaining?
Optional chaining allows you to access the value of a property in a nested object without the need to validate each object key/value in the chain.

I will try to explain it with an example.

I have an object, the value I have is deep inside a nested object.

  let data = {
    user: {
      feed: {
        edgeReels: {
          tray: {
            node: {
              dataExpiryDays: 2
            }
          }
        }
      }
    }
  };

I want to check the value of dataExpiryDays and do something.

We can do this like this

if(data.user.feed.edgeReels.tray.node.dataExpiryDays) {
    // do something
}

Wait…. anyone using JavaScript might know the potential dangers of this approach. If any of the nested object is not available or null the above line of code will break.

Example if the key edgeReels is not available, you will get an error like Cannot access tray of undefined .

So we write the above code like this.

  if (
    data &&
    data.user &&
    data.user.feed &&
    data.user.feed.edgeReels &&
    data.user.feed.edgeReels.tray &&
    data.user.feed.edgeReels.tray.node &&
    data.user.feed.edgeReels.tray.node.dataExpiryDays
  ) {
    // do something
  }

See you need to do a check for every keys in each nested level.

To avoid these kind of checks, there was new feature proposal called Optional Chaining to be included in ES7. The proposal is now in Stage 4 (5/31/2020 – when I was writing this.) . See the proposal here.

The Optional Chaining operator ?.

With optional chaining operator we can write the above if condition like this.

if(data?.user?.feed?.edgeReels?.tray?.node?.dataExpiryDays) {
    // do something
}

If any of the keys are missing subsequent checks are not done and the if condition fails.

Question 1: Can we validate an array position using Optional chaining?

Yes. like this

if(data?.nameArray?.[0]) {
 // nameArray has index 0
}

Now the big questions.

1. Can we use Optional chaining in my JavaScript project?
2. Can we use Optional chaining in my React App?

Can we use Optional chaining in my JavaScript project?

No. As Optional chaining is still in proposal stage, most browsers will NOT have full support implemented. So I recommend not to use it unless you add polyfills. As of 8/8/2022 all latest browser versions support optional chaining. The latest browser support can be viewed here in CanIUse website.

Can we use Optional chaining in my React App?

React CRA uses Babel. Babel is a JavaScript transcompiler  which makes new/next generation JavaScript features backward compatible with all browsers(don’t expect IE older versions).

So if you use React or Gastby or any other JavaScript project uses Babel 7.8 or above versions you are good to use Optional Chaining. If you are using React CRA check Babel version inside node-modules/@babel/core/package.json or check for a folder plugin-proposal-optional-chaining inside node-modules/@babel/

Check it out and post your comments if any.

Happy coding…. 🍺