CODEWITHSUNDEEP
javascriptangulartypescript
Lijin Durairaj
Lijin Durairaj

Reputation: 3511

What is the purpose of using getters and setters in angular2?

i am new to angular2 and when i was reviewing someone's code, one specific line got me confused 

get formData() { return <FormArray>this.lienHolder.get('policyDetails'); }

why is the above line any different from this

formData() { return <FormArray>this.lienHolder.get('policyDetails'); }

I searched about this in google and found no actual results, can anyone help me to understand this.

UPDATE

what is the difference between this 

var obj = { log: 0, get latest() { return this.log++; } };

and this 

var obj = { log: 0, latest() { return this.log++; } };

both are giving me the updated value all the time i call them obj.latest & obj.latest() -- returns updated result all the time then why use one over another?

Upvotes: 1

Views: 1858

Answers (2)

Vega
Vega

Reputation: 28738

get formData()

is called a getter accessor. It allows you get the property dynamically. It always should return a value.

https://www.typescriptlang.org/docs/handbook/classes.html

TypeScript supports getters/setters as a way of intercepting accesses to a member of an object. This gives you a way of having finer-grained control over how a member is accessed on each object.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get

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.

In opposite to that, getFormDate() is a function, it can take arguments and not always returns values.

One of the cases, where I like to use a getter is when a property should be get from a service:

<p>{{dictionary.label1}}</p>

and then I get it from a service like this:

get dictionary(){
  return this.myService.getDictionary();
}

this way when the service changed the data I dynamically can receive the value to my binding/model.

If I would have defined as the following:

dictionary: [];

ngOnInit(){
  this.dictionary = this.myService.getDictionary();
}

then I would be 'stuck' with the old data while the service already received the new set of data. Of course, you can then set a change listener and trigger the update, but it's more code!

Think of getters as dynamic class properties.

UPDATE:

For the examples in your updated post, it's true, they give the same result, and it's a good thing! You can use both, but as they don't work similarly, you can have more options in some cases. It's not like only one or only the other, or which one is the best. In most of cases you can use both, it's where and for what you need to use them. Most of the times, it's a method which is used, as it has more comprehensive use: we use methods with or without parameters, to trigger actions on objects. But in some cases, again, it will not have the same flexibility as a getter. If you are hesitant which one to use, use the method first and when you see its limits, think if the getter would help you, as now you know what's its purpose, which is - a property, but dynamic!

An other example: 

isShown:boolean; //is 'static', will return the same value unless you change it in some kind of a method

get isShown(){
   return this.someCondition && this.someMethodResult() || this.anotherCondition
}

If someCondition and anotherCondition change and the result from someMethodResult had to come changed you don't have to request isShown value, it's done dynamically.

Opposite of that, you can have

setShown(){ //the method
  this.isShow = !this.isShown;
}

Here setShown needs to be called so isShown could be updated.

Also, a getter can easily replace a method which only job is to return a class property value.

UPDATE2:

An other 'good' example for get. A case when a component needs to check if the user is logged to show/hide some buttons. Instead of subscribing to changes, you do:

HTML: 

<button [hidden]="!isLogged">Log out</button>

Typescript:

get isLoggedIn(){
   return this.authService.isLoggedIn();
}

And that's it! If the user is logged out the button will be disabled 'immediatly'. No nead for the heavy subscribe/unsubscribe...

Upvotes: 4

Niles Tanner
Niles Tanner

Reputation: 4041

with the get you can treat it like a var:

let something = formData;

otherwise you must invoke the function:

let something = formData();

You would use a get usually to format data as you retrieve it. for example:

let _number = '12';
get number(){
  return parseInt(_number);
}

Upvotes: 1

Related Questions