Destructuring in JavaScript

Hello Folks!

Let's see different concepts in destructuring,

What is Destructuring?

Destructuring is an assignment, it is a cool feature that came along with ES6(ECMAScript6). Destructuring is a JavaScript expression that makes us possible to unpack values from arrays or properties from objects, into distinct variables. It can make code more readable.

Basic Array Destructuring

If we want to extract data using arrays, it is quite simple to use the destructuring assignment.

let introduction = ['Hello', 'Jagadish', 'Patil', 'India'];
let greeting = introduction[0];
let name = introduction[1];

console.log(greeting); //"Hello"
console.log(name); //"Jagadish"

Instead of using the above repetitive process, we can do it like this that is by using array destructuring.

let [greeting, name] = ['Hello', 'Jagadish', 'Patil', 'India'];

console.log(greeting); //"Hello"
console.log(name); //"Jagadish"##

Skipping Items in an Array

What if we want to access just the first and last item in an array. This is how we can access the first and last items by skipping some of the items.

let [greeting, , , country] = ['Hello', 'Jagadish', 'Patil', 'India'];

console.log(greeting); //"Hello"
console.log(country); //"India"

So the comma separator does the magic. If we want to skip all items, then we can do just like this.

let [, , , ,] = ['Hello', 'Jagadish', 'Patil', 'India'];

Assigning the rest of an Array

If we want to assign some of the array to variables and the rest of the items on an array to a particular variable, then we can do like below.

let [greeting, ...names] = ['Hello', 'Jagadish', 'Ramesh', 'Patil'];

console.log(greeting); //"Hello"
console.log(names); //[ 'Jagadish', 'Ramesh', 'Patil' ]

Note: You can use the rest operator only for the last element or your code will throw an error:

let [greeting, ...firstName, lastName] = ['Hello', 'Jagadish', 'Ramesh', 'Patil'];

//SyntaxError: Rest element must be the last element

Swapping Values

We can use destructuring assignment to swap the values of variables.

let number1 = 12;
let number2 = 28;

[number1, number2] = [number2, number1];

console.log(number1); //28
console.log(number2); //12

Basic Object Destructuring

Let's see the difference between the two codes below and check out how object destructuring makes code easier to read.

(Without Object Destructuring)

let person = { name: 'Jagadish', country: 'India', passion: 'Coding' };

let name = person.name;
let country = person.country;
let passion = person.passion;

console.log(name); //"Jagadish"
console.log(country); //"India"
console.log(passion); //"Coding"

(With Object Destructuring)

let person = { name: 'Jagadish', country: 'India', passion: 'Coding' };

let { name, country, passion } = person;

console.log(name); //"Jagadish"
console.log(country); //"India"
console.log(passion); //"Coding"

Computed Property Name

The computed property name is another object literal feature that also works for destructuring. We can specify the name of a property via an expression, by putting it in square brackets. See the example code below:

let prop = 'passion'

let { [prop]: job } = {
    name: 'Jagadish',
    country: 'India',
    passion: 'Coding',
}

console.log(job); //"Coding"

Rest in Object Destructuring

Rest syntax can also be used to pick up property keys that are not already picked up by the destructuring pattern. Those keys and their values are copied onto a new object. Look at the example below.

let person = {
    name: 'Jagadish Patil',
    country: 'India',
    job: 'Developer',
    friends: ['Revan', 'Guru'],
}

let { name, friends, ...others } = person;

console.log(name); //"Jagadish Patil"
console.log(friends); //[ "Revan", "Guru" ]
console.log(others ); // { country: "India", job: "Developer" }

That's it. Now we have understood what is destructuring in JavaScript, different ways of using destructuring, where and how to use destructuring.

I hope you find this post helpful and Thank you for reading.