The spread operator in Javascript

When I first stumbled upon the … operator it looked confusing and I didn’t really know what to do with it. Javascript already had built in functions that were doing the exact same thing as this new operator so the need to integrate it in my code wasn…


This content originally appeared on DEV Community and was authored by Arika

When I first stumbled upon the ... operator it looked confusing and I didn't really know what to do with it. Javascript already had built in functions that were doing the exact same thing as this new operator so the need to integrate it in my code wasn't very clear to me. Today, after I used it for quite a while, it's one of my favorite ES6 features and it helps me manipulate arrays and strings much easier than before.

MDN says that:

"Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected."

Pretty simple, no? In plain English this means that this operator spreads the items inside an iterable (be it string, array, set or anything that we can loop through really) inside a receiver (a receiver is something that receives the spread values).

Now that we got the definition out of the way, what exactly can we do with this operator?

1. Copy an array
Alt Text

2. Copy an array and add new elements to it
Alt Text

3. Concatenate arrays
Alt Text

This works with arrays holding different types or mixed arrays, like so.

Alt Text

Alt Text

4. Spread elements on function calls
Alt Text

5. Copy object literals
Alt Text

6. Concatenate and add new properties to object literals
Alt Text

Image source: negativespace/ @negativespace on Pexels


This content originally appeared on DEV Community and was authored by Arika


Print Share Comment Cite Upload Translate Updates
APA

Arika | Sciencx (2021-02-08T19:30:00+00:00) The spread operator in Javascript. Retrieved from https://www.scien.cx/2021/02/08/the-spread-operator-in-javascript/

MLA
" » The spread operator in Javascript." Arika | Sciencx - Monday February 8, 2021, https://www.scien.cx/2021/02/08/the-spread-operator-in-javascript/
HARVARD
Arika | Sciencx Monday February 8, 2021 » The spread operator in Javascript., viewed ,<https://www.scien.cx/2021/02/08/the-spread-operator-in-javascript/>
VANCOUVER
Arika | Sciencx - » The spread operator in Javascript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/08/the-spread-operator-in-javascript/
CHICAGO
" » The spread operator in Javascript." Arika | Sciencx - Accessed . https://www.scien.cx/2021/02/08/the-spread-operator-in-javascript/
IEEE
" » The spread operator in Javascript." Arika | Sciencx [Online]. Available: https://www.scien.cx/2021/02/08/the-spread-operator-in-javascript/. [Accessed: ]
rf:citation
» The spread operator in Javascript | Arika | Sciencx | https://www.scien.cx/2021/02/08/the-spread-operator-in-javascript/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.