Do you think IIT Guwahati certified course can help you in your career?
Introduction
In javascript, we have two types of object properties, Data Properties and Accessor Properties. In this article, we will briefly explain the Accessor Properties - Getters and Setters. Accessor Properties are represented using Getters and Setters methods. In object literals, these properties are denoted by get and set keywords.
This article will further cover how to create getters and setters in Javascript. Getters and Setters work in a pair. A getter is used to return the current value of the variable; on the other hand, the setter is used to change the value of the variable to which it is defined.
To have a deeper understanding of Getters and Setters, let’s start by learning a bit more about them in detail.
Accessor Property
Javascript has two functions, the getters and setters methods. When we need to access the property, the return value is used from the getter, and for setting the value, the setter is used.
→ The ‘get’ keyword is used to define a getter method to set the property’s value.
→ The ‘set’ keyword is used to define a setter method to allocate (set) the property’s value.
What is Getter in Javascript?
In Js, we use the getter method to return the object’s private value to the user without the user directly accessing the variable itself.
const codingninja = {
// declaring the data property. firstName: 'Coding', // declaring the accessor property(getter). get getName() { returnthis.firstName; } };
// Access the data property. console.log(codingninja.firstName); //Ninja
// Access the getter method. console.log(codingninja.getName); //Ninja.
// If we try to access as a method. console.log(codingninja.getName()); // error
In the example given, the getter method is initialized using the get keyword. The getter method is used to read the value.
What is Setter in Javascript?
The Javascript Setter method is used to assign the value to a variable. We can use the Setter property even to modify the values assigned to the variable. For example,
const codingninjas = { firstName: 'Coding', //declaring the accessor property(setter). set changeName(newName) { this.firstName = newName; } };
console.log(codingninjas.firstName); //Coding.
// We can modify(set) object property using the setter method. codingninjas.changeName = 'Ninjas';
console.log(codingninjas.firstName); // Ninjas.
In the example, explained above the setter method is used to modify the value of the object. We have used the setter method to change the value of firstName from Coding to Ninjas.
Javascript Object.defineProperty Method
We can also use Object.defineProperty to add getters and setters in Javascript.
For example,
const codingninjas = { firstName: 'Coding' }
//Get the property Object.defineProperty(codingninjas, "getName", { get : function () { returnthis.firstName; } });
// Set the property Object.defineProperty(codingninjas, "changeName", { set : function (value) { this.firstName = value; } });
console.log(codingninjas.firstName); // Coding
//Change the property value codingninjas.changeName = 'Ninjas';
console.log(codingninjas.firstName); // Ninjas
In the example, we have used Object.defineProperty() for setting and getting the values.
The syntax of the Object.definePeroperty() is given as:
Object.defineProperty(obj, prop, descriptor)
In this method, the three parameters are passed, which can be briefly described as:
The first argument given is the Object name.
The second argument which is passed is the name of the property.
The third argument is the object which describes the property.
Accessor Property is used to define the access to the object’s property by dot notation or bracket notation.
What are Getters and Setters?
When we need to access the property, the return value is used from the getter, and for setting the value, the setter is used. → The ‘get’ keyword is used to define a getter method to set get the value of the property. → The ‘set’ keyword is used to define a setter method to allocate (set) the property’s value.
How can we use Getters and Setters in Javascript?
There are two ways to use Getters and Setters in Javascript, → The first is to use the get and the set methods. → The second way is to use the Object.defineProperty() method.
Conclusion
Hey everyone, so let’s brief out the article.
This article has explained the use of Getters and Setters in Javascript and their uses.
We have discussed each of the methods with descriptive examples for better understanding.
Further, we have seen how we can use the Object.defineProperty() method to use the Getters and Setters.
Isn’t Web Development engaging? Building new websites and using amazing animations and different APIs, don’t be scared if you cannot grasp the hold of this vast development. We have the perfect web development course for you to make you stand out from your fellow developers.
85+ registered