6 Things You Need To Completely Understand Array Destructuring in Javascript (ES6)
Tags: 100daysofcode, javascript, codenewbie
Published: 2020-03-25 07:28:06

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](https://link.medium.com/MzVZosN2O4) 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 using [Babel](https://babeljs.io/). 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.

*accessing array elements pre-ES6*


```javascript
let brands = ["Nike", "Gucci", "Adidas"];
console.log(brands[0], brands[1], "and", brands[2], "are in vogue now.");
//Output: Nike Gucci and Adidas are in vogue now.
```

*accessing array elements post-ES6*
```javascript 
let brands = ["Nike", "Gucci", "Adidas"];
let [nike, gucci, adidas] = brands;
console.log(nike, gucci, “and”, adidas, “are in vogue now.”);
//Output: Nike Gucci and Adidas are in vogue now. 
```


From the code snippet above, `nike`, `gucci` and `adidas` are assigned the corresponding elements in the array that share the same index with them. 

```javascript 
let nike, gucci, adidas;
let brands = ["Nike", "Gucci", "Adidas"];
[nike, gucci, adidas] = brands;
console.log(nike, gucci, “and”, adidas, “are in vogue now.”);
```

Declaration of variable names can also be done separately before the assignment. 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.

```javascript 
let brands = ["Nike", "Gucci"];
let [nike, gucci, adidas] = brands;
console.log(adidas);
//Output: undefined
```

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.

```javascript 
let brands = ["Nike", "Gucci", “Adidas”];
let [nike, gucci] = brands;
console.log(“I love”, nike, “and”, gucci);
//Output: I love Nike and Gucci
```
###Explicit Default Values
Default values can be defined explicitly for the variable names by the programmer. These values serve as fallback when they don’t have a corresponding array element sharing the same index with them.

```javascript 
let brands = ["Nike", "Gucci"];
let [nike, gucci=”vintage”, adidas=”Adidas”] = brands;
console.log(“I love”, adidas, “and”, gucci);
//Output: I love Adidas and Gucci
```

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.

```javascript 
let brands = ["Nike", "Gucci", "Adidas", “Versace”];
let [nike, , , versace] = brands;
console.log(“I love”, nike, “and”, versace);
//Output: I love Nike and Versace
```
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](https://medium.com/@23306ed76441/3c84102db6d9?sk=) 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.

```javascript 
let brands = ["Nike", "Gucci", "Adidas", “Versace”];
let {0:nike,  2:versace} = brands;
console.log(“I love”, nike, “and”, versace);
//Output: I love Nike and Versace
```
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.

```javascript
let brands = ["Nike", "Gucci", "Adidas", “Versace”];
let [nike, gucci, ...lower] = brands;
console.log(lower);
//Output: ["Adidas", "Versace"]
```

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.  

```javascript
let lower = ["Adidas", "Versace"];
let [nike, gucci, adidas, versace] = ["Nike", "Gucci", ...lower];
console.log(nike, gucci, versace, “and”, adidas, “are in vogue now.”);
//Output: Nike Gucci Versace and Adidas are in vogue now.
```
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.

```javascript
let brands = ["Nike", "Gucci", "Adidas", “Versace”];
let [nike, gucci, adidas, versace] = [latest, vintage, ...lower] = brands;
console.log(nike, gucci, versace, “and”, adidas, “are in vogue now.”);
//Output: Nike Gucci Versace and Adidas are in vogue now.

console.log(latest, “is better than”, vintage);
//Output: Nike is better than Gucci

console.log(...lower);
//Output: ["Adidas", "Versace"];
```

##6. Nested Arrays
To destructure a nested array you’ll need a nested array literal with variable names.
```javascript
let brands = ["Nike", ["Gucci", "Adidas"], “Versace”];
let [nike, [ gucci, adidas], versace] = brands;
console.log(nike, gucci, versace, “and”, adidas, “are in vogue now.”);
//Output: Nike Gucci Versace and Adidas are in vogue now.
```
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.

```javascript 
function brands(){
return ["Nike", "Gucci", "Adidas", "Versace"];
}
let [nike, gucci, adidas, versace] = brands();
console.log(nike, gucci, versace, "and", adidas, "are in vogue now.");
//Output: Nike Gucci Versace and Adidas are in vogue now.
```
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.

```javascript 
function brands([nike, gucci, adidas, versace]) {
console.log(nike, gucci, versace, "and", adidas, "are in vogue now.");
}

brands(["Nike", "Gucci", "Adidas", "Versace"]);
//Output: Nike Gucci Versace and Adidas are in vogue now.
```
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.

```javascript 
let gucci = “Gucci”;
let versace = “Versace”;

//We shall swap the values of versace and gucci variables

//Pre-ES6 
let temp = gucci;
gucci = versace;
versace = gucci;
console.log(versace, “is better than”, gucci);
//Output: Gucci is better than Versace.

//Post-ES6
[gucci, versace] = [versace, gucci];
console.log(versace, “is better than”, gucci);
//Output: Gucci is better than Versace.
```
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.Com](CanIUse.com).