I love 💓 “syntactic sugar” and I have been waiting to use this for a long time. Finally, optional chaining is Stage 4 (read more about JS stages) and more importantly it is available in TypeScript (3.7).
What is optional Chaining
Optional chaining is a process for querying and calling properties, methods on an optional that might currently be null or undefined.
Let me give you an example.
// Let's say we have this object
const person = { name: undefined }
// This will give you an error
// TypeError: Cannot read property 'fname' of undefined
const fname = person.name.fname
To be safe that person
exists and person.name
exists we would use logical expressions like this:
const person = { name: undefined }
const fname = person && person.name && person.name.fname
But as you can see you need to write a lot of code and if the property you need to access is even deeper in the object your logical expression will be even longer.
The optional chaining operator aims to solve this problem. All you need to write is 👇👇👇
const fname = person?.name?.fname
console.log(fname) // undefined
This will check person
and person.name
and if one of them is undefined will return undefined.
If you want to learn more about it the proposal page is a great place to start.
How to use the Operator
The operator does not work with Node.js out of the box just yet but you can use it with Babel (setup Babel), add this plugin @babel/plugin-proposal-optional-chaining to .babelrc
plugins and you are good to go.