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
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
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
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
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
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
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]
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
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
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]
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
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)//?
Top comments (0)