Object Destructuring in JavaScript

In this blog you going to learn destructuring in JavaScript. Destructuring allows us to unpack values from objects and arrays. It will make your code simpler. I think it really helpful especially when you are dealing with big datas. For instance, in you project you have a lot of details of specific item, in order to show it, you can use destructruring, instead of putting you object properties all over the place. I don’t see very useful with working on arrays, but with objects it is a very useful tool. Let me give you example and show how it works.

const human = {
   id: '1', 
   name: 'Mike', 
   nationality: 'Asian'
}

In example above we have human object and down bellow we are going to explore destructuring. In JavaScript, we are often passing objects around, because objects can hold multiple discrete values. In the end we often work with those individual values and it can be a bit annoying when they are all on an object. In order to pull things off from human object and make it easier to work with data , we used to do like this:

const name = human.name
const nationality = human.nationality
//console.log(name) --> Mike
//console.log(nationality)--> Asian

We see the problem right away, for every single value we want off of that object, we have to add another line. It’s pretty nice, because we have individual variables we can work with . The problem is that this is going to require quite a few new lines, especially if we have a more complex object with more properties. Here comes our lovely destructuring, it allows us to pull as many things off of an object or an array as we like, and store those in variables. Now let’s explore how we can do exact same thing with destructuring on a single line of code:

const {name, nationality} = human
//console.log(name) --> Mike
//console.log(nationality)--> Asian

So we will get exactly same result.

One thing we can also do is change the name of the local variable created. Let’s say we want to change local variable called name to username, and we still want to take an advantage of destructuring. To get this done we do following:

const {name:userName, nationality} = human
//console.log(userName) --> Mike
//console.log(nationality)--> Asian

In this case we are creating new variable userName and it’s value is coming from the human.name property.

We can also pull off another property and provide property for it, if it doesn’t exist in object. Let’s say we want to add another detail called eyeColor. To do that we can provide default value we wan to use. It is very similar with default arguments. Here is example how to do:

const {name:userName, nationality, eyeColor = 'blue'} = human
//console.log(userName) --> Mike
//console.log(nationality)--> Asian
//console.log(eyeColor)--> blue

Here we are creating new variable called eyeColor and we are trying to fetch it’s value from human.eyeColor and in this case it will print out our provided value blue . So with destructuring we have a lot of options available to us to get things exactly as we want them. Also we can give a custom name for our property eyeColor as we did with our name property.

The last thing of destructuring is that we can use the rest operator inside of here. So we can get object with rest of the things, that we have not chosen to destructure. In our case we did not destructured id . To use the rest operator we use spread syntax and we call it others. We are creating new object with just one property id :

const {name:userName, nationality, eyeColor = 'blue' ...others} = human
//console.log(userName) --> Mike
//console.log(nationality)--> Asian
//console.log(eyeColor)--> blue
//console.log(others)--> Object { id: '1'}

If we had other properties in our object, that we are not destructuring, those would show up on the others object as well.

Conclusion

Destructuring is very usefull technique when it comes to work with objects and huge data. It will make our code easier to read and understand