JavaScript ES6: Spread Operator and Rest Parameters

ES6 has some great features that make working with function parameters and arrays extremely easy. Let’s take a look at two of these features: the spread operator and rest parameters.

Spread Operator

The spread operator “spreads” the values in an iterable (arrays, strings) across zero or more arguments or elements. I’ll explain exactly what that means later on. But first, let’s look at how we might combine two arrays:

This method works and does exactly what we want it to: take arr2 and stick it on the end of arr1. But this requires us to remember the concat method. It would be nicer to be able to do something like this: [1, 2, 3, 4, arr2]. Here’s what happens if we try that:

Now we’ve ended up with a nested array. We could use a for loop, but that’s a lot of code to accomplish a relatively simple task. Thanks to ES6 we now have an easier way to combine two arrays: the spread operator.

As mentioned above, the spread operator takes an array (or any iterable) and spreads it values. Let’s take a look at how it works:

That is much more simpler! The spread operator (…) takes the values of arr1 and spreads them across arr2. We could also write the above example like this:

The spread operator can also be used in a function call. Let’s say we have a function that takes a number of parameters and we have the parameters we want to pass it stored in an array. How can we call the function and pass the array of parameters? Here’s how we’d do that before ES6:

Again, it would be nice to be able to do something like this: mySum(params). Here’s what happens if we try that:

Using the spread operator we can write the above example as follows:

As you can see, the spread operator takes the array of parameters and spreads them across the arguments in the function call. But what if we need our function to be able to work with an unknown number of parameters? That’s where the rest parameter comes in.

Rest Parameter

Before we look at the rest parameter let’s look at the problem it solves. We have a function that multiples the arguments we pass it and we need to be able to pass it any number of arguments. Here’s how we would write that function before ES6:

Since the argument object isn’t an array, we first have to convert it into an array using the Array.from method before we can use the reduce method (if you’ve never seen the reduce method before, here’s a helpful link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce).

Again, this method works, but it’s quite cumbersome. The rest parameter gives us an easier and cleaner way of working with an indefinite number of parameters. Let’s rewrite the above example with a rest parameter:

Using the rest parameter (…), which is the same syntax as the spread operator, we can pass an indefinite number of parameters to our function. These parameters are available within our function as an array called args (or whatever name you passed the function). Using the rest parameter in the above example removed one line of code, making our code cleaner and easier to read.

Summary

The spread operator allows us to spread the value of an array (or any iterable) across zero or more arguments in a function or elements in an array (or any iterable). The rest parameter allows us to pass an indefinite number of parameters to a function and access them in an array.