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:

1. 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]; 

2. As Spread

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

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

Internally JavaScript does following

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

Hope this helps.