Array and Object destructuring sometime becomes hard to understand especially when we have nested items.
Let's look at one basic example without ES6 destructuring syntax.
In the above example we are doing destructuring of array using imperative way (we are specifying exaclty how we are destructuring).
So ES6 destructuring syntax solves this problem. ES6 destructuring using declarative way. let's look the same example with declarative way.
If you see the difference between two, declarative is more readable and we need not to bother about how detructuring is happening.
We have two types of destructuring. 1) Array destructuring 2) Object destructuring
Let's look first Array destructuring.
1. Array destructuring
Array destructuring will work based on indexes.
As we can see that getData() will return an Array having four values. So we are destructuring returned Array based on Array index. Index 0 value will be given to variable first and Index 1 value will be given to variable second, so on..
Sometime we have cases like where we want to skip some indexes values, this can be achieved by specifying "," while destructuring for that particular index.
In the above example we are skipping values for the index 1 and index 2.
Sometimes we need to assign a default value if the value is not present for that particular index.
we are destructuring on empty array so values are not available for required indexes, but we can have a default value using = after variable name.
nested Array destructuring
The above example is bit tricky. We are providing fallback as empty array. We need to specify this otherwise we will run into type error.
suppose our nested() function is returning null or undefined, but we can't destruct null or undefined, if we are doing so we will get type error.
nested() || []. Here we are checking if returned value is falsy then have a empty array and destruct that. Destructuring empty array we will get undefiend as value of every index (not a type error).
Here third element is also an array and we further destruct it as shown in example and we are also have a fallback initialize as empty array ([]) to avoid error.
Always have fallback (empty array) when destructuring an array.
2. Object Destructuring
Object Destructuring will be done based on "key" because we don't have a index for object.
Let's have look at below simple example.
As shown in above example object destructuring is based on key.
Name Aliasing and default value
In the above example we are giving name Aliasing to every key of Object and for country we are assigning default value of "INDIA" as our returned object from getData() function is not having country as property.
Note : that if you have provided name aliasing and you are using original key name then you will get an error, so in case of aliasing always use aliased name to access value.
Nested Object destructuring and fallback
Here Address is nested object so we can futher destructure it (i.e. line1, line2) and also not that we are providing fallback as an empty object so if address is not there then we will not run into error.
getData() || {} in this expression if getData() is returning falsy value then we will fallback to empty object to avoid type error.
Let's look at an example having both object and array destructuring.
Thanks for reading.
Let me know if you have any query.