Logo

TODAY I LEARNED

5cc56199f5c4e1d130c143d4b5d5dd28

1 post by ricardo-santoyo
@RichieDichie93

Optional Chaining in JavaScript

The Optional Chaining Operator ? allows you to read the value of a property located deep within an object without having to validate each property in the object. It works in a similar way than the chaining operator ., except that instead of causing an error if a reference is nullish, the expression will return a value of undefined.

A common way to validate properties was to do something like this:

const player = {
  stats: {
    stamina: 40
  }
}

let stamina
if (player && player.stats) {
  stamina = player.stats.stamina
}

This was done because calling player.stats.stamina directly could led into an error being thrown if stats didn't exists, and sometimes even the execution would stop.

Using the Optional Chaining Operator, we could do something like this:

const player = {
  stats: {
    stamina: 40
  }
}

const stamina = player.stats?.stamina

The result is shorter and simpler, and in case stats didn't exists the value would be undefined, without an error being thrown.

Learned by ricardo-santoyo on Mar 1, 2021

973983 adforcodereview v3 0211021 c02 021121