Using setters and getters in JavaScript provides several benefits over directly accessing properties. Setters and getters allow you to encapsulate the internal state of an object. This means you can hide the implementation details (like how the property is stored or computed) and expose a clean interface for interacting with the object.
Setters enable you to validate the values being assigned to properties before they are actually set. Getters allow you to compute property values dynamically based on other properties or conditions. Setters and getters allow you to add logging or debugging logic when properties are accessed or modified.
Without setters and getters, properties are directly accessed and modified using dot notation (object.property = value
). This approach is straightforward but lacks the ability to control, compute or validate assignments.
Access to the object properties without getters and setters
class User {
name;
}
const user = new User();
user.name = "Peter"; // Sets the name property to "Peter"
console.log(user.name); // Retrieves and logs the name property value: Peter
In the following example, we have a User
class with a private _name
field and a getter and setter for a name
property.
Access to the object properties with getters and setters
class User {
_name;
get name() {
return this._name + "Unknown";
}
set name(uname) {
this._name = uname + " Missing ";
}
}
const user = new User(); // Creates a new instance of the User class.
user.name = "Peter"; // Sets the name property to "Peter Missing "
console.log(user.name); // Retrieves and logs the name property value: Peter Missing Unknown
The User
class demonstrates how to use getters (get
) and setters (set
) in JavaScript to encapsulate private fields (_name
) and how properties are accessed (get name()
) and set (set name(uname)
).
The get name()
method acts as a getter for the name
property. When user.name
is accessed, this method is invoked. It returns this._name + "Unknown"
, concatenating the current value of _name
with the string "Unknown"
.
The set name(uname)
method acts as a setter for the name
property. When user.name = "Peter"
is called, this method is invoked with "Peter"
as the argument (uname)
. Inside the setter, it assigns this._name = uname + " Missing "
, concatenating " Missing "
to the provided uname
value before assigning it to _name
.
If you prefer to use methods instead of getters and setters to achieve similar functionality in the User
class, you can refactor the previous example to use setName()
and getName()
methods instead.
Access to the object properties with custom methods
class User {
_name = ""; // Initialize _name with an empty string
constructor() {}
getName() {
return this._name + "Unknown";
}
setName(uname) {
this._name = uname + " Missing ";
}
}
const user = new User();
user.setName("Peter"); // Using setName(uname) instead of set name(uname)
console.log(user.getName()); // Using getName() instead of get name()
Conclusion
Using getters and setters can provide more concise and readable code when dealing with properties that require validation, computation, or additional logic during access and mutation.