This content originally appeared on DEV Community and was authored by Ashish Singh Rawat
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,
- 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 - 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.
This content originally appeared on DEV Community and was authored by Ashish Singh Rawat
Ashish Singh Rawat | Sciencx (2021-09-21T17:11:45+00:00) Object destructuring in Javascript | Real time example | Good Practice. Retrieved from https://www.scien.cx/2021/09/21/object-destructuring-in-javascript-real-time-example-good-practice/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.