The object accessor properties in JavaScript are methods that get or set the value of an object. They are defined using the get and set keywords. Accessor properties are a powerful way to control how your objects are accessed and modified.
The JavaScript object can have two kinds of properties.
- Data properties
- Accessor properties
The below property is called the data properties.
const obj ={
key:"value",// Data property}</code></pre>
Object Accessor Properties
In JavaScript, you can use the getters to get the object properties and setters to set the object properties.
There are two keywords to define accessor properties.
- get − The get keyword is used to define a method to get the object property value.
- set − The set keyword is used to define a method to update the object property value.
JavaScript Getters
The getters are used to access the object properties. To define a method as getter, we use get keyword followed by method name. Follow the syntax below to define the getter.
getmethodName(){// Method body}
obj.methodName;
In the above syntax, we have defined the getters using the 'get' keyword followed by the method name.
You can use the method name as an object property to get its returned value.
You don't need to write the pair of parenthesis followed by the method name to execute the getters. You can access it like the object property.
Example
In the example below, in the wall object, we have defined the getColor() getters. The getColor() returns the value of the color property.
After that, we use the getColor() method to access the color property value of the object.
Open Compiler
<html><body><p id ="output">The color of the wall is :</p><script>const wall ={
color:"brown",getgetColor(){returnthis.color;}}
document.getElementById("output").innerHTML += wall.getColor;</script></body></html></code></pre>
Output
The color of the wall is : brown
JavaScript Setters
The setters are used to update the JavaScript object properties. To define a method as setter, we use set keyword followed by method name You can follow the syntax below to define setters in the JavaScript object.
setmethodName(param){// Setter methodreturnthis.color = color;}
wall.methodName ="Red";
- In the above syntax, the 'set' keyword is used to define the setter method.
- The method_name can be any valid identifier.
- The setter method always takes a single parameter. If you don't pass a parameter or multiple parameters, it will give you an error.
- You can assign value to the setter method as you assign value to the property.
Example
In the example below, we have defined the setter method to set the value of the color property of the wall object. We set the 'red' value to the color property of the object using the 'setColor' setter method.
Open Compiler
<html><body><p id ="output"></p><script>const wall ={
color:"brown",setsetColor(color){returnthis.color = color;}}
document.getElementById("output").innerHTML +="The color of the wall before update is : "+ wall.color +"<br>";//updating the color of wall
wall.setColor ="Red";
document.getElementById("output").innerHTML +="The color of the wall after update is : "+ wall.color;</script></body></html></code></pre>
Output
The color of the wall before update is : brown
The color of the wall after update is : Red
JavaScript Object Methods vs. Getters/Setters
In JavaScript, whatever you can do using the getters and setters, you can also do by defining the specific object method. The difference is that getters and setters provide simpler syntax.
Let's understand it with the help of some examples.
Example
In the example below, we have defined the getColor() getters method and colorMethod() object method in the wall object. Both method returns the color value.
You can observe that defining and accessing getters is more straightforward than defining and accessing the object method.
Open Compiler
<html><body><p id ="output"></p><script>const wall ={
color:"brown",getgetColor(){returnthis.color;},colorMethod:function(){returnthis.color;}}
document.getElementById("output").innerHTML +="Getting the color using the getters : "+ wall.getColor +"<br>";
document.getElementById("output").innerHTML +="Getting the color using the object method : "+ wall.colorMethod();</script></body></html></code></pre>
Output
Getting the color using the getters : brown
Getting the color using the object method : brown
Data Quality and Security
The getter and setter methods can provide better data quality. Also, they are used for encapsulation to secure the object data.
Let's understand how getter and setter improve data quality and provide security via the example below.
Example
In the example below, the getColor() is a getter method, returning the value of the color property after converting it to the uppercase. Also, it hides the color property from users, as you can access its value using the getColor() method.
Open Compiler
<html><body><p id ="output"></p><script>const wall ={
color:"Brown",getgetColor(){returnthis.color.toUpperCase();}}
document.getElementById("output").innerHTML +="Getting the color using the getters : "+ wall.getColor;</script></body></html></code></pre>
Output
Getting the color using the getters : BROWN
Defining getters/setters using the Object.defineProperty()
You can also use the Object.defineProperty() method to add getters or setters into the object.
Object.defineProperty(object,"methodName",{keyword:function(){// Method body},})
Using the above syntax, you can define the getter or setter same as methodName.
Parameters
- object − It is an object where you need to add getters or setters.
- methodName − It is the name of the method for getters or setters.
- keyword − It can be 'get' or 'set' according to you want to define the getter or setter method.
Example
In the example below, we have added the getSize and setSize getter and setter to the object using the object.defineProperty() method.
After that, we use the getSize and setSize to get and set the size, respectively.
Open Compiler
<html><body><p id ="demo"></p><script>const output = document.getElementById("demo");const door ={
size:20,}
Object.defineProperty(door,"getSize",{get:function(){returnthis.size;}});
Object.defineProperty(door,"setSize",{set:function(value){this.size = value;},})
output.innerHTML +="Door size is : "+ door.getSize +"<br>";
door.setSize =30;
output.innerHTML +="Door size after update is : "+ door.getSize;</script></body></html></code></pre>
Output
Door size is : 20
Door size after update is : 30
Reasons to use getters and setters
Here are the benefits of using the getters and setters in JavaScript.
- It has a simple syntax than object methods.
- To improve the data quality by validating the data.
- For the encapsulation or securing the data.
- It also allows abstraction or data hiding.
