Array destructuring

Destructuring

It is an ES6 feature and it is a way of unpacking values from an array or an object into separate variables. In other words, we can say Destructuring is a way to break a complex data structure down into smaller data structures like variables.

For arrays and object we use destructuring, to retrieve elements from the array, and store them in variables in a very easy way.

Retrieving array elements without Array destructuring

Here is a way to retrieve array elements without array destructuring.

// without arrray destructuring (kafi-mehnat)
const array=[1,2,3,4];
const a=array[0]
const b=array[1]
const c=array[2]
const d=array[3]
console.log(a,b,c,d);

Here to retrieve these 4 array elements, first, we have to create 4 variables and then assign them values of the array individually by accessing the array index.

After writing these many lines of code you will be like:-

Array destructuring in Es6

Here is a way to retrieve array elements with array destructuring.

//arrray destructuring
const array=[1,2,3,4];
const [a,b,c,d]=array;
console.log(a,b,c,d)

Yes, these 3 lines and you are done, You have created 4 variables also you have assigned them values of their specific index. That bracket in line 2 looks like an array but it is not it is just a Destructuring Assignment.

After writing these 3 lines of code the interviewer to you be like :

Skipping the middle array element while destructuring

Sometimes, we want to skip the middle element of an array or any element of an array like here this person wants to skip hunting from his hobbies.

const beingHuman = {
    name: 'Selmon Bhai',
    age: 50,
    hobbies: ['Driving🚗', 'Hunting🦌', 'Gymming🏋️‍♂️', 'Farming🌵'],
}
let [primaryHobby, ,secondaryHobby]=beingHuman.hobbies; //skipping 2nd hobby
console.log(primaryHobby,secondaryHobby)

//-Selmon bhoii to me be like - tu footpath pe mil 😡

Now suppose he wants to have his primary hobby as gyming and secondary as driving, i.e swapping his hobby preferences. He can do that with or without using destructuring.

let temp=primaryHobby;
primaryHobby=secondaryHobby;
secondaryHobby=temp;
console.log(primaryHobby,secondaryHobby);

With Destructuring

[primaryHobby,secondaryHobby]=[secondaryHobby,primaryHobby]
console.log(primaryHobby,secondaryHobby);

So, when we are using destructuring we don't need to use temporary variable also the syntax got shorter.

Nested Destructuring

This destructuring seems easy, but what happens when we have a nested array? the answer is we have to do nested destructuring (destructuring inside of destructuring).

const nestedArray=[2,3,[4,5,6]];
const [i,j,[k,l,m]]=nestedArray;
console.log(i,j,k,l,m) //destructuring inside of destructuring

Setting a default value for destructuring

Sometimes, it may happen that we don't know the original length of an array or the data may be coming from API, then at that position, if we defined more variables for destructuring and there are fewer array elements we will get undefined. To remove that error we can set a default value for destructuring.

here in this example let's pretend we don't know the length of the array.

const [p,q,r]=[3,4]
console.log(p,q,r);    //r will give undefined here

To not get undefined here in the above code we can use the default value for destructuring.

const [p=1,q=1,r=1]=[3,4];
console.log(p,q,r); //here for r we will get 1, and for p and q we will get their already declared value i.e 3 and 4

This much for this blog.

thanks :D, Tata 👋 (namak desh ka namak)