Spread Syntax ES6

Question

Consider the following sample code

var x = ["a", "b", "c"]; var z = ["p", "q"];  var d = [...x, ...z];  var e = x.concat(z); 

Here, the value of d and e are exactly same and is equal to ["a", "b", "c", "p", "q"], so,

1. What exactly is the difference between these two?
2. Which one is more efficient and why?
3. What exactly is the use of spread syntax?

Don't you think the introduction of these little shortcuts in a formal vast language may leave some unnoticed bugs, I mean either it is pretty unnecessary or I do not realize it's need properly.

Answer 1

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.