Understanding Getters and Setters in JavaScript

<Constructor FunctionsPrototypes>

We did not explicitly mention this, but we've been discussing a concept called object-oriented programming. It is a programming paradigm where we use objects to create everything. Under this paradigm, our program will be divided into reusable pieces in the form of objects.

However, it is not yet time for us to discuss this concept in detail, because there are many things we have to talk about first. For this lesson, we'll be focusing on the getters and setters. They are special properties inside of an object, which are in charge of getting and setting a property value.

Getters

Getters are created with the keyword get, and they are defined like methods.

javascript
1let user = {
2  firstName: "John",
3  lastName: "Doe",
4  role: "Visitor",
5  get fullName() {
6    return `${this.firstName} ${this.lastName}`;
7  },
8};

However, to external programs, they act like properties, and should be accessed like properties.

javascript
1console.log(user.fullName);
text
1John Doe

If you try to access them as a method, JavaScript will return an error.

javascript
1console.log(user.fullName());
text
1/Users/. . ./index.js:10
2console.log(user.fullName());
3                 ^
4
5TypeError: user.fullName is not a function
6    at Object.<anonymous> (/Users/. . ./index.js:10:18)
7    . . .
8
9Node.js v21.6.0

Setters

Setters are created with the keyword set. As the name suggests, they are used to set property values.

javascript
1let user = {
2  firstName: "John",
3  lastName: "Doe",
4  role: "Visitor",
5  get fullName() {
6    return `${this.firstName} ${this.lastName}`;
7  },
8
9  set fullName(value) {
10    [this.firstName, this.lastName] = value.split(" ");
11  },
12};

They are also accessed as a property, not a method.

javascript
1user.fullName = "Alice Cooper";

The string "Alice Cooper" will be passed to fullName(value) as its value.

value.split(" ") will split the string at the space character (" ") and return an array. The first item in the array will be assigned to this.firstName, and the second item in the array will be assigned to this.lastName.

javascript
1let user = {
2  firstName: "John",
3  lastName: "Doe",
4  role: "Visitor",
5  get fullName() {
6    return `${this.firstName} ${this.lastName}`;
7  },
8
9  set fullName(value) {
10    [this.firstName, this.lastName] = value.split(" ");
11  },
12};
13
14console.log(user.fullName);
15
16user.fullName = "Alice Cooper";
17
18console.log(user.fullName);
text
1John Doe
2Alice Cooper

They are properties, not methods

There are two types of properties in objects, data properties and accessor properties. The data properties are used to store information, such as the firstName, lastName, and role properties in our previous examples.

The accessor properties are the getters and setters. They are used to get or set one or more properties. Even though they are defined like a method, they are not methods. To external programs, they are just regular properties.

<Constructor FunctionsPrototypes>