Destructuring arrays in JavaScript (also with added rest and spread!)
Tags: javascript, beginners, tutorial, webdev
Published: 2022-03-23 20:59:08


A great technique and feature of JavaScript is the ability to  destructure an object. 

This article will look at what we can do with arrays.

To get the full benefit of this, cut and past the code (or make your own up) and play with it on [here](jsfiddle.net)

---


## What is destructuring?

A great question! Simply put:


> It is an expression that gives us the programmer the ability to get value from the array and save them as variables. 

---


You may want the first and second number from this array, so sensibly you would do the below:

```javascript
const arrayOfNumbers = [4, 6, 2, 11, 16]

const firstNumber = arrayOfNumbers[0] //4
const secondNumber = arrayOfNumbers[1] //6

```

---

However, this is long-winded! What happens if you wanted the third and fifth as well.

Let us destructure the array
```javascript
const arrayOfNumbers = [4, 6, 2, 11, 16]

const [first, second, third, fourth, fifth] = arrayOfNumbers
console.log(fourth)//11

```

- So we start with a const or let. 

- We name our variables we want to use, then we put the square brackets around them (makes sense since it is an array). 

- Make sure you then equals it to the actual array!

- We can access the variable the usual way.

---


### What happens if I don't want all the numbers, is there a quicker way?



Yes, instead of giving the value in an array a variable name, we can skip it by leaving it blank. You still need the comma, or how would JavaScript know!



```javascript
const arrayOfNumbers = [4, 6, 2, 11, 16]
//I just want the third and fifth number
const [third] = arrayOfNumbers

console.log(third, fifth)// 4,6 -- oh no! This doesnt work!

const [, , third, , fifth] = arrayOfNumbers
console.log(third,fifth) // 2,16
```

---


### Well actually I want the first number and the rest in an array, how do I do that?


Well, you have actually answered your own question!

You use the REST parameter. **THIS HAS TO BE THE LAST ELEMENT IN THE ARRAY YOU ARE GOING TO DESTRUCTURE**


```javascript
const arrayOfNumbers = [4, 6, 2, 11, 16]

const [first, ...others] = arrayOfNumbers
console.log(others) //[6,2,11,16]

const [first, ...others,fifth] = arrayOfNumbers
console.log(fifth) //Syntax error, Rest element must be last element

```

---

### What about nested arrays? Can we destructure?

Hell yes! 

Let us see the code!

```javascript
const nestedArray = [0, 1, [2, 3], 4, [5, 6, [7, 8], 9, 10], 11, 12]
const [zero, one, two, three, four, five, six, seven, eight, nine,ten,eleven,twelve] = nestedArray
console.log(three) // 4
console.log(eight) // undefined

```
Oh dear... that doesn't quite work. 'Three' here is actually '4'.
Why? Well zero = 0, one =1, two is =[2,3] and therefore three = 4. Test yourself on the others now!

So we need to destructure "two", but this is actually quite easy

```javascript
const nestedArray = [0, 1, [2, 3], 4, [5, 6, [7, 8], 9, 10], 11, 12]
const [zero, one, [two, three], four, [five, six, [seven, eight], nine,ten],eleven,twelve] = nestedArray
console.log(three) //3
console.log(eight) //8

```

As there are multiple arrays here, we can use multiple REST operators

```javascript
const nestedArray = [0, 1, [2, 3], 4, [5, 6, [7, 8], 9, 10], 11, 12]
let [zero,one,  [two, three],four, [five, six, [seven, ...rest], ...restTwo],
  ...restThree
] = nestedArray
console.log(rest) //[8]
console.log(restTwo) //[9,10]
console.log(restThree) //[11,12]

```

They all meet the main criteria of them being the last element in their particular level of the array.
p.s. you can call the 'rest' variables anything you like !

---


#### You have the rest variables as an array, but I just want the numbers!

There are numerous methods to do this, but a GREAT one is using the ... again!

Let me show you:

```javascript
const nestedArray = [0, 1, [2, 3], 4, [5, 6, [7, 8], 9, 10], 11, 12]
let [zero,one,  [two, three],four, [five, six, [seven, ...rest], ...restTwo],
  ...restThree
] = nestedArray
console.log(...rest, ...restTwo, ...restThree) //8 9 10 11 12

```
This SPREADS the array, but there is a limitation:


```javascript
const nestedArray = [0, 1, [2, 3], 4, [5, 6, [7, 8], 9, 10], 11, 12]
let [zero,one,  [two, three],four, [five, six, [seven, ...rest], ...restTwo],
  ...restThree
] = nestedArray
const spread = ...restThree
console.log(spread);// unexpectedToken

```
This is not allowed!

But you can do other great things with the SPREAD operator:

---


### Joining arrays

```javascript
const nestedArray = [0, 1, [2, 3], 4, [5, 6, [7, 8], 9, 10], 11, 12]
let [zero,one,  [two, three],four, [five, six, [seven, ...rest], ...restTwo],
  ...restThree
] = nestedArray

// Usual method of merging an array CONCAT
const sequenceInAnArray = rest.concat(restTwo).concat(restThree)
console.log(sequenceInAnArray) //[8, 9, 10, 11, 12]

// USE OF SPREAD!
rest = [...rest, ...restTwo, ...restThree] 
console.log(rest) //[8, 9, 10, 11, 12]

```

This is a very powerful use and is used frequently. It is a great way of merging data. Make sure the rest is a LET though!

---
### COPYING ARRAYS

A great way of making a new array and not MUTATING the original array is using the slice function (there are others). 

You can also copy any array with the SPREAD operator

```javascript
let pleaseCopyMe = ['a', 'b', 'c']
let okThen = [...pleaseCopyMe]
console.log(okThen)
console.log(pleaseCopyMe === okThen) // false! As they have different memory refernces

```

---
Well done for reaching the end. As a reward, he is a great tip!

```javascript
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a)//?
console.log(b)//?

```