I was working on my project and got a review comment from my colleague to put the default value for the nested object, as it could break the app.

Below was the response object structure that I was getting from an API call.

response = {
  data:
   someData: {
     name: 'Ashish',
     number: 9876543210
    }
  }
}

only name and number were getting used in the code. The code I had written previously for which I have received the comment looked as below.

const { name, number } = response.data.someData;

PROBLEM

Now the problem with above code is,

1. if Backend doesn't share the data object. Then JS the engine will try to find someData in undefined. This could have broke the application
2. I wanted to write everything in one line, instead of destructuring multiple times

So to avoid the above problem, I had to google and search for a good practice for javascript multilevel destructuring with default values. And here is what I got

SOLUTION

const { data: { someData: { name, number } } = { someData: { name: '', number: null } } } = response;

• code doesn't break, as we are setting default values for the response object in the frontend.
• Clean code
• Readable (This point is argued, depends on developer perspective)

EXPLANATION

If you haven't tried multilevel destructuring, above code might look little confusing, let's break the above code into multiple statements

1. Destructuring Multilevel

const { 
  data: 
    { someData: 
      { 
        name,
        number
       }
     }
   } = response;

//OR
// In one line

const { data: { someData: { name, number } } } = response;

This is how we destructure a multilevel object. With parent object data outside pointing to the child object someData and then the child object someData referring to the child object having values nameand number.

2. Assigning default value

if data doesn't exist in the response object, assign a default value to it

const { data = {} } = response;

If data doesn't exist in response, then data with empty object is created inside the response

Note:

Default values go to the right hand side and = is used to assign the value.

const {
        data: { 
           someData: { 
             name,
             number
           }
       } = { someData: { name: '', number: null } } } = response;
// OR
// in 1 line

const { data: { someData: { name, number } } = { someData: { name: '', number: null } } } = response;

This creates an object with someData with name default value is '' empty string and number's default value as null.

Note:

'' empty string and null are falsy values.