Strange Javascript Variable Function Scope With Loop [duplicate]

Question

I am experiencing some strange behavior when trying to do the following:

1. Create a base JSON object
2. Create a for loop and send the base object to a new function to be modified
3. The new function should modify one element of the base JSON object and then send it back

Here is my sample code:

var object = [
{"test": "Test1", "id": 0},
{"test": "Test2", "id": 0},
{"test": "Test3", "id": 0},
{"test": "Test4", "id": 0},
];


for(var i=0; i < 4; i++) {
newObject(i).then(function(obj){
  console.log(obj);
  })
}

function newObject(i) {
  return new Promise(function(resolve, reject){
  var newObject = object;
  newObject[i].id = i;
    resolve(newObject);
  })
}

What I would expect to receive back from console.log(obj) is 4 times a different object like this

[
   {"test": "Test1", "id": 0},
   {"test": "Test2", "id": 0},
   {"test": "Test3", "id": 0},
   {"test": "Test4", "id": 0},
];

[
   {"test": "Test1", "id": 0},
   {"test": "Test2", "id": 1},
   {"test": "Test3", "id": 0},
   {"test": "Test4", "id": 0},
];

[
   {"test": "Test1", "id": 0},
   {"test": "Test2", "id": 0},
   {"test": "Test3", "id": 2},
   {"test": "Test4", "id": 0},
];

[
   {"test": "Test1", "id": 0},
   {"test": "Test2", "id": 0},
   {"test": "Test3", "id": 3},
   {"test": "Test4", "id": 0},
];

However what I end up receiving is 4 times the exact same object like this

[
   {"test": "Test1", "id": 0},
   {"test": "Test2", "id": 1},
   {"test": "Test3", "id": 2},
   {"test": "Test4", "id": 3},
];

Answer 1

Your problem is that inside your Promise function, you're referencing the same objects, instead of creating clones.

var newObject = object; // this is a reference, not a copy/clone

Instead, you need to create a deep clone of the object array. One way of doing it in a one-liner is using JSON:

var newObject = JSON.parse(JSON.stringify(object));

A better way would be:

var newObject = object.map(({test, id}) => ({test, id}));