In this tutorial, we are going to learn about array destructuring in javascript.

So, let's get started...

What is Destructuring?

Destructuring is an ES6 feature and it's basically a way of unpacking values from an array or object into separate variables.

In other words, Destructuring is a way to break a complex data structure down into a smaller data structure like a variable.

Also read, Object Destructuring JavaScript

For example, before destructuring assignment happes something like below: 

//Without Destrcting assign
const arr = [1,2,3]

const a = arr[0];
const b = arr[1];
const c = arr[2];
console.log(x,y,z);
//Output : 1,2,3

Now look below, same thing we can do with destructuring: 

////With Destrcting assign
const arr = [1,2,3]

const [x,y,z]= arr;
console.log(x,y,z);
//Output : 1,2,3

 Access Elements using Desctring

Example :1: 

const categories: ['angular', 'node', 'java', 'c'];
const [first,second] = categories;
console.log(first,second);
//output : angular,node

Example:2: 

const categories: ['angular', 'node', 'java', 'c'];

const[one, , three] = categories;
console.log(one,three);
//output : angular,java

Swapping Values using destructuring:

const categories: ['angular', 'node', 'java', 'c'];

const [first,second] = categories;

[first, second] = [second,first];

console.log(first,second); 

//output : node,angular

Nested destructuring:

const nested = [2,4,[5,6]];
//const[i, , j] = nested;
// console.log(i,j);
//output : 2 , [5,6]

const [i, , [j,k]] = nested;
console.log(i,j,k);
//output : 2 ,5,6

Default Values in destructuring:

// Deafault values
const [p=1,q=1,r=1]  =  [8,9];
console.log(p,q,r);
//output : 8,9,1

Conclusion:

Do let me know If you face any difficulties please feel free to comment below we love to help you.

If you have any feedback suggestions then please inform us by commenting. Don’t forget to share this tutorial with your friends on Facebook and Twitter