JavaScript Getters and Setters
In JavaScript, getter and setter are the special methods introduced in ECMAScript 5 (ES5 2009) that allow us to retrieve and modify the values directly without directly changing the object property. The getter uses the get keyword and the setter uses the set keyword to modify and retrieve the values.
JavaScript Getter (The get Keyword)
In JavaScript, the getter is the method that is used to get the value of the property. We can use the get keyword to get the value of the property.
- Getters are automatically called when the property is accessed.
- Getters help us in getting the value of the property.
class P {
constructor(name) {
this._name = name;
}
get name() {
return this._name;
}
}
const res = new P('Anjali');
console.log(res.name);
Output
Anjali
In this example
- The Person class has a constructor that sets the _name property
- get method used to retrieve the value of _name when a name is accessed.
- When person.name is accessed, the getter name is automatically called, returning the value of _name.
Getter vs Regular Function
In JavaScript, the getter and the regular functions both are used for the accessing the object properties but in the different ways. Getters allow properties to be accessed like regular object attributes while still executing logic in the background. On the other hand, regular functions require explicit method calls and do not provide direct property-like access.
Feature | Getter (get) | Regular Function |
---|---|---|
Syntax | Accessed like a property (obj.prop) | Called explicitly (obj.method()) |
Readability | Improves readability & simplicity | equires () which makes it look like a method call |
Encapsulation | Can restrict direct access to properties | Properties can be easily accessed |
JavaScript Setter (The set Keyword)
In JavaScript, the setter is the method that is used for setting the value of the property with the help of the set keyword.
- The setter allows us to set the value of the object in a controlled way.
- Setters provide a way to control how data is stored by using internal variables, keeping the object's state secure.
class P {
constructor(name) {
this._name = name;
}
set name(newName) {
this._name = newName;
}
}
const res = new P('Anjali');
res.name = 'Ayushi'; // Using the setter to change the name
console.log(res._name); // Output: Ayushi
Output
Ayushi
In this example
- The setter name is used to update the _name property when res.name = 'Ayushi' is called.
- The value of _name is updated to 'Ayushi'.
Implementing Getters and Setters in JavaScript
Using Getters and Setters in Objects
In objects, we can use the get and set keywords for defining the getter and setter in objects.
const p= {
n1: "Anurag",
n2: "Das",
get Name() {
return `${this.n1} ${this.n2}`;
},
set Name(name) {
[this.n1, this.n2] = name.split(" ");
}
};
console.log(p.Name);
p.Name = "Anuj Jain";
console.log(p.Name);
Output
Anurag Das Anuj Jain
Getters and Setters with Classes
Getters and setters are commonly used in ES6 classes to control access to private properties.
class R {
constructor(width, height) {
this.width = width;
this.height = height;
}
get a() {
return this.width * this.height;
}
set a(value) {
console.log("Area cannot be set directly.");
}
}
const rect = new R(10, 5);
console.log(rect.a);
rect.a = 60;
Output
50 Area cannot be set directly.
The getter computes the area dynamically, and the setter prevents modification, enforcing encapsulation.
Using Getters and Setters with Private Fields
With ES2020, JavaScript introduced private fields (prefix _ is just a convention; # makes it truly private).
class B {
#balance; // Private property
constructor(balance) {
this.#balance = balance;
}
get balance() {
return this.#balance;
}
set balance(amount) {
if (amount < 0) {
console.log("Balance cannot be negative!");
} else {
this.#balance = amount;
}
}
}
const acc = new B(1000);
console.log(acc.balance);
acc.balance = -500; // "Balance cannot be negative!"
Output
1000 Balance cannot be negative!
The #balance field is private, ensuring external code cannot modify it directly.
Using Object.defineProperty() for Accessors
The Object.defineProperty() method can define getters and setters dynamically.
const u = { name: "Anjali" };
Object.defineProperty(u, "greeting", {
get: function () {
return `Hello, ${this.name}!`;
},
set: function (newName) {
this.name = newName;
}
});
console.log(u.greeting);
u.greeting = "Ayushi";
console.log(u.greeting);
Output
Hello, Anjali! Hello, Ayushi!
This approach allows defining dynamic properties with controlled access.
Use Cases of Getters and Setters
- Data Validation: Ensures only valid data is assigned to a variable, preventing errors.
- Lazy Computation: Delays the calculation of a value until it's actually needed, improving efficiency.
- Encapsulation: Hides direct access to sensitive data, allowing controlled modifications through methods.
- Debugging & Logging: Helps track when and how a variable changes, making it easier to find bugs.
When to Use Getters and Setters?
When you need to validate input before assigning a value.
set age(value) {
if (value < 0) throw new Error("Age cannot be negative!");
this._age = value;
}
When properties depend on other properties (computed properties).
get fullName() {
return `${this.firstName} ${this.lastName}`;
}
When working with private fields in classes.
class Person {
#secret = "Hidden Data";
get secret() {
return "Access Denied";
}
}
When debugging changes in properties.
set value(newValue) {
console.log(`Value changed to: ${newValue}`);
this._value = newValue;
}
Getters and Setters vs. Direct Property Access
Feature | Getters & Setters | Direct Property Access |
---|---|---|
Definition | Special methods used to control the access and modification of object properties. | Directly assigning and retrieving values from an object's properties without any additional control. |
Use Cases | Used when validation, computed properties, encapsulation, or logging is required. | Used for simple data storage where additional logic is not needed. |
Performance | Slightly slower due to method calls. | Faster since it directly accesses properties. |
Encapsulation | Provides encapsulation by restricting direct access to internal data. | No encapsulation; data can be freely modified. |
Simplicity | More complex as it requires defining getter/setter methods. | Easier to use since properties can be accessed directly. |