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

Trigger a click event on a third-party webpage that is embedded within an Angular application

The seamless union of Vuestic with Typescript

Converting text data into JSON format using JavaScript

Trouble with Angular ngFor Grouped Data Display

Challenges with slow performance in Ionic application when handling extensive amounts of data

Guide on compiling SCSS to CSS when running npm start

Divide Angular ngFor into separate divs

Issue with decompressing the identical data using zlib (Z_BUF_ERROR)

The expiration date is not considered in JWT authentication using passport-jwt

Adjusting image dynamically based on conditions

Tips for resolving relative child routes in Angular

Steps for generating a multer file using a link to an image

The tag 'ngRedux' is not recognized as a property on the 'AppModule' type

Forcing locale in Angular 2: A step-by-step guide

Appending an item to an array in TypeScript

Repeating the same algorithms in both the back and front ends while applying Domain Driven Design

Is it possible to verify the absence of an error icon when valid data is provided in Angular testing?

TypeScript - ESBuild - Encountered an unexpected '<' token

When attempting to import a react component written with TypeScript to npm, receiving an 'undefined' error

Getting event properties in a React component using the rest operator: A comprehensive guide