Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to define getter and setter functions in JavaScript?
JavaScript getter and setter functions allow you to define how properties are accessed and modified in objects. They provide a way to execute custom logic when getting or setting property values.
Getter Functions
A getter function is called automatically when a property is accessed. It uses the get keyword and allows you to compute or format values dynamically.
Setter Functions
A setter function is called automatically when a property is assigned a value. It uses the set keyword and receives the new value as a parameter, allowing you to validate or process the data before storing it.
Syntax
const obj = {
get propertyName() {
// Return computed value
},
set propertyName(value) {
// Process and store value
}
};
Example: Basic Getter and Setter
<html>
<body>
<script>
var department = {
deptName: "Marketing",
deptZone: "North",
deptID: 101,
get details() {
return "Department Details<br>" + "Name: " + this.deptName + " <br>Zone: " + this.deptZone + "<br>ID: " + this.deptID;
},
set details(info) {
var words = info.toString().split(' ');
this.deptName = words[0] || '';
this.deptZone = words[1] || '';
this.deptID = words[2] || '';
}
}
// Using setter to update multiple properties
department.details = 'Sales South 102';
// Using getter to display formatted details
document.write(department.details);
</script>
</body>
</html>
Department Details Name: Sales Zone: South ID: 102
Example: Temperature Converter
<html>
<body>
<script>
var temperature = {
celsius: 0,
get fahrenheit() {
return (this.celsius * 9/5) + 32;
},
set fahrenheit(f) {
this.celsius = (f - 32) * 5/9;
}
};
temperature.celsius = 25;
document.write("Celsius: " + temperature.celsius + "<br>");
document.write("Fahrenheit: " + temperature.fahrenheit + "<br><br>");
temperature.fahrenheit = 68;
document.write("After setting Fahrenheit to 68:<br>");
document.write("Celsius: " + temperature.celsius + "<br>");
document.write("Fahrenheit: " + temperature.fahrenheit);
</script>
</body>
</html>
Celsius: 25 Fahrenheit: 77 After setting Fahrenheit to 68: Celsius: 20 Fahrenheit: 68
Using Object.defineProperty()
You can also define getters and setters using Object.defineProperty() for more control:
<html>
<body>
<script>
var person = {};
Object.defineProperty(person, 'fullName', {
get: function() {
return this.firstName + ' ' + this.lastName;
},
set: function(value) {
var parts = value.split(' ');
this.firstName = parts[0];
this.lastName = parts[1];
}
});
person.fullName = 'John Doe';
document.write("First Name: " + person.firstName + "<br>");
document.write("Last Name: " + person.lastName + "<br>");
document.write("Full Name: " + person.fullName);
</script>
</body>
</html>
First Name: John Last Name: Doe Full Name: John Doe
Key Points
- Getters are called without parentheses, like regular properties
- Setters automatically receive the assigned value as a parameter
- Both getters and setters can access other object properties using
this - They provide a clean interface for computed properties and data validation
Conclusion
Getter and setter functions provide elegant property access control in JavaScript. They enable computed properties, data validation, and maintain clean object interfaces while executing custom logic behind the scenes.
356 Views
