JavaScript: The Spread operator can be destructive.

While learning React, I was taught to use the spread operator to copy an array. This is not always a good idea.

Posted on Tuesday, April 12, 2022 @ 08:59 AM UTC by Kaine

When updating the state in React I was taught to first copy the objects using the spread operator. Yet, this doesn’t copy the objects, it copies the reference of the object. ie, it’s the same object!

If you’re unaware of it, this could catch you off guard.

Consider the below:

const array1 = [
  { id: 1, name: "John" },
  { id: 2, name: "Jane" },
];
const array2 = [...array1];

We create an array called array1, and we ‘copy’ it using the spread operator ‘...’

We can update a copy, and the original will be intact, right? Nope, wrong.

array2[0]["name"] = "Bob";

If we take a look at each array, we can see that both arrays have the same objects.

// array1
[
  { id: 1, name: "Bob" },
  { id: 2, name: "Jane" },
];

// array2
[
  { id: 1, name: "Bob" },
  { id: 2, name: "Jane" },
];

Why is this happening and why does the below seem to work?

const array1 = [1, 2, 3];
array2 = [...array1];
array1[0] = 33;

// array1
[(33, 2, 3)];

// array2
[(1, 2, 3)];

Any ideas? I am going with mutability.

In JavaScript, only objects and arrays are mutable, not primitive values.

If you’ve never heard of mutability, mutable and immutable. Think mutant and mutation. In layman’s terms, changeable and unchangeable. You can read more on MDN

Still don’t follow? Well, we can’t actually change the number 1 to number 33. What actually happens is we’re dumping out the reference to number 1 and changing it to the reference to number 33.

In our original example, we used objects, which ARE mutable. So the object is the same. We have a list (array) of objects, and if we copy that list we still have the same reference to the object in memory. And if we change that object in memory, both lists reference the same object so both lists update.

I hope that explains it.

Great, you’ve proved your point! But how do I clone an array of objects to update the state without changing the original?

Well, good question.

The only solution I’ve seen that is also short. It uses the map method of the Array class.

const array2 = array1.map((item) => ({ ...item }));

We’re creating a new object, with the same key-value pairs. So it has a new reference and thus it doesn’t change when we update the original.

const array1 = [
  { id: 1, name: "John" },
  { id: 2, name: "Jane" },
];

const array2 = array1.map((item) => ({ ...item }));

// array2 is a copy of array1, but with new objects.

> array2
[
  { id: 1, name: "John" },
  { id: 2, name: "Jane" },
];

// lets change array2
array2[0]["name"] = "Bob";


// we can see that array2 has changed and that array1 hasn't changed!
> array2
[
  { id: 1, name: "Bob" },
  { id: 2, name: "Jane" },
];

> array1
[
  { id: 1, name: "John" },
  { id: 2, name: "Jane" },
];

And hey, with this code we’re still using the spread method, right?

Update 24/04/2023

If you’d like to do a deeper copy then you can use the below:

const array2 = JSON.parse(JSON.stringify(array1));

However, that can also have problems depending what you’re using it for.

By the way, as for me, one of the biggest problems of cloning with JSON.stringify() is that methods are not supported by it

Petro Zubar

And if you’re thinking about using Lodash, Radash is the new kid on the block.

Hope that helps!

Kaine