The complete guide to destructuring in JavaScript
1 November, 2021
7
7
2
Contributors
Two commonly used data structures in JavaScript are
Object and Array. And many times we may need to extract individual pieces of the object instead of the whole thing. This is where Destructuring comes in.Destructuring is a special syntax which is used to "destructure" or "unpack" an object or array into many variables, as that may be more useful.
Array destructuring
Here's an example of array destructuring:
By using destructuring, we did not have to repeat the array's name or the indices. Destructuring can be really helpful when using string methods which return arrays:
Note that the original array does not change when destructuring. Destructuring is not destructive.
Skippping items
You can use holes to skip items in arrays:
Works with any iterables
Actually, we can use any iterable in destructuring (including objects, which we will talk about later)
This is because destructuring is kind of syntactic sugar of using
for...of over the Iterable and then assigning the value to variables.Assign anything
You can assign anything which can be assigned, say object properties:
Or even existing variables:
The variable swapping trick
There's a common trick which is used to swap two variables using destructuring:
The rest ...
If an array is longer than what you destructure, the extra items are left out.
You can collect those items using rest parameters:
You can use any name instead of
restDays, the only rule is that it should be preceded by three dots and should be last.Default values
If you destructure nonexistent values, there will be no error. The items will simply be undefined. We can set default values to fix this:
Nesting
You can also destructure nested arrays. Just use the same syntax inside.
Or a really complex example:
Just note that when you destructure nested items which dont exist, an error will be thrown.
Object destructuring
Objects can also be destructured and the syntax is pretty much the same.
Also note the order does not matter:
Aliasing
We can set aliases to destructured variables by writing
realName: alias just like a normal object:Just like in arrays, we can set defaults:
We can even mix default values and aliases:
The rest ...
Just like arrays, objects also can have a rest property.
A quick gotcha for assigning existing values
In the previous examples, we used
let {...} = {...} which is fine. But when you try {...} = {...} there will be an error:this is because JavaScript considers
{...} on it's own as a block statement. A block statement can be used to group code:So, to tell JavaScript that we need destructuring, we can wrap it in
():Nesting
Just like in arrays, we can destructure nested properties too! We just need to mimic the structure of the source
Note that we have no coords, since we are destructuring it's values.
Here's a complete destructuring example:
That's everything you need to know about destructuring!
If you found this post helpful, spread the word! or follow me on twitter or over here to stay updated on my blog posts!
tutorial
javascript
node.js
deno