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.

1. 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

2. 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

3. 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']

4. 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

5. 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.