JavaScript provides you with the ability to destructure objects and assign the individual units in one take. This allows you to get to the point of what you want to do and keep things clean.
In brief, destructuring means to unpack the values of objects or arrays into variables. At the end of this guide, you will see how to use it and what it can replace for you.
Prior to the development of destructuring assignments, if you had an array and wanted to assign some of it’s values to variables, you would do something like this:
You can get the same result by destructuring the array, like this:
This method allows you to pick any number of elements you want:
Or:
You can do this with strings as well:
We can throw in the rest operator (...
) to collect the rest of the arguments:
And we can even bring in objects here:
In Looping Through Objects
We can use destructuring assignment to loop through a key-value pair variable like an object or map:
We can spin that differently like this:
It might look like the same thing to you, but it is not. In using forEach
above, we pull the keys of the object into an array, then looping through that array of keys now and using those keys to pick out the values of objects.
In the second part, we just go straight and loop through each object entries and extracting the keys and values.
Assigning default values We can assign defaults values, just for a situation where the variable we wish to destructure is empty:
Like we did with arrays, we can destructure objects as well. If you have ever used React, you may have seen this used when importing a module.
When destructuring objects, we use the keys
as variable names. This is how JavaScript knows which property of the object you want to assign. Unlike arrays where you use their index/positions in the assignment, here you use the keys.
This destructuring works on any kind of object. If your object has nested values, you can still destructure that and extract the values into variables.
You may have seen functions that look like this:
This doesn’t look so good. It gets worse if you are trying to perform a function like making a chart and you need a lot of arguments to create the chat.
In a situation like this, destructuring can be useful:
By passing the function arguments as an object, they will get automatically resolved into independent arguments. Now, we pass an object with matching key-value pairs and the function will work nicely.
Destructuring is an operation you can do without, however, you can already see how it makes you a better developer. Cleaner code, fewer repetitions and more structure over what you have.
Use destructuring today and improve your code.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!