Destructuring Arrays in JavaScript

Destructuring is an ES6 feature and it’s a way of unpacking values from on array, or properties from an object into separate e variables.

In other words de-structuring is to break complex data structure down into smaller data structure like a variable. So for arrays we use de-structuring to retrieve elements from an array and store them into variables in a very easy way.

Why de-structuring is useful or needed 👉

for ex. we take an very simple array 👉

const firstArray = [1, 2, 3]

now if we want to retrieve each one into variable without destructuring we will do like this 👉

const a = firstArray[0];
const b = firstArray[1];
const c = firstArray[2];

that’s how we retrieve all three elements from an array without destructuring 👆 it’s very lengthy process.

But now with de-structuring we can use in very simple way by declaring all three variables at same time in square brackets.👉

const [a, b, c] = firstArray;

so it’s a good feature of ES6. it saves lot’s of mess in our code. Variables declared in square brackets at left side looks like an array but they are not. They are destructuring assignment. And while doing destructuring doesn’t affects the original array.

If we want to destructure like first 2 or any number of elements not all from the array. we should declare the number of variables we want to destructure and javaScript will automatically destructure those elements. instead of all. for ex:

const dishes = [‘pizza’, ‘pasta’, ‘noodles’ ];
const [first, second ] = dishes;
console.log(first, second);
output will be: pizza pasta;

so it only destructured first two elements of an array.

Suppose if we want to destructure first element and third element of an array. so destructuring has a way to do that. 👉

const [first, , third] = dishes;
console.log(first, third);
output will be: pizza noodles;

So what we did that , we simply leave a hole in destructuring operator and skipped the variable we don’t want to destructure. and we don’t have to assign variable for all the stuff that we don’t want to destructure. and this is really powerful.

We can use destructuring for switching variables or reassigning the values. and it’s a very easy way 👉

for ex:

const numbers = [1, 2, 3, 4];
let [a , b ] = numbers;
output: a = 1;b= 2;

if we want to reassign them in normal without destructuring what we will do be:

const c = a;
a = b;
b = c;
output will be: 2 1;

with destructuring we can do it in a simple way:

[a, b ] = [b , a];
output will be: 2 1;

So it was so simple and mess free than what we did before. destructuring has saved many lines of code and mess and no extra variable needed to reassign.

Nested Destructuring : What if we have array inside an array or an nested array and we want to destructure that array 👉

const nested = [1, 2, [5, 6]];

the way to do that is :

const [i, , [j, k]] = nested;
console.log(i, j ,k);
output will be: 1 5 6;

in above code we skipped one element by leaving space or whole in assignment and destructured all other elements of nested array. we did destructuring inside destructuring.

Setting default values: We can set default values to variables while destructuring, this is used when we don’t know the length of an array or fetching data from API.

for ex:

const [p , q , r] = [8 , 9 ]
console.log(p, q , r);
output will be = 8 9 undefined;

r is undefined because value or element is not present in an array. so here we can set default value to variables.

const [p =1 , q= 1, r = 1] = [8 , 9];
console.log(p, q , r);
output will be = 8 9 1;

so it’s very useful in these kind of arrays.