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: