ES6 #2. Spread and Rest Operators

New operator  ...  was introduced in ES6 . Depending on the context it is called the Spread or the Rest operator. This operator provides a cleaner syntax when you are dealing with arrays or functions with a variable number of arguments and it benefits functional programming paradigm. Let’s explore it in more details.

Spread Operator

The spread operator allows to split elements of an array to separate values, that can be used as a function arguments or inside an another array. Let’s take a look at the following example:

  1. Let’s create two arrays. One contains a list of dynamic programming languages. The other contains a list of static  programming languages.

2. Now we want to create a list of all languages, using arrays that we have just defined plus adding some more languages to it. And then we’ll print the array and its length on the console .

As seen instead of one level list of values we’ve got two level array. The array allLanguages has 4 elements, two of them are arrays, and two of them are strings. Not exactly what we wanted. To get a one level array we can use   ... operator:

As you can see the  ... operator expands (spreads) the arrays elements. Now, the array allLanguages has 8 elements, all of them are strings.

To get the same result in ES5, we would use the concat() method:

As you see the solution is not that elegant. Using  the  ... operator provides better syntax.

One more example. We have the sum function, that expects three arguments and logs on the screen the sum of the arguments.

Without the  ... operator the function receives only one argument –   a . Its value is the array we sent. b  and  c  don’t receive any values so they stay undefined. As a result of a + b + c we have:

And again, to fix it we can use the  ... operator. It spreads the elements of the array so we get the correct result:

The  ... operator can be used with the push() method:

The  ... operator provides a simple way to clone and concatenate arrays.

Concatenate arrays:

Clone arrays:

The  ... operator can be used only in places where multiple values expected: inside arrays, arguments of a function, etc. In other places it will cause a syntax error:

You can use the  ... with simple arrays only. It can’t be used with objects.

Rest Operator

If the last argument of a function has the  ... operator as a prefix, it’s called the rest operator. It allows to use a variable number of  arguments as an array.

You can think of the rest operator as a successor of the arguments object. Let’s take a look at how the arguments object works:

The arguments object looks like an array but it’s an array like object.  Array methods are not applicable to it.

For applying array methods to arguments object you can use the call() method:

This syntax introduces a couple problems:

  • We have to indicate the context of the function invocation manually
  • We have a list of all the arguments passed to a function , even if we have named arguments in the function.
  • It has the hard-coded name. We cannot use a custom name.
  • Shorter syntax is more preferable

The   ...  operator provides a cleaner and more intuitive syntax, custom naming, a list of arguments as an array (not object), and it contains only arguments without a name in a function.

In this example we pass numbers as parameters to the logArguments function. It has regular arguments  a   and   b . They receive values   1 and    2 .  The last argument  c  with   ... as a prefix  collects all the rest values as an array.

Let’s take a look at one more example:

Argument with the   ... operator as a prefix is a simple array, so you can apply array methods to it.

You can use the  ... operator with the last parameter only. Otherwise it will throw an exception:


The  ... operator looks simple but it’s very powerful. It ads new functionality and improves syntax significantly. It has two meanings: spread and rest.

The Rest operator provides a simple and clean way to collect arguments as an array. It’s a better alternative for the arguments object.

The Spread operator improves syntax when you are dealing with simple arrays, simplifies concatenation and cloning arrays. You can use this operator when you create a new array out of existing arrays.