Destructuring Assignment is an amazing feature introduced with EcmaScript 2016, which is now available in both browsers and Node.js.
If you’re writing CommonJs or ES6 modules, you’re probably already using it! Let’s pretend we have a file called
math.js, where we have a bunch of functions to be exported:
If we create a new file, let’s say
index.js, we can import the functions above in block:
But now imagine if our
math.js file had hundreds of functions. Why do we import them all, if we only need (for example)
Here comes the concept of object destructuring:
maths.js file exports an object containing every exported function. So, if we don’t want to import a lot of useless functions from that file, we can just destructure the exported object and get back only the functions we really need!
Simple Object Destructuring
In the code above, we defined an object (
user) with some nested properties.
We got access to
contacts by destructuring the
user object, so after the destructuring assignment we’ll always be able to call
contacts properties without typing
user.contacts. Pretty handy, isn’t it?
Nested Object Destructuring
Let’s try something a bit more complex, nested object destructuring.
Let’s analyze the code above! We defined a new object called
developer, where we have a nested property,
In our destructuring assignment, we got access to
age. Nothing new! But when we wanted to access both
mostUsed properties, from the
languages key, we had to destructure
That way, we’ll have two new constant values (
mostUsed), and we don’t need to access the
developer object everytime we need them!
Tip: you can add a new property just by using the ES6 default parameter feature!
Arrays can be destructured too! Let’s see the easiest case:
Way better than accessing those values by using indexes (
phrase)! But what if (for some reason) we want to get just the exclamation point (
Here we are! I don’t find this to be a clean way to get just a certain element from an array… but it may be useful, what do you think?
As we’ve seen during object destructuring, we can assign default values to our array while we’re destructuring it:
That way, we’ll be sure that we have a fallback value in case
Head and Tail
If you’re coming from a functional language such as Haskell, you may be familiar with the concept of
Let’s see an example:
So as you can see in the example above, we’re getting the first element of a list (array in Haskell) using the
head function, and the rest of the list using the
So easy! We just used the formidable spread operator and array destructuring together!
Nested Array Destructuring
Just like objects, nested arrays can be destructured too! Let’s say we have a grid, which is represented the following way:
+-—--+----+----+ | 10 | 10 | 10 | <- FIRST ROW +-—--+----+----+ | 60 | 50 | 60 | <- SECOND ROW +-—--+----+----+ | 90 | 90 | 90 | <- THIRD ROW +-—--+----+----+
We want to get the first row, the center value (
50) and the third row:
A lot easier than accessing those values by using
Cloning An Array
Array destructuring also makes immutable array cloning a lot easier:
As you can see, when we clone an array by reference, if we mutate the original one, the change will also affect the clone… we can simply avoid this by cloning by value:
Well done, array destructuring!