Using the Spread Operator (...) in JavaScript

The Spread Operator lets you spread or expand an iterable data structure like an array or object. I’ve found it to be most useful on arrays, so that’s what we’ll look at in this article.

Here is a basic example to understand right away what it is.

Say we have these two arrays:

let myFruit = [ “banana”, “pear”, “orange” ]

let yourFruit = [ “cherry”, “grapes”, “tangerine”]

Suppose we wanted to add myFruit to yourFruit. We might try this:

const yourFruit = [ “cherry”, “grapes”, “tangerine”, yourFruit]

and if we console.log yourFruit, we’d get:

[ “cherry”, “grapes”, “tangerine”,  [ “banana”, “pear”, “orange” ]]

myFruit did get added to yourFruit, but as a nested array. I was hoping to have a concatenated list.

Enter the Spread Operator. To get a concatenated list, all we have to do is add three dots before yourFruit to use the spread operator:

const yourFruit = [ “cherry”, “grapes”, “tangerine”, ...yourFruit]

And then we’ll get what we wanted when we console.log again:

yourFruit = [ “cherry”, “grapes”, “tangerine”,  “banana”, “pear”, “orange” ]

So you can remember that the spread operator s p r e a d s out an array and “unpacks” the array’s individual elements.

But there are other applications of the Spread Operator.

We can use the Spread Operator to find the highest number of an array.

For example, suppose we want to find the highest number of in an array of integers:

let scores = [ 97, 85, 84, 76, 60, 83, 54]

We could just iterate over the loop, but why do that when we can use a handy-dandy js math method called “max”
to find the highest number:

Math.max(scores)

When we console.log Math.max and pass in “scores” as you see above we get:

NaN

Not a Number. Ooops! We passed in an array to Math.max, but an array is not a number. So what if we used the Spread Operator instead:

Math.max(...scores)

Now, when we console.log log, we get

97

Now for our next trick, let’s copy an array

let arr1 = [ 1, 2, 3]

When I was a beginner at JS, I would have tried to
copy arr1 like this:

let arr2 = arr1

However, this didn’t work as all I did was copy the address of the array in memory, not the actual array. But how do I make a real clone of my arr1. Spread Operator to the rescue! Let try this:

let arr3 = [...arr1]

Now arr3 will be a separate array, have a different address in memory from arr1, but will contain the same elements as array1.

Use of (...) in a function

When we write a function in JavaScript, sometimes there will be a varying number of arguments passed. How do we make our functions “flexible” so that they will accept, for example, 2 arguments, 3 arguments, or more?

We can use the spread operator again. However, when we use it like this, it changes name and becomes the “rest operator”:

1 function myFun(a, b, ...manyMoreArgs) {
2   console.log("a", a)
3   console.log("b", b)
4   console.log("manyMoreArgs", manyMoreArgs)
5 }
6
7 myFun("one", "two", "three", "four", "five",  8"six")

9   // Console Output:
10  // a, one
11  // b, two
12  // manyMoreArgs, [three, four, five, six]

Notice how in our myFun function, we can pass argument “a”, argument “b” (“a” and “b” are required parameters in our myFun function). Then we can pass any number of additional arguments. And the way we indicate this in our function signature on line 1 above is by using the three dots and giving those remaining arguments some variable name. In this case, we’re calling
that variable number of arguments “manyMoreArgs”.

We call myFun and pass in the arguments on line 7.

In the comments on line 9 - 12, you can see how the arguments passed in are logged out. Notice how the rest parameter ...manyMoreArgs logged out an array to contain its arguments. When you give the rest operator a number of arguments, those arguments are contained in an array.

And there you have a short introduction to one of the powerful features of the ES6 specification of JavaScript--the Spread Operator. Its syntax is simple, but its implementation can seem a little abstract until you get down on the floor and draw some pictures as we’ve tried to do here.

Keep on coding out your dreams!

Namaste