Optional Chaining In JavaScript.
Let me introduce you to another new feature in JavaScript Optional Chaining(?.)
With the help of optional chaining you can quickly able to find “null” or “undefined” values. But before diving deep let’s see what the official definition of Optional Chaining is.
The optional chaining operator (
?.) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.
Now we know what the definition is (as if you guys care) we can dive into code now.
Let’s say we have an object “user ” which consist of some methods and properties.
If you want to access any property you can access it using dot operator.
Like, to access street, user.address.city will give you “somewhere”. Fair Enough, but thing’s get interesting when you want to access something which is not there or you are not sure if “city” is present on object or not.
Let’s suppose a case, in above object only, if we do
console.log(user.company) it will give us “undefined” and if we try
console.log(user.company.address) it will give us a very known error.
Uncaught TypeError: Cannot read property ‘address’ of undefined
And, it’s quite obvious, “user.company” is undefined and again accessing something which is already undefined will definitely throw an error.
So to deal with this, we do some long conditions to counter the error. Like,
Now it will console → “Company address not present”
Optional Chaining to rescue
Weird Syntax Alert
Instead of doing long conditions like above, we can optionally chain to properties to check if they are present or not. Like below code.
Like I said earlier it has some weird syntax (?.)
Using “?.” to chain if the next property is available or not can help you to write very clean code.
The result of above console.log will be simply “undefined” or will return the value if the chained property is present or not.
The good thing about this is, it is not only valid for properties, we can chain it to check if some property is present or not. Like, using above “user” object. If we do
It will return “john” because john is present. But if we try to access any , method which is not even present in “user” object. We get error, let’ see.
Without Optional Chaining.
This will immediately throw an error.
Uncaught TypeError: user.methodNotPresentInObject is not a function.
That’s because this method is not even present in Object.
With Optional Chaining.
It will not break the code and simply return “undefined”.
And we can similarly do this on array as well. Like,
This will return me the value present in 0th position that is “js”, and if array is not present it will simply return “undefined” like other cases.
Key Takeaway and Points to remember.
It’s just a slight difference in syntax (?.) which will enable Optional Chaining in your code.
Also, Internet Explorer does not support this, hence you have to rely on previous techniques. For more information on this you can always refer to MDN docs.
If you like this article, please visit my other Hoisting article which explains everything you need to know about that.
