Optional Chaining In Javascript(?.)

Consider the following piece of code:

const user = {
  name: 'Faruk',
  surname: 'Nasir',

Console logging user.address.city will result in an Uncaught TypeError. For that reason, It is always a good idea to check for the validity of a property before chaining a nested property on it. This is what I mean:

if (user.address) {

The above code won't throw an error because it is checking, firstly, the existence of the address property and only then, the console.log(user.address.city); statement will execute. In a situation where city is not valid, it will return undefined.

Optional chaining––in javascript––is a syntactic sugar that allows for the shortening of expressions when accessing chained properties in a safe manner, especially when there exists the possibility that such reference is missing. Let's rewrite the above code using optional chaining:


And, that's it! Sweet, right?

Usage with function call

We can conveniently run the following code without the fear of the compiler screaming at us:


When the login method is not present in the user object, we will only receive and undefined response.

Usage with expressions and arrays

// expressions
let nestedProp = obj?.['prop' + 'Name'];

// array
let arrayItem = arr?.[42];


  • Optional chaining can not be used on a non-declared root object, but can be used with an undefined root object.

Further Reading