Why does the copy of an array using the spread operator when run through map modify the original array?

Question

Why does the copy of an array using the spread operator when run through map modify the original array?
What should i do here to not mutate the original array?

    const data = {hello : "10"};
    const prop = [{name : "hello", color: "red", value : ""}]
    
    const copyProp = [ ...prop ]
    
    copyProp.map(el => {
    	el.value = data[el.name] || ""
      	return el
    }) // 
    
    console.log(copyProp === prop) // -> false
    console.log(copyProp) // -> value: 10
    console.log(prop) // -> Value: 10 (Should still be "")

You're copying the array. You're not copying the objects that you mutate. — Bergi
– Bergi, Commented Jun 10, 2020 at 20:59

Code-Apprentice · Accepted Answer · 2022-07-11 03:23:25Z

5

The spread operator creates shallow copy of the array. In other words, you create a new array with references to the same objects. So when you modify those objects, the changes are reflected in the original array.

In general, when you need copy an array, you should consider making a deep copy. However, in this case, you just need to use map() correctly. map() creates a new array, so it can make the modified copy for you directly:

const copyProps = props.map(el => {
        return {
            ...el,
            value: data[el.name] || '',
        }
});

Here I copy each object using the spread operator. This means the resulting array has its own references of objects. This has the same caveat as your original solution: this is a shallow copy. For your example data, it is fine because all values and keys are strings. However, if your real data is more deeply nested with more arrays and objects, you will encounter the same problem.

edited Jul 11, 2022 at 3:23

answered Jun 10, 2020 at 20:50

Code-Apprentice

84k26 gold badges162 silver badges289 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Terry Over a year ago

There are many articles out there claiming an array is a clone without reference when using spread, they really should mention this edge case. I will accept this answer when my time is up, thx

Code-Apprentice Over a year ago

@Terry Can you give a link to such an article? I don't know what "a clone without reference" means. This isn't an edge case. This is exactly how the spread operator works.

Nenad Vracar · Accepted Answer · 2020-06-10 20:59:27Z

1

Both arrays and objects are passed by reference, so when you spread an array you create new array but fill it with references to original objects and when you modify those objects in the new array you still modify the same data in memory that is referenced in both arrays.

Also map method will always return new array so in this case you only need to clone objects and since here you do not have deeply nested objects you can use object spread syntax.

const data = {
  hello: "10"
};

const prop = [{
  name: "hello",
  color: "red",
  value: ""
}]

const copyProp = prop.map(el => ({ ...el,
  value: data[el.name] || ''
}))
console.log(copyProp)
console.log(prop)

answered Jun 10, 2020 at 20:59

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Collectives™ on Stack Overflow

Why does the copy of an array using the spread operator when run through map modify the original array?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related