Spread syntax in an array of objects

Question

I have a question regarding the spread syntax and an array of objects.

Having an array of objects like:

const array = [{age:50}, {age:27}]

According to this answer: https://stackoverflow.com/a/54138394/6781511, using the spread syntax will result in referencedArray having a shallow copy of array.

const referencedArray = [...array]

What then is the difference between using the spread syntax and not using it?

const referencedArray = [...array]

vs

const referencedArray = array

Using the spread operator will make a shallow copy, not using it... won't. `clonedArray` is a bad name in that case, it's just another reference to the same object. — jonrsharpe, Oct 12 '21 at 15:54
With spread syntax (it's not an "operator") there will be *two* arrays, with the simple assignment there's just one. — Pointy, Oct 12 '21 at 15:55
`const referencedArray1 = [...array]; const referencedArray2 = array; array.push("hello"); console.log(referencedArray1, referencedArray2);` — epascarello, Oct 12 '21 at 16:20

score 1 · Answer 1 · answered Oct 12 '21 at 16:02

See the following example.

When you make a shallow copy, assigning to an element of the original doesn't affect the clone. When you don't make a copy, assigning to the original affects the other reference.

Since it's a shallow copy, assigning to properties of the objects in the array affects all of them. Only the array was copied by spreading, not the objects.

const array = [{age:50}, {age:27}];
const clonedArray = [...array];
const notClonedArray = array;

array[0] = {age: 100};
array[1].age = 30;
console.log("Original:", array);
console.log("Cloned:", clonedArray);
console.log("Not cloned:", notClonedArray);

score 0 · Answer 2 · answered Oct 12 '21 at 16:03

The objects within the arrays have the same reference in both, but in the spread scenario, modifying the array will not affect the original.

const array = [{ name: 'Joe' }, { name: 'Paul' }];
const spreadArray = [...array];
const cloneArray = array;

spreadArray[3] = { name: 'Bob' };
console.log(array); //  [{ name: 'Joe' }, { name: 'Paul' }];

cloneArray[3] = { name: 'Bob' };
console.log(array); //  [{ name: 'Joe' }, { name: 'Paul' }, { name: 'Bob'} ];

That's because cloneArray is assigned by reference to array, while spreadArray is assigned to a new array with the same elements as array. That's also why

cloneArray === array; // true
spreadArray === array; // false

Spread syntax in an array of objects

2 Answers2