0

I am trying to modify the property at a specific index in my Array of Objects, Somehow when I try to modify one value it modifies all the values occurring in the array of objects.

Can anyone know what I did wrong here? I don't want to return a new array and want to update the same array.

let options = [];
let va = {
  stat: {
    cde: null,
    abc: null,
  },
};
options.push(va);
options.push(va);

//accessing first element from index
options[0].stat['abc'] = 'test';

console.log(options);
pilchard
  • 12,414
  • 5
  • 11
  • 23
app
  • 197
  • 8
  • 24
  • 5
    You've pushed two references to the same object into the array, so updating one necessarily updates them all. You'll need to clone the object before pushing to make them separate objects. (if you `console.log(va);` you'll note that it too has been mutated) – pilchard Oct 25 '22 at 20:34
  • 2
    Does this answer your question? [Javascript pushing objects into array changes entire array](https://stackoverflow.com/questions/11217188/javascript-pushing-objects-into-array-changes-entire-array) – pilchard Oct 25 '22 at 20:35
  • 1
    also see: [How do I correctly clone a JavaScript object?](https://stackoverflow.com/questions/728360/how-do-i-correctly-clone-a-javascript-object) and [Is JavaScript a pass-by-reference or pass-by-value language?](https://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language) – pilchard Oct 25 '22 at 20:38
  • 1
    More current duplicate: [Javascript push object as clone](https://stackoverflow.com/questions/38565451/javascript-push-object-as-clone) – pilchard Oct 25 '22 at 20:41
  • Thanks, pilchard, I changed and pushed the obj with the spread operator still the issue persists. – app Oct 25 '22 at 20:44
  • 2
    That's because the spread operator creates a ['shallow' copy](https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copy), any nested objects are references themselves. If you read the [above linked question](https://stackoverflow.com/questions/728360/how-do-i-correctly-clone-a-javascript-object) about cloning you'll find answers for ['deep' copies](https://developer.mozilla.org/en-US/docs/Glossary/Deep_copy), which clone all the levels of an object, ie. `options.push(structuredClone(va));` – pilchard Oct 25 '22 at 20:46
  • 1
    Also, stop changing the code in your question, it makes the thread of comments meaningless. – pilchard Oct 25 '22 at 20:51
  • 1
    @app Did you get a chance to look into the answer I added ? I hope it will work as per your expectation. – Debug Diva Nov 06 '22 at 17:10

1 Answers1

2

Here you are pushing the same va object reference two times in an options array. Hence, it is updating the value in both the objects.

If you will try to log your options array you will get the [circular object Object].

If your objects will not contain the same reference, this will not be happening.

Demo :

let options = [];
let va = {
  stat: {
    cde: null,
    abc: null,
  },
};
let ba = {
  stat: {
    cde: null,
    abc: null,
  },
};
options.push(va);
options.push(ba);

//accessing first element from index
options[0].stat['abc'] = 'test';

console.log(options);
Debug Diva
  • 26,058
  • 13
  • 70
  • 123