What is Optional Chaining?

The optional chaining ?. is a safe way to access nested object properties, even if an intermediate property doesn’t exist.

Optional chaining, represented by ?. in JavaScript and is a new feature introduced in ES2020.

Wait, that is confusing right?

Let's break it down

We have this data we fetched from some server that returns information of 3 pets (Jenny, Lily, and Flora), Flora is a goldfish that lives in an unknown pond and doesn't have an owner.

const pets = [
  {
    name: "Jenny",
    animal: "dog",
    owner: {
      name: "Temitayo",
      location: {
        country: "Nigeria",
        state: "Ogun",
        city: "Abeokuta",
      },
    },
  },

  {
    name: "Lily",
    animal: "dog",
    owner: {
      name: "Zaniab",
      location: {
        country: "Nigeria",
        state: "Oyo",
        city: "Ibadan",
      },
    },
  },

  {
    name: "Flora",
    animal: "goldfish"
  },
];

Now, we select Flora, the Goldfish to display its owner's name display on our browser console.

 const selectedPet = {
    name: "Flora",
    animal: "fish",
  }

 console.log(selectedPet.owner.name)

We will get this error //TypeError: Cannot read property 'name' of undefined in our console.

That’s the expected result. JavaScript works like this.

As selectedPet.owner is undefined Because selectedPet.owner doesn't exist and an attempt to get user.address.street fails with an error.

But How can we fix this?

Old Solution

In this situation, we will probably have to use traditional if..else statement or conditional operator to check if owner data exists.

if(selectedPet.owner) console.log(selectedPet.owner.name) 

OR

console.log(selectedPet.owner ? selectedPet.owner.name : undefined);

/* Here, we get no error message, and nothing is displayed on 
our console because the condition is false */

New Solution

But with Optional Chaining, We can fix the issue without repeating ourselves and also helps us write cleaner and shorter code,

The optional chaining ?. stops the evaluation if the value before ?. is undefined or null and returns undefined.

 console.log(selectedPet.owner?.name) 

/* Here, we will get undefined, and no error on 
our console because the owner data returned undefined
so it will no longer read the name property */

And lastly, we can have multiple optional chaining which makes it so cool and nice to use.

 console.log(selectedPet.owner?.location?.city) 

/*And this also returns undefined in the Browser console. */

Conclusion

Thanks for reading! Optional Chaining is a cool feature you should check out and use in your next project or probably refactor the existing one.

Have you ever used Optional Chaining in a project? Let me know in the comments below!

If you liked this article and enjoy my first article, say Hi on Twitter!

You can read more about Optional chaining and its browser compatibility on

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining#browser_compatibility

Javascript Optional Chaining - How it works

What is Optional Chaining?

But How can we fix this?

Conclusion