Before jumping into getter and setter. There are two kinds of object properties in JavaScript: data properties and accessor property
Data property:
Example of data property,
const employee = {
//data property
firstname: 'Anna';
};
Accessor property:
Accessor properties are functions that execute on getting and setting a value of an object. Accessors are useful when some operations are needed to be performed automatically before setting or retrieving an object’s value, like reformating strings, accessing private properties, triggering events, etc.
- get – to define a getter method to get the property value.
- set – to define a setter method to set the property value.
JavaScript getter and setter methods are useful in accessing the object properties. It is used for Data Encapsulation. You can ensure higher quality data while using getter and setter methods. Getters areuseful in reading the values of properties and setters are useful in writing the value to properties.
Getters method:
Getter methods are used to access the properties of an object.
Syntax:
let obj = {
get propName() {
// getter, the code executed on getting obj.propName
},
Example:
const employee = {
// data property
firstName: 'Anna',
// accessor property(getter)
get getName() {
return this.firstName;
}
};
// accessing data property
console.log(employee.firstName); // Anna
// accessing getter methods
console.log(employee.getName); // Anna
// trying to access as a method
console.log(employee.getName()); // error
Output:
Anna
Anna
Type error
Here getter method getName() is created to access the property of an object and when we try to access value as a method like employee.getName() an error occurs.
Setter Methods:
Setter methods are useful in changing or writing the value of a property in an object. It is always a great way to ensure the value of a property in an object is correct. It takes one argument which is the value you want to set.
Syntax:
set propName(value) {
// setter, the code executed on setting obj.propName = value
}
};
Example,
const employee = {
firstName: 'Anna',
//accessor property(setter)
set changeName(newName) {
this.firstName = newName;
}
};
console.log(employee.firstName); // Anna
// change(set) object property using a setter
employee.changeName = 'Tim';
console.log(employee.firstName); // Tim
Output:
Anna
Tim
Setter method must have one formal parameter.
Object.defineProperty():
We can also use Object.defineProperty() method to add getters and setters.
Syntax:
Object.defineProperty(obj,prop,descriptor)obj – object name
prop – property name
descriptor – describes the property
const employee = {
firstName: 'Anna'
}
// getting property
Object.defineProperty(employee, "getName", {
get : function () {
return this.firstName;
}
});
// setting property
Object.defineProperty(employee, "changeName", {
set : function (value) {
this.firstName = value;
}
});
console.log(employee.firstName); // Anna
// changing the property value
employee.changeName = 'Tim';
console.log(employee.firstName); // Tim
Output:
Anna
Tim
The above example shows how object.defineProperty() is useful in setting getter and setter methods.
Why getters and setters?
- Allows to control accessing and modification of object properties.
- Validate data before setting it to an object.
- Creates property that calculates on the fly.