Destructuring in JavaScript
What is destructuring in JavaScript?
The syntax of destructuring assignment in JavaScript is an expression that enables us to unpack the values from arrays, and the properties from objects to distinct data elements. The assignment begins from the left-hand side in order to determine which value has to get unpacked. In destructuring, we can assign a value to the variable without duplicating the name of the property. It makes code concise and readable.
First, let us have a look at an example of how values can be extracted from an array, in general.
var months = [“January”, “February”, “March”, “April”, “May”]
var month1 = months[0];
var month4 = months[3];
console.log(month1);
console.log(month2);
The output of the above-written code is as shown below
January
April
Array Destructuring
The destructuring in arrays enables us to select an object or an array and convert it into smaller objects, variables, or elements. Destructuring has made the process of collecting data from an array simpler. The elements in the array are numbered from the left. Some of the properties of destructuring in arrays are discussed below.
-
Variables are greater than elements in the array
When the number of variables in the receiving array is more than the number of elements in the assigning array, then the variables in the receiving array that don’t get mapped to an element return undefined. This is because, the mapping begins from the left side as discussed above. Let us understand it with an example
var months = ["January", "February", "March", "April", "May"];
var [a, b, c, d, e, f] = months;
console.log(a);
console.log(f);
You are going to get the output as shown below
January
undefined
-
Variables are less than the number of elements
When the number of variables in the receiving array is less than the number of elements in the assigning array, the elements in the assigning array that are not mapped to any variable are simply ignored. As the numbering is done from the left side, we get output accordingly. Let us understand it with an example
var months = [“January”, “February”, “March”, “April”, “May”];
var [a, b, c] = months
consoles.log(c)
You are going to get the output as shown below
March
For assigning variables to only some values in the array we can make use of spaces enclosed with commas like shown below
var months = [“January”, “February”, “March”, “April”, “May”];
Var[a, b, , , c] = months
consoles.log(c)
The output of the above code is as shown below
May
-
Spread operator and rest operator
The position of (…) dictates whether it is a spread operator or the rest operator.
When (…) is being assigned a value, then it is the rest operator. And it accepts any number of elements in the variable it’s attached to, by putting all of them in an array. Whereas, when (…) is being assigned to some variable, then it is the spread operator. And it disintegrates the array it’s attached to, before giving the values for the assignment.
Think of the rest operator as a multiplexer and the spread operator as a demultiplexer.
Let us understand it with an example.
var months = ["January", "February", "March", "April", "May", "June", "July"];
var [a, b, ...c] = ["January", "February", ...months, "July"];
console.log(a);
console.log(c);
The output of the above-written code is as shown below
January
['January', 'February', 'March', 'April', 'May', 'June', 'July', 'July']
-
Interchanging of variables
Let us see the swapping of the variables in the example given below
[a, b] = [January, February]
[a, b] = [b, a]
console.log(a) // output is February
console.log(b) // output is January
-
Destructuring in nested arrays
Nested arrays in JavaScript are those arrays that contain another array inside them. We can access the elements inside the inner array based on the object name of the outer array. Let us understand the destructuring inside them with an example
var months = [“January”, [“February”, “March”, “April”], “May”, “June”];
var [a, [b, c, d]] = months;
console.log(a); // output is January
console.log(b); // output is February
console.log(c); // output is March
Object destructuring
Objects in JavaScript are used to store multiple values. They are created by using curly brackets. The syntax of object destructuring in JavaScript enables us to extract values from an object property and assign it to the variables. The name of the object key is the variable that holds the respective value. There is no need of creating an extra variable for the assigning of value. We mainly use let and const keywords in object destructuring. Let us understand the object destructuring in JavaScript with an example.
const person = {
'name': 'Rahul',
'height': ' 178cm ',
'age': 43
}
const {height} = person;
console.log(height)
The output you are going to get is
178cm
1) Nested object destructuring
Nested objects are objects that are present inside an object. Let us understand the destructuring in nested objects with an example
const user = {
rollNumber: 3,
name: 'Rahul',
age: 42,
education: {
degree: 'Masters'
}
};
const {education: {degree}} = user;
console.log(degree);
The output of the above-written code is as shown below
Masters
2) Adding aliases
We can add an alias to the variables as shown in the example given below
const person = {
'name': 'Rahul',
'height': ' 178cm ',
'age': 43
}
const{ height : length } = person
console.log( length )
You are going to get the output as shown below
178cm
Conclusion
When working with frameworks or libraries like angular, react, vue, etc, the use of destructuring is very high. Javascript destructuring is one of those features that will take your JavaScript skills to a whole different level. It simplifies all the code you have written. So keep practising it till you get perfect in it.
This is all about destructuring in JavaSript. If you wish to train in javascript then this is the best time to join Codedamn. You can start learning from scratch and soon master the advanced concepts in Javascript. And there are a lot more stuff that you will be interested in.
Sharing is caring
Did you like what Agam singh, Aman Ahmed Siddiqui, Aman Chopra, Aman, Amol Shelke, Anas Khan, Anirudh Panda, Ankur Balwada, Anshul Soni, Arif Shaikh, wrote? Thank them for their work by sharing it on social media.
No comments so far
Curious about this topic? Continue your journey with these coding courses: