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 and set it to the response variable.

I would think I am creating a new scope. However, if I set the age inside object.array as null, this sets the age in my response array to null.

Why is this happening and how can I create a duplicate variable that doesn't affect the original? I need to keep the above variables as is. So object needs to be an object and I need to create an array within which is set to the response and it needs to be inside a for loop.

This is my code:

function runThisLoop () {

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


    var object = {}
    object.array = response

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

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

runThisLoop()

SMAKSS · Accepted Answer · 2020-05-12T18:45:34.477

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:

Using Array.from()

object.array = Array.from(response);

Using slice()

object.array = response.slice();

Using spread syntax (...)

object.array = [...response];

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

score 0 · Answer 2 · answered May 12 '20 at 18:11

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

score 0 · Answer 3 · answered May 12 '20 at 18:22

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

javascript for loop changes original list variable

3 Answers3

Linked

Related