by Ashay Mandwarya 🖋️💻🍕
Sometimes you have to destroy to build something new.
-Mistborn: The Hero of Ages
Destructuring makes, breaks whatever…. what use do we have for it??
Before answering that question, let’s have a formal definition for Destructuring. MDN to the rescue!
Let’s look at some examples to have a better understanding of the basics of destructuring.
When I saw this simple piece of code the first time, I was baffled. I did’t get what happened. If you are like I was, let me try and explain.
In line 1, we define 2 variables
b . In the next line both the variables are inside an array in the left hand side which in turn is equated to an actual array in the ride hand side. In the subsequent lines we print the values of
b and we get 7 and 8 respectively which were the elements in the RHS array. The magic happening in line 2 is called destructuring.
The LHS destructures the RHS and the values gained from unpacking the elements are assigned to the variables in order.
But why is the LHS inside an array???
The destructuring assignment uses similar syntax, on the LHS compared to the RHS to define what values to unpack from the sourced variable.
Here we have introduced another variable
leftout in the code now. We have 2 different types of uses of
leftout in the code.
[a,b,leftout]-> This assigns the third element in the array
to leftout as expected.
[a,b,…leftout]-> This gives the first 2 values
to a a
nd b respectively and the rest of the array is assigned to t
he leftout variable.
The solution lies in the
… operator. This operator collapses all remaining arguments (rest) into one array. In the latter point, the first 2 array elements are assigned to
b respectively, and the rest of the arguments are collapsed into an array (restructuring maybe??) and assigned to the
leftout variable. We can verify the same by looking at the output.
Destructuring works the same for object and arrays alike. The object in the LHS has properties
b which are assigned respectively to the properties
b of the RHS object. We get 1 & 2 respectively by printing them.
One thing to notice (if you have) is that there is a slight change in syntax (now you have).
In Object destructuring, the whole LHS & RHS are wrapped inside
We can see the error we get when we do not wrap it inside
(). It says declaration of statement expected.
What is actually happening is that enclosing something in curly brackets
(). This makes it an expression rather than a block, and we get our results.
rest operator. Works just like in arrays, except this time the rest values are collapsed inside an object because the structure to be used is defined by the LHS.
What is destructuring used for?
As seen from above examples, we now know the importance of destructuring. There are a lot of uses and different cases of how destructuring can be used for both Objects and Arrays. We will try some of them. (P.S. — the examples are valid for both objects and arrays unless otherwise mentioned.)
We already saw how variables are assigned in the above examples, so let’s have a look at another one.
In this example an already created array is directly assigned for destructuring. Values are assigned to the variables nonetheless.
The same goes for the Object.
Sometimes it can happen that we define
n number of variables to get values from destructuring, but the array/object might only have
n-x elements. In this case
x variables will be assigned
We can see that
b is undefined because the array simply does not have that many elements to destructure and assign every variable.
The solution to that is to give default values to the variables, so if there are not enough elements the variables take default values rather than go undefined.
Swap using a variable temp. The code is self explanatory.
Using destructuring we just swap the position of elements and Voilà! Swap done.
We can capture and use only the values which are required and reject or ignore the unnecessary values.
Here we can see that we ignored the middle value by not assigning it to any variable thus saving us the hassle.
Indirect assignment of a function return
Here we can see that the function x returns an array. On line 4 where we destructure, we provide the function call which returns the array and not the array directly. It makes the code tidy and easy to read and understand.
Assignment to new variables
Properties can be unpacked from an object and assigned to a variable with a different name than the object property.<Applicable to objects only>
We can see that the values for properties are also variables to whom values are assigned via destructuring.
Nested object and array destructuring
As we can see, that data is an object which has a property called location which in turn contains an array whose elements are objects.
With destructuring we have to get the values of all the properties present inside the object inside the location array.
So we created an object called obj which contains the same structure as the data object, and the values we want to unpack are provided as variables (mylatitude,mylongitude,mycity). These in turn are equated to the data array (same as the destructuring syntax before). When the variables are printed we get the respective values.
Destructuring with for-of loop
In the above code snippet, we have a people array of objects whose properties in turn contain an object (people > object >family). Now we want to unpack some of the values from the object using for..of loop.
In the loop we have assigned an object variable, with the same structure as in the people array, ignoring the values we don’t need. We have assigned variables n & m respectively to the name and mother properties, because these are the values we want to unpack. Inside the loop we print the variables and we get the needed values.
The Big picture.
You have to use destructuring in your code or practice it to actually get a hang of it. It seems simple in the examples because the examples are just to make you understand the basics. With complex/multiple operations (reduce()!), desctructuring might get confusing quickly, which we don’t want!
Moreover you might also think destructuring is just sugar syntax for performing a set of tasks (like we can give variables the value of each element from an array using a for loop). To an extent we can say it is sugar, but when we look at the broader image ‘The Big Picture’ we will get why destructuring has more value than just a code minimizer.
For extracting (still one at a time)
Although there is a syntax for constructing multiple properties at a time, but it can only be used at the time of assignment — it cannot be used for altering an existing object.
Before ES6 was introduced, there was no mechanism for extracting all data at once. That’s where destructuring has really come to shine. It lets you extract multiple properties from an object. We have seen this in the above examples.
There is only one I can think of and we discussed it:
- A statement should not start with a curly bracket
I tried to simplify destructuring by demonstrating as many destructuring use cases as possible. I hope it made this concept clear to you. Now you can use destructuring to write powerful and clean code.