DEV Community

Cover image for Object destructuring in Javascript | Real time example | Good Practice
Ashish Singh Rawat
Ashish Singh Rawat

Posted on

6

Object destructuring in Javascript | Real time example | Good Practice

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
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode
  • 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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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.

Tiugo image

Modular, Fast, and Built for Developers

CKEditor 5 gives you full control over your editing experience. A modular architecture means you get high performance, fewer re-renders and a setup that scales with your needs.

Start now

Top comments (0)

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay