Search code examples
angularobjectreferencecopy

Angular4 copy object without reference?


Inside a component I tried to copy an object from a service that could be modified inside the component, but should stay in the service.

private test;

public ngOnInit(): {
  console.log(this.someService.test.someProperty) //'old'
  this.test = this.someService.test;

  //not working as well?!
  //this.test = Object.assign({}, this.someService.test);
  //this.test = Object.create(this.somerService.test);

  this.changeTest();
}

public changeTest(): void {
  this.test.someProperty = 'new';
}

after the init both, this.test.someProperty as well as this.someService.test.someProperty are changed to new even though the last should stay old?

Why is that happening, and how to only change properties of this.test


Solution

  • It's because Object.assign is a shallow merge, it's only merging the top level, so the top level is referencing the same object in both the service and the component.

    I personally use lodash's merge when I need to deep merge objects:

    this.test = _.merge({}, this.someService.test)
    

    Also see: How to deep merge instead of shallow merge?

    You can also deep clone the object with:

    this.test = JSON.parse(JSON.stringify(this.someService.test));
    

    Also see: How to Deep clone in javascript