Today I learned

Optional Chaining

Edit this Post Opens in new tab

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 =

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 && &&

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!

☕️ Buy me a coffee ☕️

I wish you a wonderful day! Marco