Explaining Optional Chaining in JavaScript

By: The Bluu Kazi Dev Team

Mozilla Developer Network (MDN) documents, construe that optional chaining is referred to as “shorter and simpler expressions when accessing chained properties when the possibility exists that a reference may be missing”. The optional training operator allows developers to access chained properties, such as exploring object properties, by simplifying the value and access of properties located deep within a chain of connected objects.

Here is an illustrated example of Optional Chaining:

In this example, we have a person object with properties such as name, socialMedia (which is an object with three accounts), experience (an array of job titles), and employed (a boolean field). We're using optional chaining (?.) to access these properties safely, even if some properties or intermediate levels are missing.

Optional Chaining

The Optional Chaining feature and the . chaining operator have similar functions. The only difference is that when the chaining operator is used with function calls, it returns the value of undefined if the function does not exist. Moreover, instead of causing an error if a reference is null or undefined, it will return undefined. That is true primarily if the object property does not exist.

This output demonstrates that optional chaining allows us to safely access properties within the person object. The properties that exist (like facebook, experience, and employed) are accessed successfully, and if a property doesn't exist (like linkedIn), the result is undefined without causing an error.

Arrays and Function Calls

We can also use optional chaining for arrays and function calls. Therefore, I want to illustrate some more examples of how you can use this operator.

Let’s start with the arrays:

This command uses the Node.js -e flag to execute two separate JavaScript code snippets. The first snippet initializes the examScores array, and the second snippet uses optional chaining (?.) to access the element at index 3 in the array and logs the result to the terminal. When you run this command, you should see the following output: 76.

On the same subject, we can use optional chaining for function calls as well. Here is an example:

Optional Chaining is very useful when working with APIs, where a method might not be available for various reasons. Optional chaining provides the functionality of exploring the content of an object in order to check if a desired object/value exists and then locate it in order to proceed with our code.

Conclusion

Optional chaining is extremely useful for developers to use as it permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is acceptable. This feature is extremely useful as it is short and concise and does so without sacrificing the code’s readability.

Takeaway Points:

• Optional chaining allows developers to check the properties of an object.
• Optional chaining is very useful when certain properties are missing when trying to access chained properties.
• Instead of giving an error, undefined is returned if a property or a function does not exist.
• The readability of the code is not sacrificed and allows the code to be shorter and more concise.