Efficiently incorporating multiple properties into one in Angular

Question

Efficiently incorporating multiple properties into one in Angular

Within my Angular service, I have defined variables in the following manner:

export class MyService {

  someVariableA = 1;

  someParams = {
    someVariableB,
    otherVariable: this.someVariableA
  };
}

In a component, I update 'someVariableA' to be 3

this.myService.someVariableA = 3;

I expect 'otherVariable' to also get the value of 3, but it stays at 1 when retrieved.

let v = this.myService.someParams.otherVariable;

Is there a way to set 'otherVariable' based on 'someVariableA'?

javascript angular typescript

Answer 1

Answer №1

According to @Zulwarnain, 1 in JavaScript is considered a primitive data type that is passed by value, not by reference as some may expect.

To resolve this issue, simply assign a function to otherVariable instead. By calling the function someParams.otherVariable(), you can easily retrieve the value of someVariableA without complicating the process.

export class SingletonService {
  public someVariableA = 1;

  public someParams = {
    otherVariable: () => this.someVariableA
  };
}

This concept is fundamental in JavaScript and has been covered by various sources on the subject.

https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0

Answer 2

According to @Zulwarnain, 1 in JavaScript is considered a primitive data type that is passed by value, not by reference as some may expect.

To resolve this issue, simply assign a function to otherVariable instead. By calling the function someParams.otherVariable(), you can easily retrieve the value of someVariableA without complicating the process.

export class SingletonService {
  public someVariableA = 1;

  public someParams = {
    otherVariable: () => this.someVariableA
  };
}

This concept is fundamental in JavaScript and has been covered by various sources on the subject.

https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0

Answer 3

Answer №2

After considering this response, it is evident that utilizing a reference type such as an object or array instead of a primitive value type like a number can significantly enhance your experience. By introducing an extra layer of indirection (e.g., transforming someVar = 123 into someVar = {value: 123}), achieving similar functionality to your requirements becomes quite feasible.

In situations where your specific usage necessitates an object's property to directly mimic a reference to a primitive value stored elsewhere, you can achieve this behavior by implementing the property as a getter and setter pair. While more complex, this approach will deliver the desired outcome.

Here is an example:

class MyService {
    someVariableA = 1;
    someParams: {
        someVariableB: number;
        otherVariable: number;
    };
    constructor() {
        this.someVariableA = 1;
        const that = this;
        this.someParams = {
            someVariableB: 2,
            get otherVariable() {
                return that.someVariableA
            },
            set otherVariable(val: number) {
                that.someVariableA = val;
            }
        }
    }
}

It is important to note that for the otherVariable getter and setter to access the correct context, the code had to be moved into the constructor with this being copied into a new variable named that. The this context within a getter/setter pertains to the object it belongs to rather than any outer scope's this.

To confirm its effectiveness:

const ms = new MyService();
ms.someVariableA = 100;
console.log(ms.someParams.otherVariable); // 100
ms.someParams.otherVariable = -5;
console.log(ms.someVariableA); // -5

Apparent from the outcomes; alterations in ms.someVariableA are promptly reflected in ms.someParams.otherVariable, and vice versa. Best of luck with implementing these changes!

Playground link to showcased code

Answer 4

After considering this response, it is evident that utilizing a reference type such as an object or array instead of a primitive value type like a number can significantly enhance your experience. By introducing an extra layer of indirection (e.g., transforming someVar = 123 into someVar = {value: 123}), achieving similar functionality to your requirements becomes quite feasible.

In situations where your specific usage necessitates an object's property to directly mimic a reference to a primitive value stored elsewhere, you can achieve this behavior by implementing the property as a getter and setter pair. While more complex, this approach will deliver the desired outcome.

Here is an example:

class MyService {
    someVariableA = 1;
    someParams: {
        someVariableB: number;
        otherVariable: number;
    };
    constructor() {
        this.someVariableA = 1;
        const that = this;
        this.someParams = {
            someVariableB: 2,
            get otherVariable() {
                return that.someVariableA
            },
            set otherVariable(val: number) {
                that.someVariableA = val;
            }
        }
    }
}

It is important to note that for the otherVariable getter and setter to access the correct context, the code had to be moved into the constructor with this being copied into a new variable named that. The this context within a getter/setter pertains to the object it belongs to rather than any outer scope's this.

To confirm its effectiveness:

const ms = new MyService();
ms.someVariableA = 100;
console.log(ms.someParams.otherVariable); // 100
ms.someParams.otherVariable = -5;
console.log(ms.someVariableA); // -5

Apparent from the outcomes; alterations in ms.someVariableA are promptly reflected in ms.someParams.otherVariable, and vice versa. Best of luck with implementing these changes!

Playground link to showcased code

Answer 5

Answer №3

The value type you are assigning will not function as intended. In order to achieve the desired outcome, you should assign a reference type instead.

obj ={someVariableA : 1};

  someParams = {
    otherVariable: this.obj
  };

In the provided code snippet, modifying the value of obj.someVariableA will also alter the value of someParams.otherVariable

I assume that you possess knowledge regarding reference type and value types variables

view demo here

Answer 6

The value type you are assigning will not function as intended. In order to achieve the desired outcome, you should assign a reference type instead.

obj ={someVariableA : 1};

  someParams = {
    otherVariable: this.obj
  };

In the provided code snippet, modifying the value of obj.someVariableA will also alter the value of someParams.otherVariable

I assume that you possess knowledge regarding reference type and value types variables

view demo here

Answer 7

Answer №4

It appears that creating a new instance of the service each time may be causing the variables to reset. Consider storing the variable in localStorage and having the service retrieve it from there for consistency.

An alternative approach would be to pass the variable directly into the service call instead of relying on a local service variable.

Answer 8

It appears that creating a new instance of the service each time may be causing the variables to reset. Consider storing the variable in localStorage and having the service retrieve it from there for consistency.

An alternative approach would be to pass the variable directly into the service call instead of relying on a local service variable.

Efficiently incorporating multiple properties into one in Angular

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Encountering a problem during the installation of the udev module in a Node.js

Utilizing jQuery to remove a class with an Ajax request

Unable to assign an IP address to an Express JS application

How to transfer data between components in Angular 6 using a service

Prevent a module from initializing upon importing in JavaScript

Tips for incorporating the Sanitize library into Angular 6:

Update the Material V4 Style ts file to the latest version, Material V5

Using MVC to create dynamic JavaScript functions that call actions

The Static Interface Binding in TypeScript

Attempting to access an avatar image via an API, only to encounter an error message indicating that the avatar is not defined

Why is my code throwing an error stating "Unable to assign value to innerHTML property of null"?

Utilizing a Variety of Animations with D3 (version 5)

Extending an interface in TypeScript does not permit the overriding of properties

Unraveling Angular2 Dependency Injection: Decoding the mysterious syntax seen preceding certain injected package names (e.g. 'providers = [...SomeProvider]')

Utilize Photoshop's Javascript feature to extract every layer within the currently active document

Asynchronous function nested within a loop

How can I convert a string containing integers into an int[] using javascript or jQuery?

How to retrieve a component's property within an Angular2 provider?

Discord bot that combines the power of discord.js and node.js to enhance your music

Using v-model in Vue, the first option has been chosen