Hello guys, welcome back. In this module, I will be discussing Destructuring in JavaScript. In the previous module, I discussed async & await in JavaScript. You can refer to our previous module if you want to know about it. So, let’s get started to know Destructuring in JavaScript.
Destructuring in JavaScript
In JavaScript, destructuring is a way to extract multiple values from objects and arrays. In other words, the destructuring assignment syntax in JavaScript is an expression that allows you to extract or unpack values from objects & arrays into distinct or separate variables. It was first introduced in ECMAScript 2015, also known as ES6.
Array destructuring in JavaScript
We use an index of elements of an array in an assignment when destructuring an array.
In ES5
const language = [ 'JS', 'PHP', 'C', 'C++', 'Java', 'Python' ]; let a = language[0], b = language[1], c = language[2]; console.log(a, b, c); //Output // JS PHP C
In ES6
const language = [ 'JS', 'PHP', 'C', 'C++', 'Java', 'Python' ]; let [a, b, c] = language; console.log(a, b, c); //Output // JS PHP C
Now, let’s see how to retrieve the first & last elements of an array.
In ES5
const language = [ 'JS', 'PHP', 'C', 'C++', 'Java', 'Python' ];
let size = language.length;
let first = language[0], last = language[size-1];
console.log(`First element: ${first} & last element: ${last}.`);
//Output
//First element: JS & last element: Python.
In ES6
let [first,,,,, last] = language;
console.log(`First element: ${first} & last element: ${last}.`);
//Output
// First element: JS & last element: Python.
How to pass array destructuring to a function in JavaScript?
function show([a, b, c])
{
console.log(a, b, c);
}
const language = [ 'JS', 'PHP', 'C'];
show(language);
//Output
// JS PHP C
Nested Array Destructuring in JavaScript
In ES5
let arr = [1, -4, 5.6, ['abc', 'pqr']];
let a = arr[0], b = arr[1], c = arr[2], x = arr[3][0], y = arr[3][1];
console.log(`a = ${a}, b = ${b}, c = ${c}, x = ${x} & y = ${y}.`);
//Output
// a = 1, b = -4, c = 5.6, x = abc & y = pqr.
In ES6
let arr = [1, -4, 5.6, ['abc', 'pqr']];
let [a, b, c, [x, y]] = arr;
console.log(`a = ${a}, b = ${b}, c = ${c}, x = ${x} & y = ${y}.`);
//Output
// a = 1, b = -4, c = 5.6, x = abc & y = pqr.
Object Destructuring in JavaScript
When destructuring objects, we use the keys or property names as variable names. This is how JavaScript knows which object’s property we want to assign.
In ES5
let person = {
name:"Rahul Sharma",
age: 22,
gender: 'Male'
}
console.log(`Name: ${person.name}, Age: ${person.age} & Gender: ${person.gender}.`);
//Output
// Name: Rahul Sharma, Age: 22 & Gender: Male.
In ES6
let person = {
name:"Rahul Sharma",
age: 22,
gender: 'Male'
}
let {name, age, gender} = person;
console.log(`Name: ${name}, Age: ${age} & Gender: ${gender}.`);
//Output
// Name: Rahul Sharma, Age: 22 & Gender: Male.
This may also be done as follows:
let person = {
name:"Rahul Sharma",
age: 22,
gender: 'Male'
}
let name, age, gender;
({name, age, gender} = person);
console.log(`Name: ${name}, Age: ${age} & Gender: ${gender}.`);
It is to be noted that variable name must be the same as that of the key or property name of an object, otherwise, we will be getting undefined in the output.
For example,
let person = {
name:"Rahul Sharma",
age: 22,
gender: 'Male'
}
let {Myname, age, gender} = person;
console.log(`Name: ${Myname}, Age: ${age} & Gender: ${gender}.`);
//Output
// Name: undefined, Age: 22 & Gender: Male.
If we want to use another name other than property name, then it can be done in the given example below:
let person = {
name:"Rahul Sharma",
age: 22,
gender: 'Male'
}
let {name: Myname, age:Myage, gender:Mygender} = person;
console.log(`Name: ${Myname}, Age: ${Myage} & Gender: ${Mygender}.`);
//Output
// Name: Rahul Sharma, Age: 22 & Gender: Male.
How to pass object destructuring to a function in JavaScript?
function show({name, age, gender})
{
console.log(`Name: ${name}, Age: ${age} & Gender: ${gender}.`);
}
let person = {
name:"Rahul Sharma",
age: 22,
gender: 'Male'
}
show(person);
//Output
// Name: Rahul Sharma, Age: 22 & Gender: Male.
Nested Object Destructuring in JavaScript
In ES5
let person = {
name:"Rahul Sharma",
age: 22,
gender: 'Male',
hobbies:
{
first:'singing',
second:'reading'
}
}
console.log(`Name: ${name}, Age: ${age}, Gender: ${gender}. & hobbies: ${person.hobbies.first}, ${person.hobbies.second}.`);
//Output
//Name: Rahul Sharma, Age: 22, Gender: Male. & hobbies: singing, reading.
In ES6
let person = {
name:"Rahul Sharma",
age: 22,
gender: 'Male',
hobbies:
{
first:'singing',
second:'reading'
}
}
let {name, age, gender, hobbies} = person;
console.log('Name: ${name}, Age: ${age}, Gender: ${gender}. & hobbies: ${hobbies.first}, ${hobbies.second}.');
//Output
//Name: Rahul Sharma, Age: 22, Gender: Male. & hobbies: singing, reading.
Another way of implementing nested object destructuring is shown below:
let person = {
name:"Rahul Sharma",
age: 22,
gender: 'Male',
hobbies:
{
first:'singing',
second:'reading'
}
}
let {name, age, gender, hobbies: {first, second}} = person;
console.log('Name: ${name}, Age: ${age}, Gender: ${gender}. & hobbies: ${first}, ${second}.');
I hope you have got a good knowledge of destructuring in JavaScript. For gaining a better understanding, you should practice it by yourself. In the next module, I will be discussing JavaScript Interview Questions and Answers, until then, you can read other programming languages tutorials & blogs on our website.
