The Optional Chaining
null, the Optional Chaining operator short circuits and simply returns
The syntax is straightforward and easy to understand. The operator is placed after the object you wish to access and before the property, array expression, or function call you want to make.
Here's how it works:
obj.val?.prop - Accesses the prop property of the
obj.val object, only if
obj.val exists and is not null or undefined.
obj.val?.[expr] - Accesses a property or an array element of
obj.val using an expression expr, only if
obj.val exists and is not
obj.func?.(args) - Calls the function
obj.func with the given arguments
args, only if
obj.func exists and is not
?. is used to access object properties and methods in a safe way, by handling the possibility of encountering
undefined values. In React.js or Next.js, it can be used to access properties in state or props objects and to call methods on components, without risking runtime errors from trying to access a property or method on a
Let's say, instead of writing:
let name = user && user.name;
you can write:
let name = user?.name;
This can simplify your code and make it more concise. Useful in cases where you are not sure if the object exists or not.
It's important to note that the Optional Chaining operator cannot be used on a non-declared root object. Attempting to do so will result in a ReferenceError being thrown, indicating that the root object is not defined. However, the operator can be used on a root object that has a value of
As an example, let's say we have user objects that hold the information about our users.
Most of our users have addresses in
user.address property, with the street
user.address.street, but some did not provide them.
In such case, when we attempt to get
user.address.street, and the user happens to be without an address, we get an runtime error:
The Optional Chaining operator is not just useful for accessing object properties, but it can also be applied to function calls. This makes it an ideal tool for handling scenarios in which the method you are trying to call may not exist. This is especially useful when working with APIs that have varying levels of support, or when dealing with features that may not be available on the user's device.
In this case, if the
customMethod is not found on the
someInterface object, the expression will return undefined instead of throwing an error. This allows your code to gracefully handle such scenarios and avoid the risk of unintended exceptions. With the Optional Chaining operator, you can write cleaner and more robust code that is better equipped to handle the complexities of real-world development.
The Optional Chaining operator can also be combined with bracket notation to access properties with dynamic names. This is done by passing an expression as the property name, inside square brackets
It is not possible to use the Optional Chaining operator for assigning values to object properties. Attempting to do so will result in a SyntaxError.
Optional chaining is easy to misuse and can potentially confuse future readers of your code in certain scenarios. This operator makes it easier for devs to express chained nullable references in a much concise manner.
We should use
?. only where it's ok that something doesn't exist.
Let's say, if according to our code logic
user object must exist, but
address is optional, then we should write
user.address?.street, but not
user happens to be
undefined, we'll see a programming error about it and fix it. Otherwise, if we overuse
?., coding errors can be silenced where not appropriate, and become more difficult to debug.
Please consider following and supporting us by subscribing to our channel. Your support is greatly appreciated and will help us continue creating content for you to enjoy. Thank you in advance for your support!