1

Can a getter do everything that a setter can do?

For example,

uppercaseItemName;
@api
get itemName() 
{
    return this.uppercaseItemName;
}

set itemName(value) 
{
   this.uppercaseItemName = value.toUpperCase();
}

The above can be replaced with :

uppercaseItemName;
@api
get itemName() 
{
    this.uppercaseItemName = this.uppercaseItemName.toUpperCase()
    return this.uppercaseItemName;
}

4 Answers 4

5

tl;dr Avoid changing data in a getter.

A getter can technically do everything a setter can do. However, performing transformations in the getter are generally a bad idea from a programming perspective for several reasons.

First, the order in which getters may be called is hard to predict in a rendering engine (LWC, VF, etc), and may be called multiple times. This can make it hard to predict side effects in some situations.

Second, we tend to "get" data much more frequently than we "set" data. This means that the method toUpperCase will be called unnecessarily, which can negatively affect performance of the app.

Third, because the data is being changed in a getter, the runtime engine might miscalculate which properties are "dirty" and mess up with rendering. This would be challenging to debug if it happened.

Generally speaking, setters should do any validation and transformations, and getters should acquire resources as necessary (e.g. a lazy-loading design).

1
  • Would this go for situations where you have to extract data and return it from a getter ? Like return this.values.data.map((val) => val.label); ?
    – MadMax
    Commented Dec 26, 2023 at 6:10
1

You can set a property in a getter as well but it is not advisable. The get syntax binds an object property to a function that will be called when that property is looked up. Sometimes it is desirable to allow access to a property that returns a dynamically computed value, or you may want to reflect the status of an internal variable without requiring the use of explicit method calls. In JavaScript, this can be accomplished with the use of a getter. Whereas for setter, The set syntax binds an object property to a function to be called when there is an attempt to set that property. A setter can be used to execute a function whenever a specified property is attempted to be changed. Setters are most often used in conjunction with getters to create a type of pseudo-property. It is not possible to simultaneously have a setter on a property that holds an actual value. In short, the way that a getter and setter will be called will differ, A getter is called when we are looking into an object property such as binding a variable to an HTML and rendering it whereas a setter will be executed every time a user wants to set the property such as on click of a button if you want to set an object property. source: MDN

1

Getter and Setter - these are nice to have in your code but not must-have. In reality, there are many cases where programmers don't even use getter setter in the code. However in short and as per curriculum if you go with a well-structured code and good practice to make your code scalable and eventually optimized it's good to have them in practice.

Getter — binds an object property to a function that will be called when that property is looked up.

Setter — binds an object property to a function to be called when there is an attempt to set that property.

Minor difference and can be exchangeably used.

Good luck.

1

Technically we can use getter and setter interchangeability and it may work but its bad for performance, it's better to do any computing in setter.

In below example, getter is called whenever the proper this.itemName is accessed.

uppercaseItemName;
@api
get itemName() 
{
    this.uppercaseItemName = this.uppercaseItemName.toUpperCase()
    return this.uppercaseItemName;
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .