Array Destructuring in JavaScript | Explained

Arrays comprise numerous values of the same data type and the elements of arrays are accessed/retrieved by using the indexing phenomenon. However, it may not be fruitful in the case of complex arrays and you want to retrieve the array elements from that.

The array destructuring phenomenon is carried out to retrieve the array elements with ease. In array destructuring, each element is referred to as a variable and then by calling that variable you would be able to retrieve the element associated with that variable. With the aim of getting elements, this article provides a detailed guide on array destructuring in JavaScript.

How array destructuring works in JavaScript

As discussed, earlier destructuring is referring to the array elements by using distinct variables. Thus, for destructuring, you require a set of variables that can be used to get the specific element of an array. The lines of code written below better demonstrate how destructuring works in JavaScript.

var arr = [1, 2, 3, 4];
var [w, x, y, z,] = arr;

Upon calling the variable “w” you would get “1” in the output, similarly, the value “2” would be stored inside the “x” variable and so on.

How to destruct an array in JavaScript

This section provides a set of examples that illustrate how arrays can be manipulated by using the destructuring phenomenon.

Example 1

The following code creates distinct variables for each element of an array.

var arr = [10, 11, 12]
var [x, y, z]= arr;
console.log(x);
console.log(y);
console.log(z);

The above code is described as,

• an array arr is created which contains three numeric values
• another set of variables is created that refers to the arr variable and thus they will be associated with each element of the array arr.
• the variables x, y, and z are printed

Output

The output shows that the values 10, 11, and 12 are now contained by the x, y, and z respectively.

Example 2

Let’s look at how the destructuring works if the number of elements is not equal to the number of variables.

var arr = [4, 7]
var [x, y, z]= arr;
console.log(x);
console.log(y);
console.log(z);

The above code contains an array comprising two numeric values. This array is being associated with three variables and then these variables are printed using the “console.log” statement.

Output

The above output shows that the value of z results in undefined because there are only two numbers in arr thus only two variables can be mapped on these variables.

Example 3

This example makes use of the rest operator to destruct an array.

var arr = ["LinuxHint", "welcome", "Linux, Windows", "JavaScript/jQuery", "informative tutorials"]
var [x, y, ...other]= arr;
console.log(x);
console.log(y);
console.log(other);

The above code creates an array of strings and the x, y, and others refer to the elements of an array. The x and y relate to the first, and second elements respectively whereas the other variable is used with the rest operator, therefore, the other contains all the elements occurring after the second element.

Output

The output shows that x and y contain the first two elements only while the rest of the array elements are contained in the other variable.

Note: As variables cannot be created using a number thus numeric values cannot be used to destruct the array.

Conclusion

The array destructuring is carried out by associating variables with the array elements. These distinct variables can be used to get only specific elements of the array. This article provides a detailed guide on array destructuring in JavaScript. Here, you would get to know and perform the destructuring of arrays in JavaScript. For better understanding, we have provided a set of examples that refer to destructuring the array elements in JavaScript.

from https://ift.tt/mxsNLyk