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

You are just copying them by reference which means they are in the same location in memory so whatever you try to modify one of them the other will get modified in order to prevent this you should pass you in either of these ways:

1. Using Array.from()

object.array = Array.from(response);

2. Using slice()

object.array = response.slice();

3. Using spread syntax (...)

object.array = [...response];

4. Using JSON.parse/JSON.strigify

object.array = JSON.parse(JSON.stringify(response));

But in your particular case, only the last option will work as expected since you got a nested array, you need a deep copy of your element.

So the final result should be something like this:

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

Answer 2

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

Answer 3

This line object.array = response is just pointing to same memory location. Create a fresh copy of the object and update value in that

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