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 ↗
I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me on Twitter ↗ or via Email ↗.
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