How to avoid override of a list element in javascript?

Question

If you run the code snippet below you can observe the following: at first console.log() it print 0,Jhon after I modified the first element of the first array the same change is also reversed on the object in the second list, why? its possible to avoid this?

This is a sample of this problem:

var myArray = [{
    id: 0,
    name: "Jhon"
  },
  {
    id: 1,
    name: "Sara"
  },
  {
    id: 2,
    name: "Domnic"
  },
  {
    id: 3,
    name: "Bravo"
  }
];
var a = [];
a.push(myArray[0]);
console.log(a);
myArray[0].name = 'TEST';
console.log(a);

Because they're two references to the same mutable object. If that's not the behaviour you want, push a *copy* into a. — jonrsharpe, Feb 24 '20 at 08:34
See [How do I correctly clone a JavaScript object?](https://stackoverflow.com/questions/728360/how-do-i-correctly-clone-a-javascript-object) — jonrsharpe, Feb 24 '20 at 08:36
This one has a [Explanation](https://stackoverflow.com/a/6605700/11719787) Read this — Sameer, Feb 24 '20 at 08:41
@jonrsharpe thanks , finally it work , the clone function is very useful — riccardo_castellano, Feb 24 '20 at 09:04

score 1 · Answer 1 · edited Feb 24 '20 at 08:43

1

If you dont want it to be by reference, you can use spread syntax

a.push({...myArray[0]});

complete code:

var myArray = [{
    id: 0,
    name: "Jhon"
  },
  {
    id: 1,
    name: "Sara"
  },
  {
    id: 2,
    name: "Domnic"
  },
  {
    id: 3,
    name: "Bravo"
  }
];
var a = [];
a.push({...myArray[0]});
console.log(a);
myArray[0].name = 'TEST';
console.log(a);

edited Feb 24 '20 at 08:43

Nick Parsons

45,728
6
46
64

answered Feb 24 '20 at 08:40

Yosef Tukachinsky

5,570
1
13
29

How to avoid override of a list element in javascript?

1 Answers1