DEV Community

What Javascript Spread Operator is, How It Works and How to Use It

Alex Devero on September 14, 2020

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will lea...

Read full post

Jeremy Forsythe • Sep 14 '20 • Edited

It doesn't actually create a deep copy.

const arr1 = [ { name: 'Abe' } ];
const arr2 = [...arr1];
arr2[0].name = 'Ben';
console.log(arr1[0].name); // Ben

The same is true with objects. It just copies the first level of properties to the new iterable. If the values are primitives, it copies by value, but if they're objects it copies by reference.

Alex Devero • Sep 21 '20

Thank you Jeremy for pointing this out. You are correct. Spread will create deep copy only for the top-level properties. In other cases, combination of JSON.parse() and JSON.stringify will create a deep copy.

pentacular • Sep 15 '20

I can't find anything about copy by reference in the ecmascript standard.

ecma-international.org/publication...

Can you show me what I'm missing?

What I do see in the standard is that the value of the object is copied, but that this is separate to the properties of the object -- is this what you're calling copy by reference?

Jeremy Forsythe • Sep 22 '20

The spec does not say it copies the value of the object, it says "keys and their values are copied onto a new object". tc39.es/proposal-object-rest-spread/

It is well know that making a "copy" of a primitive copies the value and making a "copy" of an object also copies the value, but the value is a reference to that object and not a clone of the object. This is what people refer to when they say copy "by reference" and is the source of the value vs reference debate which turns out to be a mostly semantic debate. JS copies by value but sometimes the value is a reference.

The proposal for this operator specifically calls it a "shallow clone (excluding prototype)" and it's just syntactic sugar for Object.assign() github.com/tc39/proposal-object-re...

Object.assign is 19.1.2.1 in the spec and you'll see there's no recursion and therefore it's not a deep copy/clone. It loops through the OwnPropertyKeys once and does a Get from the source and a Set on the target. It does not evaluate the OwnPropertyKeys of the value if the value is an object.

Alex Devero • Sep 21 '20

Hi. I wrote about this topic of deep and shallow copies, or copy by value and copy by reference, a few months ago. Here is the link to that article: blog.alexdevero.com/shallow-deep-c...

pentacular • Sep 21 '20

Ok, I think I see the argument that you're making, but I don't think that it is sound.

A reference isn't a shallow copy -- it's a way to reach the original thing.

And pass by value doesn't imply a deep copy -- two distinct values can be used to indirectly access the same sub-structures.

You make the claim that:

This is not true for objects, including iterables. When you try to copy an object, such as array, you will not create a real copy. What will happen instead is that JavaScript will create new reference for that object. You can think about this as creating new alias or name.

Can you point me to where in the ecmascript standard it talks about creating a new reference for an object?

Or do you mean that it 'passes the value of the object, which allows access to the associated properties, making this a shallow copy of the original'?

This argument seems more reasonable -- but it doesn't involve any references or copy by reference -- it's simply copy by value, where the properties of the object are indirectly accessed by the object value.

But if you can show me where I've missed object references in the language specification, I'd be grateful.

Fernando Henrique • Nov 4 '22

Excellent article, keep contributing to the javascript community