DEV Community

Adam Preece
Adam Preece

Posted on

Destructuring arrays in JavaScript (also with added rest and spread!)

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


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:

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

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

Enter fullscreen mode Exit fullscreen mode

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

Let us destructure the array

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

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

Enter fullscreen mode Exit fullscreen mode
  • 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!

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
Enter fullscreen mode Exit fullscreen mode

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

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

Enter fullscreen mode Exit fullscreen mode

What about nested arrays? Can we destructure?

Hell yes!

Let us see the code!

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

Enter fullscreen mode Exit fullscreen mode

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

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

Enter fullscreen mode Exit fullscreen mode

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

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]

Enter fullscreen mode Exit fullscreen mode

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:

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

Enter fullscreen mode Exit fullscreen mode

This SPREADS the array, but there is a limitation:

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

Enter fullscreen mode Exit fullscreen mode

This is not allowed!

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


Joining arrays

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]

Enter fullscreen mode Exit fullscreen mode

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

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

Enter fullscreen mode Exit fullscreen mode

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

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

Enter fullscreen mode Exit fullscreen mode

Top comments (0)