ES2015 Lesson 6: Spread and Rest


The Spread operator and Rest parameters are two related features in ES2015 that are worth learning. You can do cool things with them, and they often make your code a lot more compact.

Rest parameters

In some cases, you might want to deal with processing a variable number of arguments. In ES5, it was possible to use the arguments array inside a function to access them as an array:

In ES2015, the last argument of a function can be preceded by .... This argument collects all the remaining arguments of the function in an array. The name for this construct is rest parameters, because it contains the rest of the parameters passed to a function.

Let’s rewrite the above function in ES2015:

Note that the argument list containing rest parameter is placed in parentheses. This is mandatory, as ...args is equivalent to arg1, arg2, arg3.

The rest parameter has to be the last argument of a function. As a consequence, there can only be one rest parameter in a function. It is not possible to perform a pop operation from an argument list using f(...args, lastArg). If the rest parameter is not the last argument of the argument list of a function, an error is thrown.

Spread operator

In ES5, we often used the apply method to call a function with variable number of arguments. The spread operator makes it possible to achieve the exact same thing in a compact way.

Suppose you would like to write a method that returns the sum of its arguments. Let’s write this function in ES5:

When we know the parameters we pass the function, we have an easy job calling sumArgs. However, sometimes it makes little to no sense to write out 100 parameters. In other cases, the number of parameters is not known. This is when the apply method of JavaScript was used in ES5.

In ES2015, our job is a lot easier. We can simply use the spread operator to call sumArgs in the exact same way as above. The spread operator spreads the elements of an array, transforming them into a parameter list.

Opposed to rest parameters, there are no restrictions on the location where the Spread operator is used in the parameter list. Therefore, the following call is also valid:

Strings are spread as arrays of characters

If you would like to process a string character by character, use the spread operator to create an array of one character long strings in the following way:

Destructuring with the spread operator

Let’s create an array that contains the last four characters of another array:

If there are no elements left, the result of a destructuring assignment involving a spread operator is [].

Similarly to the rest parameter in functions, using ... on the left of a destructuring expression creates a match for all the remaining elements of the array:

Similarly to the rest parameter in functions, on the left side of a destructuring assignment, it is only allowed to use the rest parameter as the last element of an array.

In order to fully understand the utility of the spread operator and rest parameters, I encourage you to do the exercises. This is a very important section, and we will build on it in the future.

Exercises

Exercise 1. Make a shallow copy of an array of any length in one destructuring assignment! If you don’t know what a shallow copy is, make sure you read about it, as you will need these concepts during your programming career. I can highly recommend my article on Cloning Objects in JavaScript.

Exercise 2: Determine the value logged to the console on Google Chrome without running it. Write down the mechanism behind it using your own words.

Exercise 3. Create an 10×10 matrix of null values.

Exercise 4. Rewrite the sumArgs function of this tutorial in ES2015, using a rest parameter and arrow functions.

Exercise 5. Complete the following ES2015 function that accepts two String arguments, and returns the length of the longest common substring in the two strings. The algorithmic complexity of the solution does not matter.