How to use optional chaining in JavaScript ES2020?

Why worry about undefined or null values when optional chaining can be used?

When something comes from the outside but you are not sure if it is defined or you just want to simplify the logic of your app use this solution. 🔽

Before we start, I would highly recommend you to check out the runnable examples for the solution on our website:
How to use optional chaining in JavaScript ES2020?

Let's start by briefly explaining how the optional chaining operator works.

ES2020 introduced ?. operator that gives the possibility to avoid testing if an object or property before ?. notation exists, returning undefined value if not. The operator can be used with variables, properties, objects, arrays, functions, etc.

The ?. operator is similar to the . chaining operator, except that instead of causing an error if a reference is null or undefined, the expression returns undefined value.

📝 Note:

The ?. optional chaining operator is supported in the latest Babel compiler and TypeScript by default.

Syntax looks following way:

Syntax	Description
obj?.prop	object property access
obj?.[expr]	object property access with brackets
arr?.[index]	array item access by index
func?.(args)	function calling

Simple object example:

const user = {
  name: 'Kate',
  age: 25,
};

console.log(user?.name);             // Kate

// console.log(user.address.street)  // causes error
console.log(user.address?.street)    // undefined

Various types examples:

// accepted: uninitialised, undefined or null

var obj;
var arr = undefined;
var func = null;

console.log(obj?.items);        // undefined
console.log(obj?.['name']);     // undefined
console.log(arr?.[10]);         // undefined
console.log(func?.('Hello!'));  // undefined

You can run these examples here

If you found this solution useful let me know in the comment section or leave a reaction 💗🦄💾.
Thanks for reading and see you in the upcoming posts! 😊🔜

---

Write to us! ✉

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions

You can also join our facebook group where we share coding tips and tricks with others! 🔥

Comments

[Sujan Rai]

Love the post man. Thanks

[Menai Ala Eddine]

Simple and easy explanation. Thank you.

[Kunal Tiwari]

I am using it a lot and this is the very important concept in js now. I really loved the article, Thanks for publishing it. It will really help the community

[Pawan Pawar]

Good one!!