Array Destructuring in ES6

Array Destructuring in ES6

The term ‘Destructuring’ is defined as dividing the complicated data structure into easier modules. The Destructuring syntax helps to extract the small segments from an array and the objects. We can also use it for value assignment and variable declaration.

In other words, the process of Destructuring is an effective way for extracting values from data stored in an object or an array. When we are destructuring an array, we have to use the address at the time of the assignment.

Example

Here, we have an example to understand this concept.

var array = [“Welcome”, “ECMAScript 6”]
 var [primary, secondary] = array;                          // Destructuring assignment
 console.log(primary);
 console.log(secondary);    

Output

After the execution of the code, we will get the following output.

We have another example of Array Destructuring given below-

Example

var animals = [“Cow”, “Elephant”, “Dog”, “Cat”, “Tiger”];
 var [animal1, animal2, animal3] = animals;    // Destructuring assignment
 console.log(animal1);
 console.log(animal2);
 console.log(animal3); 

Output

After the execution of the code, we got the following output:

In the above example, we declared an array named animals containing five values. But we select the three random values that are Cow, Elephant, Dog, addressed at positions 1, 2, 3.

Important Point: If we use any number for array destructuring, then it will return an error because numbers do not have the variable name.

Array Destructuring with Default Values

If the value of any variable is undefined or unassigned in an array, then it will execute with a default value.

Example

Here, we have an example to illustrate the above concept.

var p, q;
 [p = 10, q = 20] = [30];
 console.log(p);
 console.log(q); 

Output

After the execution of the code, we got the following output:

Array Destructuring with rest operator

The rest operator(…) in the array destructuring helps to store the enduring elements in a new array.

Here, we have an example to understand this concept.

Example

var animals = [“Dog”, “Cat”, “Buffalo”, “Lion”, “Goat”];
 var [p, q,…args] = animal;                                // Destructuring assignment
 console.log (p);
 console.log (q);
 console.log (args); 

Output

After the successful execution of the code, we got the following output:

Variable Swapping

We can swap the values of two variables within the single destructuring expression. We can easily swap the values of variables without any temporary variables.

Example

Here, we have an example of variable swapping.

var r = 22, s = 44;
 [r, s] = [s, r];
 console.log (r);
 console.log (s); 

Output

After the execution of the example, we got the following output:

Parsing return array from a function

In the programming, a function is used to return the values of an array. We can easily get an array with the help of a function. The array destructuring helps to define this whole process concisely.

Example

We have an example to understand this concept.

function arr()
 {
           return [10, 20,30]; 
 }    
 var [p, q, r] = arr();
 console.log (p); 
 console.log (q);
 console.log (r); 

Output

After the execution of the code, we got the following output: