JavaScript Optional Chaining | Use and Examples

  • by

Using JavaScript optional chaining operator (?.) can get the value of a property located deep objects (Nested Object) without having to check that if each reference in the chain is null or undefined..

obj.val?.prop
obj.val?.[expr]
obj.arr?.[index]
obj.func?.(args)

This is a safe way to access nested object properties, even if an intermediate property doesn’t exist.

const value = obj?.propOne?.propTwo?.propThree?.lastProp;

JavaScript Optional Chaining

Simple example code If one of the references in the chain is null or undefined, the optional chaining operator (?.) will short circuit and return undefined.

<!DOCTYPE html>
<html>
<body>

  <script>
   const adventurer = {
    name: 'John',
    dog: {
      name: 'Tommy',
      sound: 'Bhow Bhow...'
    }
  };

  const catName = adventurer.cat?.name;
  console.log(catName);

  const dogName = adventurer.dog?.name;
  console.log(dogName);
  console.log(adventurer.dog?.sound);

</script>

</body>
</html> 

Output:

JavaScript Optional Chaining

Optional Chaining + Nullish Coalescing

Optional chaining pairs well with nullish coalescing ?? to provide fallback values.

const data = obj?.prop ?? "fallback string";
const data = obj?.prop?.func() ?? fallbackFunc();

If the item to the left of ?? is nullish, the item to the right will be returned.

Summary

We should use ?. only where it’s ok that something doesn’t exist.

For example, if according to our code logic user object must exist, but address is optional, then we should write user.address?.street, but not user?.address?.street.

  1. obj?.prop – returns obj.prop if obj exists, otherwise undefined.
  2. obj?.[prop] – returns obj[prop] if obj exists, otherwise undefined.
  3. obj.method?.() – calls obj.method() if obj.method exists, otherwise returns undefined.

Do comment if you have any doubts or suggestions on this Js topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.