In this post, we will learn how to create getters and setters in the Javascript class. JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax does not introduce a new object-oriented inheritance model to JavaScript.

Learn more about Javascript classes at https://www.javaguides.net/2019/04/guide-to-javascript-classes.html.

JavaScript Class - Getters and Setters

In this post, we will learn how to create getters and setters in the Javascript class. Getters and setters work in pairs. A getter returns the current value of the variable and its corresponding setter changes the value of the variable to the one it defines.

Let's create a User Javascript class and define few below properties

firstName
lastName
emailId
age

We also create getter and setter methods for all the above properties.

JavaScript Class - Getters and Setters Example

Here is a complete Javascript code for the User class:

class User {
    constructor(firstName, lastName, emailId, age) {
        this._firstName = firstName;
        this._lastName = lastName;
        this._emailId = emailId;
        this._age = age;
    }

    set firstName(firstName) {
        this._firstName = firstName;

    }

    get firstName() {
        return this._firstName;
    }

    set lastName(lastName) {
        this._lastName = lastName;
    }

    get lastName() {
        return this._lastName;
    }

    set emailId(emailId) {
        this._emailId = emailId;
    }

    get emailId() {
        return this._emailId;
    }

    set age(age) {
        this._age = age;
    }

    get age() {
        return this._age;
    }
}

In our class above we have a getter and setter for all the properties. We use _ to create a separate value in which to store our name property. Without using this convention, we would get errors every time we called get or set. For example, at this point:

To show the current value of the _firstName property of the user object we can use the user.firstName getter method. To assign a new value to the _firstName property we can use the user.firstName="new value" setter method.

The example below shows using getter and setter methods in action:

let user = new User('Ramesh', 'Fadatare', 'ramesh@gmail.com', 29);
console.log('Before changing attributes of User object');
console.log(JSON.stringify(user));

// change first name
user.firstName = 'Ram';
console.log(user.firstName);

// change last name
user.lastName = 'Stark';
console.log(user.lastName);

console.log('After changing attributes of User object');
console.log(JSON.stringify(user));

Output:

Before changing attributes of User object
{"_firstName":"Ramesh","_lastName":"Fadatare","_emailId":"ramesh@gmail.com","_age":29}
Ram
Stark
After changing attributes of User object
{"_firstName":"Ram","_lastName":"Stark","_emailId":"ramesh@gmail.com","_age":29}

For the best learning experience, I highly recommended that you open a console (which, in Chrome and Firefox, can be done by pressing Ctrl+Shift+I), navigate to the "console" tab, copy-and-paste each JavaScript code example from this guide, and run it by pressing the Enter/Return key.

You can refer below screenshot for your testing: