Optional Chaining in javascript.

Imagine we have a deeply nested object of level "N" and we want to check the "Mth" level if it exists or not. Let me put an example in front of you.

Let customer={
name:'Foo',
cars:{
carOne:'Audi',
carTwo:'BMW'
 }
}

If I have to say lets check "carOne" property is present or not in customer object, I can do this,

if(customer && customer.cars && customer.cars.carOne) {
// do your stuff
}

It's easy, right?

But if we observe the code above carefully, What we have found?

• Duplicate Code - To check a property exists or not, we are re-writing some conditions of the code again and again. Means some part of the code is executing many times. Thereby increasing code execution time.
• Longer version - If we are writing multiple conditions to check for a property, The code becomes lengthy and if we skip some validation in between, we can get an error.

let customer={
  name:'Foo',
  }

  if(customer  && customer.cars.carOne) { // will result in TypeError:Cannot read property 'carOne' of undefined
    // do your stuff
    }

How about we fix this guy into a one-liner statement. And here's the code for your rescue.

if( customer?.cars?.carOne ) {
// do your stuff
}

Boom!! All your problems just got vanished.

Here's How.

The expression "?." is called Optional Chaining and it's evaluating whether an expression before the "?" statement is Nullable and/or Undefined. If it is, The whole expression will stop executing, or in a technical term, it's called "Short-Circuiting" and the code execution will just be carried on afterward.

Benefits?

• No Duplicate code - The optional chaining expression is not checking the same condition again and again if it's already been examined. Here's, Kind of continuous chaining is happening. So no object property will be traversed multiple times. Thereby, Saving code execution time.

• Shorter and simplified version - This is of course shorter and easy to read, unlike the vanilla code. As optional chaining is also checking Nullable and/or Undefined throughout the way, it will not result in "TypeError". In this case, execution still continues.

I hope you find this blog interesting. Until next time, Adios amigos.