JavaScript Objects
JavaScript getters and setters let a method be used like a plain property.
A getter runs when you read the property.
A setter runs when you assign to it.
Example
javascript
const person = {
first: "Ada",
last: "Lovelace",
get fullName() {
return this.first + " " + this.last;
}
};
console.log(person.fullName);Note there are no brackets after fullName.
It looks like a property but runs a function.
A getter is written with the word get before the method name.
A setter uses set and takes exactly one parameter.
They let you compute a value or validate an assignment without changing how the object is used.
Syntax
javascript
const object = {
get value() {
return this.stored;
},
set value(v) {
this.stored = v;
}
};A setter must take one parameter.
The value is worked out fresh every time it is read.
Example
javascript
const rect = {
width: 4,
height: 5,
get area() {
return this.width * this.height;
}
};
console.log(rect.area);
rect.width = 10;
console.log(rect.area);The area updates automatically because it is recalculated on each read.
A setter runs when the property is assigned.
Example
javascript
const person = {
first: "Ada",
last: "Lovelace",
set fullName(value) {
const parts = value.split(" ");
this.first = parts[0];
this.last = parts[1];
}
};
person.fullName = "Grace Hopper";
console.log(person.first);Assigning to fullName updated two other properties.
A setter is a natural place to reject bad values.
Example
javascript
const account = {
amount: 0,
set balance(value) {
this.amount = value < 0 ? 0 : value;
},
get balance() {
return this.amount;
}
};
account.balance = -50;
console.log(account.balance);The negative value was rejected and replaced with 0.
A getter and the property it reads must have different names.
Using the same name makes the getter call itself forever.
Example
javascript
const box = {
_size: 5,
get size() {
return this._size;
}
};
console.log(box.size);The underscore is a common convention for the internal value.
The same syntax works inside a class.
Example
javascript
class Circle {
constructor(r) {
this.r = r;
}
get area() {
return Math.round(Math.PI * this.r * this.r);
}
}
console.log(new Circle(2).area);Getters are used heavily in classes for derived values.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Getters and Setters</title>
</head>
<body>
<h1>JavaScript Getters and Setters</h1>
<p id="result"></p>
<script>
const person = {
first: "Ada",
last: "Lovelace",
get fullName() {
return this.first + " " + this.last;
},
set fullName(value) {
const parts = value.split(" ");
this.first = parts[0];
this.last = parts[1];
}
};
person.fullName = "Grace Hopper";
document.getElementById("result").innerHTML =
person.fullName + "<br>First: " + person.first;
</script>
</body>
</html>Run the above example in the Try It Editor.
Try another name:
Set person.fullName = "Alan Turing" and see both parts update.
Getters and setters let a method look and feel like a property.
They keep the outside interface simple while doing real work behind it.
They appear most often in classes, where derived values are common.