How to Create Getters and Setters in JavaScript?

In JavaScript, we can create functions with get and set keywords which allow us to get or change the data within an object. For getters and setters, we can use the keyword get and set

  • Get: to define a getter to access the property value of the Object.
  • Set: to define a setter to set the property value in the Object.

Let’s suppose we have a person object that has two properties.

let person = {
    first_name: "John",
    last_name: "Robbert"
}

In the above example, we have an object of a person’s first name and last name. So if we collect the full name of the person that will be Jhon Robbert. Below example will be getting the full name of the person object,

console.log(person.first_name +" "+person.last_name);
// Output : John Robbert

In the above example we have accessed both properties with a dot property accessor and then concatenated them. Since both properties are in the console.log() function, it simply prints John Robbert in the browser console. But this is not a recommended way or a poor approach. Let’s do it in a modern way.

We need to create a function with get keyword which should provide the full name within the object.

let person = {
     first_name: "John", 
     last_name: "Robbert", 

     get fullName() {
        return `${this.first_name} ${this.last_name}`;
     }
};

If we access fullName function from person object in the console, below code will help us.

console.log(person.fullName);
//output : John Robbert

In the above object, we have a function fullName with get keyword. In the function, we have concatenated both properties through template literals. This function would return the object’s first_name and last_name properties together.

But we cannot set the object property value like the code below, because the get keyword is attached to the function.

person.fullName = "John Smith";

For the setter, we need to attach the set keyword with the function so we will be able to set a value to the object property.

let person = {
     first_name: "John", 
     last_name: "Robbert", 
     get fullName() {
       return `${this.first_name} ${this.last_name}`;
     },
     set fullName(value) {
      const userName =  value.split(" ");
       this.first_name = userName[0];
       this.last_name = userName[1];
    }
};

In the above example, we duplicated the function fullName with a set keyword. It has a parameter for a person’s name. In the first line, we have a split function that converts the provided name John Smith into the array and then we assign the array to the userName variable.

Now, the fullName function simply sets both properties from the array through this keyword which refers to the same object properties. Next, we can use it, so let’s add the code below and run it.

person.fullName = "John Smith";
console.log(person.fullName);
// Output : John Smith

The above code would print John Smith in the console because we set the person object value through the setter function fullName. If you access the fullName property without setting any name then JavaScript would execute the getter function which is also fullName.

Conclusion

In this article, we have learned to use accessors (getter and setter) in JavaScript. If you would like to learn more about Javascript, checkout our JavaScript page.