How to avoid override of a list element in javascript? [duplicate]

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
– jonrsharpe, Commented Feb 24, 2020 at 8:34
@jonrsharpe thanks , finally it work , the clone function is very useful — riccardo_castellano
– riccardo_castellano, Commented Feb 24, 2020 at 9:04

Nick Parsons · Accepted Answer · 2020-02-24 08:43:16Z

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, 2020 at 8:43

Nick Parsons

51.7k6 gold badges61 silver badges80 bronze badges

answered Feb 24, 2020 at 8:40

Yosef Tukachinsky

5,9051 gold badge15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to avoid override of a list element in javascript? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related