31 Optional Chaining

Optional Chaining is really useful when we deal with nested json data and inconsistent tree structure.

Scenario

Let's say the back end API is fetching user data as below.

• The address part is not mandatory so some users will have it and some user won't
• This data is getting rendered in our UI application

const user ={
    name: "Alia",
    address: {
         city: "Mumbai"
    }
}

• Let's say we are displaying the city using this console.log(user.address.city)
• It will print the city as 'Mumbai'

The Problem

The problem comes when we receive data without address property

const user = {
    name: "Ranbir"
}

• Our UI code evaluates `user.address.city'
• And will encounter error can't read properties of undefined
• This will terminate the execution of the entire code block

The solution

Basically we need a mechanism using which we can return the data if exists or 'undefined' instead of an error

• We can apply conditional checking using ternary operator or ifElse conditions
• E.g console.log(user.address ? user.address.city : 'undefined');
• However these conditional checking are ineffective when we get a deep nested json structure.
• The best approach is to use optional chaining

Optional Chaining

Optional chaining helps to access properties from deeply nested objects without checking that each reference in the chain is valid

• The optional operator is used (?.)
• If it evaluates the value as undefined, then it will stop there and won't continue further
• E.g when we use user.address?.city it will stop when user.address returns 'undefined'