Spread syntax in an array of objects

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

2 answers

  • answered 2021-10-12 16:02 Barmar

    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);

  • answered 2021-10-12 16:03 Eldar B.

    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
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum