Have you ever wanted, or needed, to manipulate an array but in a non-destructive way? Yes? Well, good news then! The spread operator (…) can help us with this!

The spread operator allows us to “spread out”, or rather copy, the contents of an existing array and place them into a new one, all while leaving the originally existing array unharmed. Let’s look at some examples!

let ogArray = ['a', 'b', 'c']
-add element to the beginning:
let begArr = [1, 2, 3, ...ogArray]
console.log(ogArray)
console.log(begArr)
//['a', 'b', 'c']
//[1, 2, 3, 'a', 'b', 'c']
-add element to the end:
let endArr = ['x', 'y', 'z']
console.log(ogArray)
console.log(endArr)
//['a', 'b', 'c']
//['a', 'b', 'c', 'x', 'y', 'z']

Well, that’s great and all but what about other ways to manipulate an array??

One that I came across recently, was the reverse function; I needed to reverse an array, but leave the original one intact and unchanged. Spread operator to the rescue!

let arr = Array.from('queen')
console.log(arr)
//['q', 'u', 'e', 'e', 'n']
let rev = [...arr].reverse()
console.log(arr)
console.log(rev)
//['q', 'u', 'e', 'e', 'n']
//['n', 'e', 'e', 'u', 'q']

Thanks to the spread operator, we are able to essentially create a copy of our original array, and then can manipulate the copy while leaving the original alone!

If you’d like more details on other ways to use the spread operator, the MDN docs are a great resource!