The following is an advanced explanation of the setter and getter, but once undertood, it makes their use very easy.
The Setter and Getter behave like any other method, except for the following thing :
- ‘get’ is a decorator that allow us to acces a method of an object without using parenthesis. The method that we decorate with ‘get’ should take no parameters and usually returns something. Aside from this, the method we decorate with ‘get’ behaves like any other method.
To understand this, take a look at the following code :
const niceRobot = {
get myGetter() {
console.log(“i’m just like a regular method, but i usually return something, and you don’t need parenthesis to call me.”)
return 100
}
}
console.log(niceRobot.myGetter)
Notice how this getter ‘myGetter’ doesn’t read any other properties of the niceRobot object. it’s just a method that returns something. The only difference is that we call it using “nicRobot.myGetter” instead of “niceRobot.myGetter()”, because we used the decorator ‘get’.
However, the most important and recommanded use of getters, is to track properties of the object. In this case, it allows us to perform some operations (like validating or formatting) before returning the values of the properies.
- ‘set’ is a decorator that allow us to access a method of an object without using parenthesis using the default setter of javascript : referencedData = newValue. The method that we decorate with ‘set’ should take exactly one parameter. Aside from this, the method we decorate with ‘set’ behaves like any other method.
To understand this, take a look at the following code :
const niceRobot = {
set mySetter(newValue) {
console.log('i'm just like a regular method, but i must take exactly one parameter, and you can use me like this : “object.mysetter = newValue” instead of “object.mySetter(newValue)” ')
// Do whatever you want with newValue
console.log("You just passed the value " + newValue + " to niceRobot.mySetter method ")
}
}
niceRobot.mySetter = 1337
Notice how this setter mySetter doesn’t access or modify any other properties of the niceRobot object. It’s just a method that does something we want with the newValue parameter that we passed to it. The only difference is that we call it using “nicRobot.mySetter = newValue” instead of “niceRobot.mySetter(newValue)”, because we used the decorator ‘set’.
However, the most important and recommanded use of setters, is to modify properties of the object. In this case, it allows us to perform some operations (like validating or formatting) before assigning the values of the properies. Note that for this case, we need to store the values in a dedicated property that we generally denote “_propertyName” to distinguish it from the setter and/or getter. We need this distinction because the setter/getter do not directly store values, since they are functions, not mutable data variables.
The main other differences between a usual object method, and a setter/getter method are :
- The ‘set’ and ‘get’ decorators locks the associated key. This means that we cannot modify the value of that key to anything else. The following code explains this :
const niceRobot = {
myUsualMethod() {
//A usual method
},
get myGetter() {
// My getter
},
set mySetter(value) {
// My Setter
}
}
console.log(niceRobot); // Output : {myUsualMethod: [Function: myUsualMethod], myGetter: [Getter],mySetter: [Setter]}
niceRobot.myUsualMethod = 1;
niceRobot.myGetter = 2;
niceRobot.mySetter = 3;
console.log(niceRobot); // Output : { myUsualMethod: 1, myGetter: [Getter], mySetter: [Setter] }
Notice how the value of the ‘myUsualMethod’ key was modified, while the values of ‘myGetter’ and ‘mySetter’ were not modified. They are locked due to the decorators ‘get’ and ‘set’.
-
The setter and getter can have the same name without overwritting each other, unlike usual methods. The way JavaScript differenciates between the two is the calling syntax. If you call that name using an assigning method (object.method = something) it will use the setter, if not it will use the getter.
On the other hand, note that : a usual method can override a setter/getter and a setter/getter can override a usual method.
-
As a consequence of all the above, if you don’t assign a return to the getter, calling the getter will return “undefined” (Just like any other method without return).
-
As a consequence of all the above, if you have a setter, but don’t have a getter with the same name, calling the setter (for example with console.log(object.mySetter) ) will return “undefined”. But if you have a getter with the same name, the call is automatically forwarded to the getter).
So, apart from those main differences and the call syntax difference, a setter or a getter will behave like any usual method, and you can do whatever you want with it. If you do the excercice again keeping this in mind, you will easily understand what the setter and getter actually does.
I hope this doesn’t complicate things for anybody. But do not hesitate to read the documentation on this, and ask questions to fully understand this.
