In this tutorial, you will learn about JavaScript getter and setter methods with the help of examples.

There are two types of object properties in JavaScript:

• Accessor properties
• data properties.

Data Property

Here’s an example of a data attribute that we’ve covered in prior tutorials.

const student = {

    // data property
    firstName: 'Monica';
};

Accessor Property

Accessor properties are methods in JavaScript that get or set the value of an object. We use the following two keywords:

• get – to define a getter method for retrieving the property value
• set – to define a setter method for changing the property value

JavaScript Getter

Getter methods are used in JavaScript to access an object’s properties. As an example:

const student = {

    // data property
    firstName: 'Monica',
    
    // accessor property(getter)
    get getName() {
        return this.firstName;
    }
};

// accessing data property
console.log(student.firstName); // Monica

// accessing getter methods
console.log(student.getName); // Monica

// trying to access as a method
console.log(student.getName()); // error

To access an object’s property, a getter method getName() is created in the preceding program.

get getName() {
    return this.firstName;
}

Note: To create a getter method, the get keyword is used.

In addition, when we access the value, we do it as a property.

student.getName;

An error occurs when you attempt to access the value as a method.

console.log(student.getName()); // error

JavaScript Setter

Setter methods are used in JavaScript to update the values of an object. As an example:

const student = {
    firstName: 'Monica',
    
    //accessor property(setter)
    set changeName(newName) {
        this.firstName = newName;
    }
};

console.log(student.firstName); // Monica

// change(set) object property using a setter
student.changeName = 'Sarah';

console.log(student.firstName); // Sarah

The setter method is used to change the value of an object in the preceding example.

set changeName(newName) {
    this.firstName = newName;
}

Note: To create a setter method, the set keyword is used.

The value of firstName is Monica, as shown in the preceding program.

The value is then changed to Sarah.

student.changeName = 'Sarah';

Note: Setter must have exactly one formal parameter.

JavaScript Object.defineProperty()

To add getters and setters in JavaScript, use the Object.defineProperty() method. As an example:

const student = {
    firstName: 'Monica'
}

// getting property
Object.defineProperty(student, "getName", {
    get : function () {
        return this.firstName;
    }
});

// setting property
Object.defineProperty(student, "changeName", {
    set : function (value) {
        this.firstName = value;
    }
});

console.log(student.firstName); // Monica

// changing the property value
student.changeName = 'Sarah';

console.log(student.firstName); // Sarah

In the preceding example, Object.defineProperty() is used to access and change an object’s property.

The following is the syntax for using Object.defineProperty():

Object.defineProperty(obj, prop, descriptor)

The function Object.defineProperty() accepts three arguments.

• The objectName is the first argument.
• The second argument is the property’s name.
• The third argument is a property description object.

You may like:

Top 30 Java Interview Questions for 2 to 3 Years Experience

JavaScript Getter and Setter JavaScript Getter and Setter JavaScript Getter and Setter JavaScript Getter and Setter JavaScript Getter