Collaborative service involves objects passing through reference

Question

Collaborative service involves objects passing through reference

I am encountering an issue with a shared service in angular. Upon application startup, the init function is triggered, fetching and returning data that is vital across the entire application.

Components have the ability to inject this service and retrieve the data; however, the data can be altered within the component as well. In my current setup, every modification made to the object within my component reflects on the object returned by the shared service.

@Injectable()
export class SharedDataService {
   private _object1: SomeType[];
   private _object2: SomeType[];
   private _object3: SomeType[];

   constructor(private _http: HttpClient, @Inject('BASE_URL') private _baseUrl: string) {}

   public init() {
       this._http.get<IInitModel>(this._baseUrl + 'init').subscribe(
            (r: IInitModel) => {
                this._object1 = r.object1;
                this._object2 = r.object2;
                this._object3 = r.object3;
            }
   }

   public getObject1(){
       return this._object1;
   }

   public getObject2(){
       return this._object2;
   }

   public getObject3(){
       return this._object3;
   }

The init() function is executed during app startup to acquire essential data for the application. Within my components, I access this data like so:

export class SomeComponent {
    public object1: SomeType[];

    constructor(private _sharedDataService: SharedDataService) {}

    ngOnInit() {
       this.object1 = this._sharedDataService.getObject1();
    }
}

If I make changes to the object in the ngOnInit method of my component

this.object1.push({ prop1: 1, prop2: "SomeValue" })

The private member's value in the shared service also gets altered.

console.log(this._object1) // Output from shared service: [{ prop1: 1, prop2: "SomeValue"}]
console.log(this.object1) // Output from component injecting the service: [{ prop1: 1, prop2: "SomeValue"}]

Is this behavior expected? Are objects passed by reference when returned as implemented in my service?

Could someone suggest a more efficient approach to address this scenario?

angular typescript

Answer 1

Answer №1

When working with JavaScript, it's important to understand that objects and arrays are set as references.

For instance:

const obj1 = { name: 'Surjeet' }; // You have obj1 with a name property
const obj2 = obj1; // by assigning, you're setting the reference of obj1 to obj2
obj2.name = 'Yuvi'; // if you change obj2.name, it will also reflect on obj1.name
console.log(obj1.name) // It will display Yuvi
console.log(obj1.name) // It will still show Yuvi

Therefore, in such scenarios, it's essential to create a deep copy of your object. This can be done using the

spread operator or tools like lodash

.

Using Spread Operator

const arr = [1,2,3,4]
const copiedArr = [...arr];

Using Lodash

const arr = [1,2,3,4]
const copiedArr = _.cloneDeep(arr);

In your specific case, modify it as shown below

export class SomeComponent {
    public object1: SomeType[];
    constructor(private _sharedDataService: SharedDataService) {}
    ngOnInit() {
         this.object1 = _.cloneDeep(this._sharedDataService.getObject1());

         //OR

         //this.object1 = [...this._sharedDataService.getObject1()]; 
    }
}

Answer 2

When working with JavaScript, it's important to understand that objects and arrays are set as references.

For instance:

const obj1 = { name: 'Surjeet' }; // You have obj1 with a name property
const obj2 = obj1; // by assigning, you're setting the reference of obj1 to obj2
obj2.name = 'Yuvi'; // if you change obj2.name, it will also reflect on obj1.name
console.log(obj1.name) // It will display Yuvi
console.log(obj1.name) // It will still show Yuvi

Therefore, in such scenarios, it's essential to create a deep copy of your object. This can be done using the

spread operator or tools like lodash

.

Using Spread Operator

const arr = [1,2,3,4]
const copiedArr = [...arr];

Using Lodash

const arr = [1,2,3,4]
const copiedArr = _.cloneDeep(arr);

In your specific case, modify it as shown below

export class SomeComponent {
    public object1: SomeType[];
    constructor(private _sharedDataService: SharedDataService) {}
    ngOnInit() {
         this.object1 = _.cloneDeep(this._sharedDataService.getObject1());

         //OR

         //this.object1 = [...this._sharedDataService.getObject1()]; 
    }
}

Answer 3

Answer №2

If you want to duplicate your object, consider using lodash library.

https://lodash.com/docs/4.17.15#cloneDeep

@Injectable()
export class SharedDataService {
   private _object1: SomeType[];
   private _object2: SomeType[];
   private _object3: SomeType[];
   constructor(private _http: HttpClient, @Inject('BASE_URL') private _baseUrl: string) {}

   public init() {
       this._http.get<IInitModel>(this._baseUrl + 'init').subscribe(
            (r: IInitModel) => {
                this._object1 = r.object1;
                this._object2 = r.object2;
                this._object3 = r.object3;
            }
   }

   public getObject1(){
       return _.cloneDeep(this._object1);
   }

   public getObject2(){
       return _.cloneDeep(this._object1);
   }

   public getObject3(){
       return _.cloneDeep(this._object1);
   }
}

Another option is

Object.assign(target, ...sources)

. This method allows you to copy enumerable own properties from multiple source objects to a target object and returns the target object.

Answer 4

If you want to duplicate your object, consider using lodash library.

https://lodash.com/docs/4.17.15#cloneDeep

@Injectable()
export class SharedDataService {
   private _object1: SomeType[];
   private _object2: SomeType[];
   private _object3: SomeType[];
   constructor(private _http: HttpClient, @Inject('BASE_URL') private _baseUrl: string) {}

   public init() {
       this._http.get<IInitModel>(this._baseUrl + 'init').subscribe(
            (r: IInitModel) => {
                this._object1 = r.object1;
                this._object2 = r.object2;
                this._object3 = r.object3;
            }
   }

   public getObject1(){
       return _.cloneDeep(this._object1);
   }

   public getObject2(){
       return _.cloneDeep(this._object1);
   }

   public getObject3(){
       return _.cloneDeep(this._object1);
   }
}

Another option is

Object.assign(target, ...sources)

. This method allows you to copy enumerable own properties from multiple source objects to a target object and returns the target object.

Collaborative service involves objects passing through reference

Answer №1

Answer №2

Similar questions

Setting attributes within an object by looping through its keys

A guide on distinguishing between two dates in Ionic3 using either date-fns or Moment libraries

Angular FormControl is a built-in class that belongs to the Angular forms module. It

Converting md ElementRef to HtmlElement in Angular 2+: A Step-by-Step Guide

issue with mat-select in a dialog not functionering correctly

Issue with bundling project arises post upgrading node version from v6.10 to v10.x

Tips for successfully passing function variables as parameters to Angular 2 HTTP subscribe callbacks

React with TypeScript presents an unusual "Unexpected token parsing error"

Broken Encoding Issue with Server-Side HttpClient Response in Angular 5 Universal

The Angular 4 proxy configuration file is not properly directing to the specified target destination; instead, it is redirecting to localhost:4200

"Take control of FileUpload in PrimeNG by manually invoking it

Disabling eslint does not prevent errors from occurring for the unicorn/filename-case rule

Preserve data even after refreshing the browser in Angular

Utilizing Eithers to effectively manage errors as they propagate through the call chain

Is it possible to generate a Date object from a predetermined string in typescript?

Typescript: The art of selectively exporting specific types

Angular: The type '"periodic-background-sync"' cannot be assigned to type 'PermissionName'

Tips for selecting the best className type for material-ui components

How to check all checkboxes in Angular using ngFor and ngIf?

The ChartistJs is unable to find the property '_index' of an undefined value, either being 0 or null