ES6: Spread Operator

6min read

The spread syntax allows arrays, objects and array like objects (e.g. arguments object, DOM node objects) to be expanded in places where multiple arguments (for function calls) are expected. In order to use the spread operator simply write three dots “…” preceeding the expression that should get “spread”.

The Spread Operator is a sibling of the Rest Parameter which both share the same syntax. It is a great new feature and probably best observed in action.

The better apply

We can use the spread operator instead of apply to call a function and pass it an array of arguments.

ES5

ES6

Merging arrays

We can use the spread operator to merge multiple arrays.

ES5

ES6

The array can be spreaded anywhere it is necessary.

As initially stated it works not only for arrays and array-like objects but also objects itself. We can use the spread operator to create a fresh new copy of an object that inherits all the properties of the cloned object. But be aware: the spread operator is not suitable to deep clone an object as it goes only one level deep.

Copy an array

We can use it to make a frew new copy of an array without a reference.

ES5

ES6

Convert array-like objects to arrays

Sometimes it is necessary to convert an array-like object to an array, e.g. in order to use methods which are only available for arrays such as filter, map or reduce.

ES5

ES6

43 replies

Trackbacks & Pingbacks

  1. … [Trackback]

    […] Find More Information here to that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  2. … [Trackback]

    […] Find More here to that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  3. … [Trackback]

    […] Find More Information here to that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  4. … [Trackback]

    […] Find More here on that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  5. sahabatkartu says:

    … [Trackback]

    […] Find More Information here to that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  6. mejaqq says:

    … [Trackback]

    […] Read More Info here on that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  7. … [Trackback]

    […] Here you can find 30975 more Information to that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  8. … [Trackback]

    […] Find More on on that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  9. cvv sites says:

    … [Trackback]

    […] Read More here to that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  10. … [Trackback]

    […] Find More on that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  11. […] 1127228084258779897577937057145323407796017167870434515318812876129641818497 Post navigation ← Previous PostNext Post → […]

  12. … [Trackback]

    […] Information on that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  13. bonanza178 says:

    … [Trackback]

    […] Find More on that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  14. leonax.net says:

    … [Trackback]

    […] Here you can find 8136 additional Information to that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  15. … [Trackback]

    […] Here you can find 78174 more Information on that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  16. … [Trackback]

    […] Info to that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  17. y2mate says:

    … [Trackback]

    […] Read More Info here on that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  18. Zweefparasol says:

    … [Trackback]

    […] Info on that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  19. check that says:

    … [Trackback]

    […] Find More here to that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  20. … [Trackback]

    […] Read More Info here on that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  21. … [Trackback]

    […] Find More on that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  22. … [Trackback]

    […] Read More here to that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  23. … [Trackback]

    […] Read More to that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  24. … [Trackback]

    […] Info to that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  25. p365 gun says:

    … [Trackback]

    […] Find More to that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  26. brians club says:

    … [Trackback]

    […] Information on that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  27. 365 pistol says:

    … [Trackback]

    […] Read More Info here on that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  28. redditsave says:

    … [Trackback]

    […] Find More here on that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  29. ufa says:

    … [Trackback]

    […] Find More Info here on that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  30. … [Trackback]

    […] Read More Information here on that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  31. … [Trackback]

    […] Here you will find 9930 more Information to that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  32. … [Trackback]

    […] Info on that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  33. Investment says:

    … [Trackback]

    […] Read More Info here to that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  34. Dividend says:

    … [Trackback]

    […] Info on that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  35. … [Trackback]

    […] Information to that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  36. … [Trackback]

    […] Find More to that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  37. … [Trackback]

    […] Find More on that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  38. … [Trackback]

    […] There you will find 11626 additional Info on that Topic: ilearnjavascript.com/es6-spread-operator/ […]

  39. URL says:

    … [Trackback]

    […] Read More here: ilearnjavascript.com/es6-spread-operator/ […]

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *