Array destructuring in JavaScript🤯

Hey!!!😉

In this article, I will hope to talk about what is array destructuring in JavaScript with examples.

Ok.. before we jump to the main topic let’s look at what are the topics we are going to discuss in this article. I hope it’s very helpful to you, get an idea of how this article is going.

1. What is Array destructuring?
2. Can Swap values use de-structuring?
3. Can skip the array index using de-structuring?

So let’s talk about the one by one above topics,

What is Array de-structuring?

Let’s assume you are going to the market to buy some food, when you are buying food you are packing your items using a bag. After your purchase, you will come to the home and you need to put those items on the table, So you take each food item and put those items on the table, in another word simply you unpacking your food bag. So simply that’s the way of array destructuring.

In summary of the above scenario-Array destructuring is the way of unpacking array elements and set into the variable. I

hope you got a simple idea about array destructuring with help of the above example.

Syntax

const [elements] = array;//source

Before ES6, when we want to destructure an array we used element indexes.

Ex-

const array [1,2,3,4,5];
const first=array[1];
const second=array[2];
console.log(first, second);

In the above example, you can see accessing elements using an array index. in other words, we can unpack the arrays using their indexes before ES6 and set them to their variable. when we unpack the arrays following these steps we can understand it takes a many of space and time. so as a solution to this problem ES6 has introduced the concept called destructuring.

We can do the same thing which I have shown in the above example by only using two lines of code to help with the destructuring concept. This concept makes our program more readable and also this help to write clean codes.

Unpack the array using destructuring.

const array [1,2,3,4,5];
const [first,second]=array
console.log(first, second);

2. Can I swap the two values using array destructuring?

Yes!! of course, it’s a very easy thing we can do using 3 lines of code. I ‘ll’ show it in a second,

let student ["Alex", "Joe"];
let[first, second]=student
[first, second]=[second, first]
console.log(first, second);

Here we have an array called student so, we need to swap those two students then firstly we should need to destructure the relevant array as previews examples. After that, we swapped the values into the new variable, then we print it using console.log.

3. Can we skip the array index?

Yes, In destructuring we can skip the values /element using a comma(,). If we want to get the first and last elements from the array we can simply skip other elements using commas(,). Here I will show you using an example below,

let array[1,2,3,4];
let[first, ,third]=array // Here I skipped the value
console.log(first, third);

Here I mentioned some of the important things about destructuring, so I hope this article will help you get some idea about the concept called destructuring.