Spread Syntax vs Rest Parameter in ES2015 / ES6

Question

I am confused about the spread syntax and rest parameter in ES2015. Can anybody explain the difference between them with proper examples?

Answer 1

When using spread, you are expanding a single variable into more:

var abc = ['a', 'b', 'c'];
var def = ['d', 'e', 'f'];
var alpha = [ ...abc, ...def ];
console.log(alpha)// alpha == ['a', 'b', 'c', 'd', 'e', 'f'];

When using rest arguments, you are collapsing all remaining arguments of a function into one array:

function sum( first, ...others ) {
    for ( var i = 0; i < others.length; i++ )
        first += others[i];
    return first;
}
console.log(sum(1,2,3,4))// sum(1, 2, 3, 4) == 10;

Answer 2

ES6 has new feature three dots ...

Here is how we can use these dots:

As Rest/Collector/Gather

var [c, ...m] = [1,2,3,4,5]; // m -> [2,3,4,5]

Here ...m is a collector, it collects the rest of the parameters. Internally when we write:

var [c, ...m] = [1,2,3,4,5]; JavaScript does following

var c = 1,
    m = [2, 3, 4, 5];

As Spread

var params = [ "hello", true, 7 ];
var other = [ 1, 2, ...params ]; // other => [1,2,"hello", true, 7]

Here, ...params spreads so as to assing all of its elements to other

Internally javaScript does following

var other = [1, 2].concat(params);

Hope this helps.

Answer 3

Summary:

In javascript the ... is overloaded. It performs a different operations based on where the operator is used:

1. When used in function arguments of a function declaration/expression it will convert the remaining arguments into an array. This variant is called the Rest parameters syntax.
2. In other cases it will spread out the values of an iterable in places where zero or more arguments (function calls) or elements (array literals) are expected. This variant is called the Spread syntax.

Example:

Rest parameter syntax:

function rest(first, second, ...remainder) {
  console.log(remainder);
}

// 3, 4 ,5 are the remaining parameters and will be 
// merged together in to an array called remainder 
rest(1, 2, 3, 4, 5);

Spread syntax:

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

// the numbers array will be spread over the 
// x y z parameters in the sum function
console.log(sum(...numbers));


// the numbers array is spread out in the array literal
// before the elements 4 and 5 are added
const newNumbers = [...numbers, 4, 5];

console.log(newNumbers);

Answer 4

When we see "..." in the code, it is either rest parameters or the spread operator.

There’s an easy way to distinguish between them:

When ... is at the end of function parameters, it’s “rest parameters” and gathers the rest of the list into the array. When ... occurs in a function call or alike, it’s called a “spread operator” and expands an array into the list. Use patterns:

Rest parameters are used to create functions that accept any number of arguments. The spread operator is used to pass an array to functions that normally require a list of many arguments. Together they help to travel between a list and an array of parameters with ease. For more information about this click here

Answer 5

Basically like in Python:

>>> def func(first, *others):
...    return [first, *others]
>>> func('a', 'b', 'c')
['a', 'b', 'c']

Answer 6

Added in ES6 these three dots ... has two meanings, Spread operator and Rest parameter

Spread operator: You use the three dots to expand iterables, by iterables I mean arrays, string, etc. As arguments. For example Math.max() function expect an indeterminate number of arguments so you can use Spread operator to expand elements as arguments on Math.max() function. Here an example from mdn

console.log(Math.max(1, 3, 2));
// expected output: 3

console.log(Math.max(-1, -3, -2));
// expected output: -1

var array1 = [1, 3, 2];

console.log(Math.max(...array1));
// expected output: 3

Another use case is to add, for example having this array

const videoGames = ['mario galaxy', 'zelda wind waker', 'ico'];

You can add it to another array

const favoritesVideoGames = ['Shadow of the colosus', ...videoGames];

Then favoritesVideoGames value is

[ 'Shadow of the colosus', 'mario galaxy', 'zelda wind waker', 'ico' ]

About Rest parameter, here the MDN definition

The rest parameter syntax allows us to represent an indefinite number of arguments as an array.

This means you can pack many elements into a single element

Here an example from MDN

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));
// expected output: 6

console.log(sum(1, 2, 3, 4));
// expected output: 10

I usually get confused with these three points, this illustration by @stephaniecodes helps me to remember its logic. I mention that I took inspiration from this illustration to answer this question.

I hope it is useful.

Answer 7

Javascript's three dots ( ... ) operator can be used in two different ways:

1. Rest parameter: collects all remaining elements into an array.

var days = ["Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri"];
const [sat, sun, ...weekdays] = days;
console.log(sat); // "Sat"
console.log(sun); // "Sun"
console.log(weekdays); // ["Mon", "Tue", "Wed", "Thu", "Fri"]

2. Spread operator: allows iterables( arrays / objects / strings ) to be expanded into single arguments/elements.

var weekdays = ["Mon", "Tue", "Wed", "Thu", "Fri"];
var days = [...weekdays, "Sat", "Sun"]; 
console.log(days) // ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

Note that the spread operator can be the first element, but the rest parameter needs to be the last to collect the rest elements .