6 Things You Need To Completely Understand Array Destructuring in Javascript (ES6)
It’s tedious accessing the elements of an array repeatedly, especially if that array has few elements.
Destructuring was introduced with ES6 in 2015 to make accessing array elements and object properties easier. My previous article covers destructuring objects in Javascript.
Destructuring makes it possible to assign elements in an array to variable names using an assignment operator, =, and an array literal, […]. With these, multiple assignments are done in a single expression. If you would want to see how array element assignments in javascript would have been done without destructuring I’d recommend you use Babel. You can simply copy the code snippets on this article and paste them on Babel.
1. Basic Destructuring
Destructuring is done by placing an array literal containing variable names on the left side of an assignment operator and the array to be accessed on the right. The variable names are assigned the elements on the other array which have the same index with them. Array destructuring is done using the index of array elements.
From the code snippets above, nike, gucci and adidas are assigned the corresponding elements in the array that share the same index with them.
Declaration of variable names can also be done separately before the assignment. Look at the code snippet above for details. Unlike object destructuring, this does not require brackets around the destructuring expression.
2. Default Values
Unassigned identifiers are given the value, undefined. It is assigned by default to variable names that don’t have a corresponding array element sharing the same index with them.
The variable name adidas is assigned undefined.
Unassigned values don’t give errors. Array elements that don’t get assigned to variable names are completely ignored and no error is thrown.
Explicit Default Values
Default values can be defined explicitly for the variable names by the programmer. These values serve as a fallback when they don’t have a corresponding array element sharing the same index with them.
The variable names, adidas and gucci, are given default values. gucci is assigned a corresponding element in the array whose value overrides the default value, adidas isn’t assigned any element which causes the assignment to fall back to the default value.
3. Ignoring some values
Not all values are needed from an array always — values which are of no interest can be skipped. To skip a value, we skip its corresponding variable name but leave the comma.
The array elements, Nike and Gucci are skipped by skipping their variable names and leaving only the commas. But skipping array elements like this can be tedious and is prone to errors, like missing commas.
A better method of doing this requires knowledge of object destructuring — you can check my article on that. Arrays are objects in javascript, try running typeof [] in your browser console, it’ll produce object. The keys of an array are the index of its elements—the properties of the array.
To assign the variables, we consider the array as an object and change the keys(indices) to the variable names that we want.
We change the indices of the first and last element to the variable names we want and access the corresponding array elements at that index.
4. Using the Spread syntax and Rest parameter
The spread and rest parameter make use of the three-dot notation, “…”.
Using Rest
When “...” appears before a variable name yet to be assigned, it usually acts as a rest parameter. After assigning values to some variable names, the remaining elements might need to be tracked. The rest parameter is used to put the rest of the array elements in an array. It must always appear at the end of the array literal.
The rest parameter puts the rest of the elements in the variable name, lower.
Using Spread
When “...” appears before an array, it’s usually inside another array or is part of an argument in a function and it’s used as spread syntax. It spreads the elements of the array into the other array if in an array, or the argument of the function if in a function call.
The spread syntax spreads the elements of the array, lower, into the outer array which makes Adidas and Versace available as array elements.
5. Multiple Arrays
Did you know the below code snippet is valid?
a = b = 4;
The variables, a and b will end up with the value, 4. This makes it possible to destructure more than one array in a single expression.
6. Nested Arrays
To destructure a nested array you’ll need a nested array literal with variable names.
The nested and parent arrays are destructured with an array literal that has the same structure as them. All elements of both arrays don’t need to have corresponding variable names.
Some Uses of Array Destructuring
1. Destructuring returned function values
If a function execution returns an array, it can be destructured to access its elements.
The array returned from the function, brands is destructured.
2. Destructuring function arguments
Placing an array literal as a function parameter helps to destructure array arguments passed to the function during a function call.
The array elements are destructured during the call of brands.
3. Swapping Variables
Variables can now easily be swapped in a single expression unlike the previous method of finding a temporary variable to hold an intermediate value which usually took three lines of code.
From the code snippet swapping variables has become easier and faster with ES6.
Wrapping Up
Using destructuring in your code for assignments helps to reduce time spent in writing code and you write shorter lines of code. This will reduce errors and make you write cleaner code. Although not all browser versions support it yet, most do. You can find out more about browsers that support it on CanIUse.
Please, do 👏 and leave a comment — I would love to have your feedback to help me write better articles. If you enjoyed this article and would like more articles like this, join my mailing list. A follow would do too.
