JavaScript Getters and Setters
Summary: in this tutorial, you will learn about JavaScript getters and setters and how to use them effectively.
Introduction to the JavaScript getters and setters
The following example defines a class called Person
:
class Person {
constructor(name) {
this.name = name;
}
}let person = new Person("John");
console.log(person.name); // John
Code language: JavaScript (javascript)
The Person
class has a property name
and a constructor. The constructor initializes the name
property to a string.
Sometimes, you don’t want the name
property to be accessed directly like this:
person.name
Code language: CSS (css)
To do that, you may come up with a pair of methods that manipulate the name
property. For example:
class Person {
constructor(name) {
this.setName(name);
}
getName() {
return this.name;
}
setName(newName) {
newName = newName.trim();
if (newName === '') {
throw 'The name cannot be empty';
}
this.name = newName;
}
}let person = new Person('Jane Doe');
console.log(person); // Jane Doe
person.setName('Jane Smith');
console.log(person.getName()); // Jane Smith
Code language: JavaScript (javascript)
In this example, the Person
class has the name
property. Also, it has two additional methods getName()
and setName()
.
The getName()
method returns the value of the name
property.
The setName()
method assigns an argument to the name
property. The setName()
removes the whitespaces from both ends of the newName
argument and throws an exception if the newName
is empty.
The constructor()
calls the setName()
method to initialize the name
property:
constructor(name) {
this.setName(name);
}
Code language: JavaScript (javascript)
The getName()
and setName()
methods are known as getter and setter in other programming languages such as Java and C++.
ES6 provides specific syntax for defining the getter and setter using the get and set keywords. For example:
class Person {
constructor(name) {
this.name = name;
}
get name() {
return this._name;
}
set name(newName) {
newName = newName.trim();
if (newName === '') {
throw 'The name cannot be empty';
}
this._name = newName;
}
}
Code language: JavaScript (javascript)
How it works.
First, the name
property is changed to _name
to avoid the name collision with the getter and setter.
Second, the getter uses the get
keyword followed by the method name:
get name() {
return this._name;
}
Code language: JavaScript (javascript)
To call the getter, you use the following syntax:
let name = person.name;
Code language: JavaScript (javascript)
When JavaScript sees the access to name
property of the Person
class, it checks if the Person
class has any name
property.
If not, JavaScript checks if the Person class has any method that binds to the name
property. In this example, the name()
method binds to the name
property via the get
keyword. Once JavaScript finds the getter method, it executes the getter method and returns a value.
Third, the setter uses the set
keyword followed by the method name:
set name(newName) {
newName = newName.trim();
if (newName === '') {
throw 'The name cannot be empty';
}
this._name = newName;
}
Code language: JavaScript (javascript)
JavaScript will call the name()
setter when you assign a value to the name
property like this:
person.name = 'Jane Smith';
Code language: JavaScript (javascript)
If a class has only a getter but not a setter and you attempt to use the setter, the change won’t take any effect. See the following example:
class Person {
constructor(name) {
this._name = name;
}
get name() {
return this._name;
}
}let person = new Person("Jane Doe");
console.log(person.name);
// attempt to change the name, but cannot
person.name = 'Jane Smith';
console.log(person.name); // Jane Doe
Code language: JavaScript (javascript)
In this example, the Person
class has the name
getter but not the name
setter. It attempts to call the setter. However, the change doesn’t take effect since the Person class doesn’t have the name setter.
Using getter in an object literal
The following example defines a getter called latest
to return the latest attendee of the meeting
object:
let meeting = {
attendees: [],
add(attendee) {
console.log(`${attendee} joined the meeting.`);
this.attendees.push(attendee);
return this;
},
get latest() {
let count = this.attendees.length;
return count == 0 ? undefined : this.attendees[count - 1];
}
};meeting.add('John').add('Jane').add('Peter');
console.log(`The latest attendee is ${meeting.latest}.`);
Code language: JavaScript (javascript)
Output:
John joined a meeting.
Jane joined a meeting.
Peter joined a meeting.
The latest attendee is Peter.
Summary
- Use the
get
andset
keywords to define the JavaScript getters and setters for a class or an object. - The
get
keyword binds an object property to a method that will be invoked when that property is looked up. - The
set
keyword binds an object property to a method that will be invoked when that property is assigned.