javascript for loop changes original list variable

Question

I have a collection of objects called the response and I am creating another variable called object that\'s an empty object and creating object.array a

Answer 1

There is a difference between "shallow copies" and "deep copies/clones".

Copied from the link above:

Shallow copy

Shallow copy is a bit-wise copy of an object. A new object is created that has an exact copy of the values in the original object. If any of the fields of the object are references to other objects, just the reference addresses are copied i.e., only the memory address is copied.

Deep copy

A deep copy copies all fields, and makes copies of dynamically allocated memory pointed to by the fields. A deep copy occurs when an object is copied along with the objects to which it refers.

Here you find more information about how to do deep cloning: What is the most efficient way to deep clone an object in JavaScript?

A possible solution:

function runThisLoop () {

    var response = [{
        name: 'Name A',
        age: 2
    },
    {
        name: 'Name B',
        age: 7
    }]


    var object = {}
    object.array = JSON.parse(JSON.stringify(response));

    for (var val of object.array) {
        val.age = null
    }

    console.log("response", response)
    console.log("object.array", object.array)
}

runThisLoop()

function runThisLoop () {

    var response = [{
        name: 'Name A',
        age: 2
    },
    {
        name: 'Name B',
        age: 7
    }]


    var object = {}
    object.array = response.map(x => x);

    for (var val of object.array) {
        val.age = null
    }

    console.log("response", response)
    console.log("object.array", object.array)
}

runThisLoop()