Introduction

Destructuring in JavaScript, also known as a destructuring assignment, is used to unpack arrays and object attributes into their own variables.

Array

The array is a collection of elements of the same or different values. Each value is mapped with an index value.

Object

The object is a collection of elements stored in the manner of key-value pair.

How Destructuring used in arrays

Let's consider an array,

//An Array of two elements
let name = ["Peter", "Parker"];

// Destructuring assignment in array
// let set firstName to peter and lastName to Parker
let [firstName, lastName] = name;
// Now the first value in the array is mapped to first element of the destructuring array.
//The next value in the array is mapped to next element of the destructuring array.
console.log(firstName); //Peter
console.log(lastName); //Parker

This is very useful in getting an element from an array and storing it in a separate variable at the same time.

Likewise, we can also do

let [firstName, lastName] = "Peter Parker".split(" ");
console.log(firstName); // Peter
console.log(lastName); // Parker

We can add some additional elements to the destructuring as well. Like,

let [firstName, lastName, age = 21] = "Peter Parker".split(" ");
console.log(firstName); // Peter
console.log(lastName); // Parker
console.log(age); // 21

Note: Destructuring will not modify any part of the array.

When an array has many items, what if you just need to destructure the other elements?

let array = ["Ben","Jack","Ken","Joy","Henna","Tim","Parker"];
[firstName, ,lastName] = array;

//If you need the third element then leave the second with a comma(",")
console.log(firstName); // Ben
console.log(lastName); // Ken
//Same if you need the second element then leave the first element with a comma(",").
[,firstName,,,lastName] = array;
console.log(firstName); // Jack
console.log(lastName); // Henna

let [firstName,,,,,lastName] = array;
console.log(firstName); // Ben
console.log(lastName); // Parker

This type of method can also be used in strings,

const [x,y,z] = "CAT";
console.log(x,y,z) //C A T

const [x,y,...z] = "KITTEN";
console.log(x,y,z) //K I ["T","T","E","N"]

How Destructuring used in objects

This awesome destructuring method also works with objects.

Let's see how it does,

let student1 = {name: "Jim", age: 14, gender: "male"};
let {name, age, gender} = student1;
console.log(name, age, gender); //Jim 14 male

Here the naming variable should be the same as the key of the value in the object. But the order doesn't matter.

let student1 = {name: "Jim", age: 14, gender: "male"};
let {age, name, gender} = student1;
console.log(name); //Jim
console.log(age); //14
console.log(gender); //male

Same as an array, we can add additional elements to the object white destructuring.

let student1 = {name: "Jim", age: 14, gender: "male"};
let {age, name, gender, citizen= "French"} = student1;
console.log(name); //Jim
console.log(age); //14
console.log(gender); //male
console.log(citizen); //French