Use Optional Chaining Judiciously

Optional chaining is a powerful feature introduced in ECMAScript 2020 (ES11) that simplifies working with nested object properties and method calls. This operator brings a more concise and safer way to handle optional properties, instead of throwing an error “Cannot read property ‘x’ of undefined”.

It short-circuits the evaluation if a property or method is null or undefined, returning undefined instead of throwing an error.

Details: What is optional chaining and when to use it?

Caution: Use Optional Chaining Judiciously

While optional chaining is a valuable tool, it’s important not to overuse it. There can be scenarios where unnecessary chaining can lead to SLIGHTER performance issues as it adds additional checks to verify if the object or property exists before attempting to access it.

On the other hand, omitting optional chaining altogether means you’re directly accessing the property or method without any additional checks. This can lead to faster execution times in scenarios where you’re confident that the object or property won’t be null or undefined.

Use cases and examples

For Arrays:

When dealing with arrays, where the array is known to be non-null or non-undefined, using optional chaining may introduce unnecessary overhead.

with optional chaining

Here, you’re using optional chaining (?.) before invoking the map method. While this ensures that map is only called if arr is not null or undefined, it introduces an additional check, which might slightly affect performance, especially in cases where arr is known to be non-null or non-undefined.

Get Muhammad Faraz Ali’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Note: You can check the time of output. It might differ according to the environment in which you’re outputting.

without optional chaining

In this case, you’re directly accessing the map method of the array arr. If arr is empty, the map function will simply return an empty array. There's no additional overhead of optional chaining.

Note: You can check the output, now it is reduced.

For Objects:

Imagine we have a user object that represents user data in an application. This object might have nested properties, and some of these properties could be undefined or null or do not exist.

const user = {
  name: "Muhammad Faraz Ali",
  address: {
    city: "Lahore",
    country: {
      name: "Pakistan",
      code: null,
    },
  },
  contact: {
    email: "farazalipucit@gmail.com",
    phone: "+92 3154112707",
  },
};

Accessing Properties with Optional Chaining

Using optional chaining can lead to slight performance issues because each use adds an additional check to verify the existence of an object or property.

console.time();
const city = user?.address?.city;
console.timeEnd(); // Slightly more overhead due to additional checks

Accessing Properties Without Optional Chaining

In scenarios where you are confident that an object or property will not be null or undefined, omitting optional chaining can result in faster execution times due to the absence of these checks.

console.time();
const city = user.address.city;
console.timeEnd(); // Faster execution if you are confident `user` and `address` are not null or undefined

Summary:

• For arrays or object properties that are guaranteed to exist, and you’re confident that they won’t be null or undefined, it’s generally better to omit optional chaining to avoid unnecessary overhead.
• Omitting optional chaining can result in faster execution times, especially in performance-critical sections where you’re confident about the non-null or non-undefined nature of the object or property.