Spread Syntax ES6

  1. In your example given, there is essentially no difference between the two
  2. .concat is significantly more efficient: http://jsperf.com/spread-into-array-vs-concat because ... (spread) is merely syntax sugar on top of more fundamental underlying syntax that explicitly iterates over indexes to expand the array.
  3. Spread allows sugared syntax on top of more clunky direct array manipulation

To expand on #3 above, your use of spread is a somewhat contrived example (albeit one that will likely appear in the wild frequently). Spread is useful when – for example – the entirety of an arguments list should be passed to .call in the function body.

function myFunc(){
    otherFunc.call( myObj, ...args );
}

versus

function myFunc(){
    otherFunc.call( myObj, args[0], args[1], args[2], args[3], args[4] );
}

This is another arbitrary example, but it’s a little clearer why the spread operator will be nice to use in some otherwise verbose and clunky situations.

As @loganfsmyth points out:

Spread also works on arbitrary iterable objects which means it not only works on Arrays but also Map and Set among others.

This is a great point, and adds to the idea that – while not impossible to achieve in ES5 – the functionality introduced in the spread operator is one of the more useful items in the new syntax.


For the actual underlying syntax for the spread operator in this particular context (since ... can also be a “rest” parameter), see the specification. “more fundamental underlying syntax that explicitly iterates over indexes to expand the array” as I wrote above is enough to get the point across, but the actual definition uses GetValue and GetIterator for the variable that follows.

Leave a Comment

tech