DEV Community

Understanding the Spread Operator in JavaScript

Marina Mosti on February 26, 2019

{...object} The first time I looked at this I was really confused about what it was supposed to mean, or even do, but harnessing the power of the ...

Read full post

Fran González • Feb 27 '19 • Edited

Good article! However, I feel like it's important to mention that the spread operator does not perform a deep clone on objects, but rather a shallow copy. This means that the spread operator will copy simple values (such as integers, strings and such) but keep the same references for objects. For example:

const obj = { a: 1, b: { a: 1 } };
const copy = {...obj}
copy.b.a = 2

console.log(obj.b.a)
console.log(copy.b.a)

This prints 2 and 2 because the property b was shallow copied, which makes copy.b point to the exact same object as obj.b.

Marina Mosti • Feb 27 '19

Hey Fran, thanks for the addendum. I actually should have probably put a little more clarity on this part, but i've made a small correction and your example is also super clear

Mihail Malo • Feb 27 '19 • Edited

const randoms = function*(x){while(true)yield Math.random()*x|0}
const [a, b, c] = randoms (1000)
console.log(a, b, c)

Jackson Day • Feb 27 '19 • Edited

Great intro to spread! Looks super useful for making copies. Though at the end, I believe you mean to say

original.child == copy.child

(not

original.child == original.copy

) is that right?

Marina Mosti • Feb 27 '19

🤦‍♀️This is why you dont hotfix posts while doing 3 other things. Thanks! :)

Raul Hernandez • Aug 3 '22

Hi Marina,
thanks a lot for your instructive and funny to read article. Like your style.

I would like to ask you (if you ever revisit this article) , about what you say

both obj and anotherObj are actually pointing to the same object. So if you change one or the other, they will both change because the pesky pointer

How the object should be changed in order to change also its copy?
I just tried in the console to do

baseObject.name="otherName
And when I consolelog both, the copy remain untouched.

Thanks in advance if you ever take the time to answer!

Damola Adekoya • Feb 27 '19

I love spread operator it has saved me lot of times.. instead of using Array.prototype.slice..
Because I always mix it up with Array.prototype.splice...

Marina Mosti • Feb 27 '19

All ways lead to Rome :) But this one is definitely one of the easier/shorter ones

Damola Adekoya • Feb 27 '19

Yeah

Abdul Wahab • Sep 10 '19

Once again thankyou

I have read so many articles on the same topics
But you are special. I know i should be writing the code as well at the same time
But here i go looking to read another article from you

iPAS • Jul 13 '19

Does it seems like in Python? that

func(1, 2, a=1, b=2)

def func(args, **kwargs):
print(*args) --> [1, 2]
print(*kwargs) --> {a: 1, b: 2}

Drozerah • Feb 26 '19

Really nice and easy way to make copy ! :)

Marina Mosti • Feb 27 '19

Thanks Drozerah!

Todd Eidson • Feb 27 '19

I always preferred the term 'splat' operator. It sounds so much cooler. Nice article, thanks!

Marina Mosti • Feb 27 '19

Thanks for reading :)

Will Taylor • Feb 27 '19

Really great explanation of this! Especially like that you gave the example of copying an object in that way. That's a super important use case.

Marina Mosti • Feb 27 '19 • Edited

You're right, it's very simple and super useful :)

Birju Shah • Feb 27 '19

Nice article. Would you mind mentioning that the copy with the spread operator creates a shallow copy of the object and not a deep one.

Marina Mosti • Feb 27 '19

Hey Birju, you're right. I try to keep these as simple as possible and sometimes overlook some of the more advanced concepts in favor of clarity. Will make a note, thanks

Gabriel Mayta • Feb 26 '19 • Edited

Great article, very clear!

Marina Mosti • Feb 27 '19

Hey Gabriel, thanks a ton :D