DEV Community

loading...
Cover image for The spread operator in Javascript

The spread operator in Javascript

test555creator profile image Arika ・2 min read

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

Discussion (6)

pic
Editor guide
Collapse
mallockey profile image
Josh Melo

Awesome post! I always had a hard time understanding this one but your definition made much more sense than the MDM docs :)

After reading your post, there's one thing I'd note. It looks like the operator actually copies the contents of the object/array/whatever instead of just assigning it by reference. For example:

const obj = {
  a : 4,
  b : 3,
  c : 2
}
console.log(obj === {...obj})
//false

Enter fullscreen mode Exit fullscreen mode

This returns false because they are now two different copies, not a reference to each other. In fact this is the reason why in React its recommended to update state using the spread operator (or concat if its an array) as you are not modifying the original value but making a new one.

Collapse
wldomiciano profile image
Wellington Domiciano

Yes, obj === {...obj} returns false because they are different copies, but look at the code below:

const a = { x: 1, y: {v: 1, u: 2}, z: [1,2,3]}
const b = {...a}
console.log(a === b)     // false
console.log(a.y === b.y) // true
console.log(a.z === b.z) // true
Enter fullscreen mode Exit fullscreen mode

The property x was copied by value, but the properties y and z were copied by reference.

Collapse
aftabksyed profile image
Aftab Syed

Nice article with good examples

Collapse
markokoh profile image
Mark Okoh

I recently came accross the spread operator too - yet to try it out though. Your post nicely explains it.

Collapse
shrihankp profile image
Shrihan Kumar Padhy

Great one!
Tip: You should try carbon.now.sh for code screenshots. They look pretty cool

Collapse
bacloud14 profile image
bacloud14

Do you know pattern matching in functional programming? It's way more advanced.