JavaScript

JavaScript Object Accessors (Getters and Setters)

Object accessors properties are methods in JavaScript that are used to get or set the value of an object. “get” is the keyword that is utilized for defining a getter method that retrieves the property value, whereas “set” defines a setter method for changing the value of a specific property.

When we want to access a property of our JavaScript object, the value return by the getter method is used, and to set a property value; the setter method is invoked, and then we pass the value as an argument that we want to set.

This write-up will discuss the JavaScript Object Accessors. Moreover, we will also demonstrate examples related to Getter, Setter, and Object.defineProperty() JavaScript methods. So, let’s start!

JavaScript Getter method

Getter methods are used for accessing the property value of a JavaScript object. The “get” keyword is added before the function name, indicating that it is a “getter” method that will access a specific property of the created object.

Example: Creating and using JavaScript Getter method

This example will show you how to create and use the JavaScript getter method for any object. First of all, we will create an “employee” object having two properties: firstName as “john”, and lastName as “albert”:

const employee = {
firstName: 'john',
lastName: 'albert',  
};

In the next step, we will create a “getFirstName()” getter method that will access the “firstName” property of our “employee” object. Remember that you have to define the getter method within the object definition block, not outside of it:

get getFirstName() {
        return this.firstName;
}

After creating the “getFirstName()” JavaScript getter method for the employee object, you will now have two choices for accessing the “firstName” property. Either you can directly access it by utilizing the “firstName” property with the employee object or by accessing the “getFirstName” getter method as a property:

//accessing data properties
console.log(employee.firstName);
// accessing getter method
console.log(employee.getFirstName);

Have a look at the following image to see the output of the provided code:

JavaScript Setter method

In a JavaScript program, the Setter methods change an object’s property value. It must take only one formal parameter. The “set” keyword is added to specify that it is a JavaScript “setter” method that will change the value of any particular object property.

Example: Creating and using JavaScript Setter method

Firstly, we will create a simple “employee” object that comprises two properties, “firstName” and “lastName” as follows:

const employee = {
firstName: 'john',
lastName: 'albert',
};

Next, we will define our setter method “changeFirstName” that will be utilized for changing the “firstName” of the employee object. Note that you have to perform this operation within the object definition block:

//accessor property(setter)
    set changeFirstName(newFirstName) {
        this.firstName = newFirstName;
}

Now, we will check out the property value of the “firstName” and then set it to the “Jim” using the “changeFirstName” setter method of our JavaScript employee object:

console.log(employee.firstName);
// changing object property using a setter
employee.changeFirstName = 'Jim';
console.log(employee.firstName);

Check out the below-given image for viewing the output:

JavaScript Object.defineProperty() method

Apart from the JavaScript getters and setters, there also exists the “Object.defineProperty()” method that can be used for accessing and changing the object properties. The “Object.defineProperty()” method assists in adding getters and setters for any JavaScript object.

Syntax of Object.defineProperty()

To use Object.defineProperty() method in your JavaScript code, you have to follow its syntax:

Object.defineProperty(objectName, propertyName, objectDescriptor)

Here, in the “objectName” argument you have to add the created object Name; the second argument “propertyName” represents the property. Lastly, the “ObjectDescriptor” argument is used for describing the object property.

Example: Creating and using JavaScript Object.defineProperty() method

This example will create a getter and setter method using the Object.defineProperty() method. For this purpose, firstly, we will create an “employee” object having a “firstName” property:

const employee = {
    firstName: 'Stepheny'
}

Now, to define a getter method using Object.defineProperty(), we will specify “employee” as our object, “getName” as property. Then we will add the related description followed by the “get” keyword in the body of the Object.defineProperty() method:

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

Similarly, you can also define a setter function for the “employee” object by setting the property name as “changeName”. After doing so, add the “set” keyword and define the body of your setter method:

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

To access the Object.defineProperty() getter method, we will use the “employee” object property name “getName” which is added as the second argument in the Object.defineProperty() method:

//getting the property value
console.log(employee.getName);

For setting or changing the firstName of the employee, we will assign the new firstName to “employee.changeName” property:

// changing the property value
employee.changeName = 'Julie';
console.log(employee.firstName);

Here is the complete JavaScript program with its output:

Conclusion

JavaScript object accessors are defined using getter and setters methods. The getter method returns the property value, whereas an argument is passed to the setter method, assigning that specific value to the JavaScript object property. This write-up discussed the JavaScript Object Accessors. Moreover, examples related to Getter, Setter, and Object.defineProperty() JavaScript methods are also demonstrated in this article.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.