Spread Syntax ES6

by
  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.

More Related Contents:

  1. What is SpreadElement in ECMAScript documentation? Is it the same as Spread syntax at MDN?
  2. Is it spread “syntax” or the spread “operator”?
  3. Spread Syntax vs Rest Parameter in ES2015 / ES6
  4. Deep copy in ES6 using the spread syntax
  5. Using spread operator multiple times in javascript?
  6. Spreading undefined in array vs object
  7. Usage of rest parameter and spread operator in javascript
  8. Private properties in JavaScript ES6 classes
  9. Why can I change a constant object in javascript
  10. Array.fill(Array) creates copies by references not by value [duplicate]
  11. Defer execution for ES6 Template Literals
  12. How to import ES6 modules in content script for Chrome Extension
  13. New es6 syntax for importing commonjs / amd modules i.e. `import foo = require(‘foo’)`
  14. ES6 promise settled callback?
  15. How to extend Function with ES6 classes?
  16. Angular 2 dependency injection in ES5 and ES6
  17. Extending built-in natives in ES6 with Babel
  18. Typescript export vs. default export
  19. javascript es6 array feature […data, 0] “spread operator”
  20. How to add multiple classes to a ReactJS Component?
  21. Browserify, Babel 6, Gulp – Unexpected token on spread operator
  22. ES6 destructuring object assignment function parameter default value
  23. What does the arrow function with a () after means? [duplicate]
  24. Destructuring deep properties
  25. Using ‘let’ as a variable name is not throwing any errors in google v8
  26. Is this a good way to clone an object in ES6?
  27. What are getters and setters for in ECMAScript 6 classes?
  28. “unexpected token import” in Nodejs5 and babel?
  29. How to get the target of a JavaScript Proxy?
  30. ES6 module scope

Leave a Comment