Optional Chaining In JavaScript
source link: https://www.giftegwuenu.com/optional-chaining-in-java-script/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Optional Chaining In JavaScript
7 April 2021.⏱2 mins readAre you always frustrated when you try to access a value from an object/array and it returns this error Uncaught TypeError: Cannot read property 'value' of undefined
because the value is not available yet or does not exist? Let's see an example, say we have countries
object with values like this:
countries = {
name: 'Nigeria',
region: 'Africa',
population: 186988000,
currency: {
code: 'NGN',
name: 'Nigerian Naira',
symbol: '₦',
}
};
and we try to return a value that is not yet available or doesn't exist yet:
console.log(countries.languages.name);
we will get back an error from the browser that the value is undefined. How do we tackle this problem? we can validate that each reference in the nested property is available with an expression like this:
console.log(countries.languages && countries.languages.name);
Now, this won't throw an error and will return undefined
if a value doesn't exist. To avoid doing that extra step of validating we can use a different method - Optional Chaining.
Introducing the Optional Chaining Operator
The JavaScript Optional Chaining Operator is a native feature introduced in ES2020 that allows you to safely access deeply nested properties of an object without having to check for the existence of each of them.
Optional Chaining uses the ?.
operator to access the properties of objects. The usage of the ?.
operator is similar to the typical .
operator, but when a reference is undefined
or null
, rather than throwing an error, it would return undefined
.
The syntax for optional chaining can be used in any of the following positions:
obj?.prop // optional static property access
obj?.[expr] // optional dynamic property access
func?.(...args) // optional function or method call
In our previous example, we can then change the expression to this:
console.log(countries?.languages?.name);
This will check if the parent value exists and if it doesn't it returns undefined
. Optional chaining can be used often when we are fetching responses from an API we may not be 100% sure if a certain object exists in our API response.
Browser Support
The Optional Chaining Operator is currently supported in all browsers except Internet Explorer as seen from CanIUse.
Resources
Video Format
Hello! 👋
I’m Gift, a developer advocate and content creator passionate about sharing my learning and experience with other developers.
I write content on HTML, CSS, Jamstack, Accessibility, and Career related topics.
If you find this article helpful consider sharing this post, connecting with me on Twitter or becoming a Patron.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK