Today I learned

Optional Chaining

The optional chaining operator can now be used in production! Hurray! 🥳If you have no idea what this is, here is an example for you:

Let's say we have an object about a person.

const person = {
  name: 'Maria',
  age: '36 years',
  dog: {
    name: 'Hugo',
  },
}

If we wanted to get the dog's name, we had to do this:

const nameOfDog = person.dog.name

If the dogs name wasn't defined, this would throw an error 👎🏻 Not cool.

To prevent the type error, we had to do this:

const nameOfDog = person && person.dog && person.dog.name

Uff wow that's a lot of logical and there. Image having an object nested even deeper. Would become really long eventually.

Optional chaining operator to the resuce!

const nameOfDog = person?.dog?.name

That's a lot shorter and better to read, if you ask me. It works the same as the dot operator, but instead of throwing an error when a property is nullish, it short-circuits with a return value of undefined.

Really helpful while exploring the content of an object, which might have some optional properties.

You can learn more about it here: optional chaining ↗ Opens in new tab

I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me on Twitter ↗ Opens in new tab or via Email ↗ Opens in new tab.

If you want to support me, you can buy me a coffee. I would be very happy about it!

I wish you a wonderful day! Marco