🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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:

Learn more about Javascript at JavaScript Tutorial

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide

Java Guides

Search This Blog