JavaScript object accessors are used to access and update the objects and two keywords used for this function are getter and the other is the setter. JavaScript introduced getters and setters in ES5 in 2009.
We’ll look at what getters and setters are and how to utilize them in JavaScript in this tutorial as well as go over why you should use get or set methods of JavaScript. Apart from this, we will discuss the object.defineProperty() as well. In the end, we will shine some light on which browser supports the set and get methods. So let’s get started.
Get Keyword
The get method is used to retrieve a value, as its name implies, and in the technical world, it can be defined as a binder of an object property to a function which is called when the property is wanted. We cannot get the value until we access the get method. However, we define the object’s property beforehand.
Example:
const player={
name: “Hazard”,
club: “Chelsea”,
shirtNo: 10,
get clubName(){
return this.club;
}
};
alert(player.clubName);
In this example, we used the clubName property to get the value of the club property.
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/image2-24.png" data-lazy- height="128" src="data:image/svg xml,” width=”452″>
Set Keyword
It is the opposite of the get keyword. It is used to set a value. In the technical world, it can be defined as a binder of an object property to a function when we want to set a property.
Example:
const player={
name: “”,
club: “Chelsea”,
shirtNo: 10,
//setting a player name
set setName(setName){
this.name=setName;;
}
};
//passing/setting the name i-e object property using a setter
player.setName=“Mount”;
//lets see the data through an alert
alert(player.name);
In this example, we created an object first. In that object, we created a set method using set keyword where we are setting the name of the player which is passed to it. After the object, we set the name of the player, and then we displayed the result using an alert.
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/image4-21.png" data-lazy- height="130" src="data:image/svg xml,” width=”451″>
Function vs Getters
By now you must be thinking, aren’t they the same, well the answer is yes and no. Let us explain this using examples:
Example Function:
const player = {
name : “Hazard”,
club : “Chelsea”,
shirtNo : 10,
myFunc : function() {
return this.name ” plays for “ this.club;
}
};
alert(player.myFunc());
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/image3-23.png" data-lazy- height="132" src="data:image/svg xml,” width=”451″>
Example Getter:
const player = {
name : “Hazard”,
club : “Chelsea”,
shirtNo : 10,
get myFunc() {
return this.name ” plays for “ this.club;
}
};
alert(player.myFunc);
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/image6-18.png" data-lazy- height="131" src="data:image/svg xml,” width=”452″>
In the function example we are getting the myFunc() as a function i-e player.myFunc(). However, in the getter example, we are accessing the property i-e player.myFunc(). Now we know that the getter syntax is more easy and readable than the function.
Object.defineProperty() in JavaScript
The JavaScript Object.defineProperty() is used to add getters and setters. It takes three arguments and the syntax of Object.defineProperty() is:
Object.defineProperty(objectName, propertyName, objectDescriptor)
The first argument is the object’s name, the second is the property’s name, and the third argument is a description of the object.
For Example:
//define an object
const player={
name:“Eden”
}
//now we get a property of an object
Object.defineProperty(player, “getName”,{
get: function (){
return this.name;
}
});
//now we set the property of an object
Object.defineProperty(player, “setName”,{
set:function(val){
this.name=val;
}
});
console.log(player.name);
//let‘s give the player a full name
player.setName=”Hazard”;
console.log(player.name);
In this example, first, we defined an object. After that using Object.defineProperty() we set the setter and getter. Now when we first console.log the player name is “Eden”. But when we set the name using setter the player name changes to Hazard as set by us.
<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/image5-20.png" height="106" src="data:image/svg xml,” width=”258″>
It is true that when we use getters and setters, JavaScript secures better data quality.
For Example:
//creating an object
const player = {
name : “Hazard”,
club : “Chelsea”,
shirtNo : 10,
get myFunc() {
return this.name ” plays for “ this.club.toLowerCase();
}
};
// using get display data
alert(player.myFunc);
In this example, we used the name and club property of the object player. We converted it to upper and lower case and returned that value. The solution looked like this:
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/image1-25.png" data-lazy- height="135" src="data:image/svg xml,” width=”455″>
Why use getters and setters?
- Can accomplish and carry out tasks behind the scenes.
- Makes us secure better data quality as mentioned earlier
- Also has a simpler syntax
- Properties and methods syntax is similar
Which browsers support this?
| Microsoft Edge | Opera | Safari | Mozilla firefox | Google Chrome |
|---|---|---|---|---|
| 9.0 and above | yes | yes | yes | yes |
Conclusion
We learned almost everything about JavaScript assessors which are get and set methods in JavaScript in this post. Going into a little depth we also explained what Object.defineProperty() is. Apart from that, we discussed the pros of using assessors in JavaScript and which browsers support assessors. By using assessors, a developer makes his code perform actions behind the scenes and secures data. As it has simpler syntax it also makes our code cleaner.
About the author
<img data-del="avatar" data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/7011409B3A384F43A8417D1DAC68D179-150×150.jpg6165064f60742.jpg" height="112" src="data:image/svg xml,” width=”112″>
Shehroz Azam
A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.
