Angular/Typescript: arrays in typescript changing when an independent element got changed

Question

Why my array element is getting updated when another variable which gets a copy of one of the item in the array is updated?

StackBlitz: https://stackblitz.com/edit/angular-3tgp7h

(check AppComponent)

Code:

export class AppComponent implements OnInit  {
  materials: Material[] = [];
  material: Material;

  ngOnInit(){
    
    this.materials = [
      {
        name: 'One',
        price:10,
      },
      {
        name: 'Two',
        price:10,
      },
      {
        name: 'Three',
        price:10,
      },
    ];

    this.material = this.materials.find(mat => mat.name === 'One');

    console.log('material ones price in the array: '+this.materials.find(mat => mat.name === 'One').price )

    //Update (single) material object

    this.material.price = 20;

   // below is displaying 20. but i didn't update array
   // why is this happening?
    console.log('material ones price in the array after update: '+this.materials.find(mat => mat.name === 'One').price )
  }
}

export interface Material {
  name: string;
  price: number;
}

You are getting a reference to an element in the array. So you are basically editing the item in the array. — Shadowlauch, Jun 20 '18 at 06:06
[pass by reference vs pass by value](https://stackoverflow.com/questions/373419/whats-the-difference-between-passing-by-reference-vs-passing-by-value) — omer.ersoy, Jun 20 '18 at 06:31

Anshuman Jaiswal · Accepted Answer · 2018-06-20T06:34:09.520

3

It will give you reference of that object

this.material = this.materials.find(mat => mat.name === 'One');

And that's why it's updating the value in source array.

You can create a deep clone as:

let foundObj = this.materials.find(mat => mat.name === 'One');
if(foundObj) {
    foundObj = JSON.parse(JSON.stringify(foundObj));
}
this.material = foundObj;

edited Jun 20 '18 at 06:34

answered Jun 20 '18 at 06:08

Anshuman Jaiswal

5,352
1
29
46

`JSON.parse(JSON.stringify());` is not perfact for all case and not recommended by community – Pardeep Jain Jun 20 '18 at 06:10
Thanks. Suggesting "community recommended" approach for deep cloning would help – Ravi Kumar BG Jun 20 '18 at 06:44

Angular/Typescript: arrays in typescript changing when an independent element got changed

1 Answers1