In this section, we will learn what the setters and getters are and how to use them in JavaScript.

What are JavaScript Getters and Setters Properties? (JavaScript Accessors)

The getter properties are kind of properties in JavaScript that their sole purpose is to return the value of another property to the same object. Basically, they act as a proxy to another property and allow us to only get the value of that property. (We can’t use getter properties to set values!)

On the other hand, a setter property is a type of property we create in objects that can only accept a value! Basically, these types of properties act as a proxy for other properties in the same object and control what type of values can be assigned to them.

JavaScript Getter (JavaScript get Keyword)

The first question to ask is: what is a getter property?

As mentioned before, a property that its sole job is to return the value of another property in the same object is called a getter property.

With getter properties, we can take the value of another property in the same object, modify the content if necessary and return a more robust value to the requester.

JavaScript get Keyword Syntax:

This is how we can create a getter property:

const obj = {
        firstName: "John",
        get getName(){
          return this.firstName;
        }
      }

Here the getter property is:

get getName(){
          return this.firstName;
}

As you can see, we first started via the `get` keyword, followed by that is the name of the getter property. After that, we use a pair of parentheses and with a pair of braces `{}` to define the body of the getter property.

In the body, we use the `return` keyword and the name of the property in which we want to return its value.

Example: using get keyword in JavaScript

const obj = {
  firstName: "John",
  get getName(){
    return this.firstName;
  },
}
console.log(obj.getName);

Output:

John

Calling a getter property is like calling a typical property of an object. Basically, there’s no need to use the pair of parentheses after the name of that getter property when invoking it.

JavaScript Setter (JavaScript set Keyword)

First of all, what is a setter property?

Well, a property that its sole job is to take an input from a user and set that value as the value of another property in the same object is called setter property.

One of the reasons that we use a setter property is to filter the input we want to assign to a property in the target object.

For example, there might be a property in an object that only takes values range from 0 to 1000. Now, in the body of a setter property, we can set a condition that controls the input and only allows those values that are in the accepted range.

Note: for those of you who don’t know how to create a condition in JavaScript; don’t worry because these topics are covered in the later sections.

JavaScript set Keyword Syntax:

This is how we can create a setter property in an object:

const obj = {
        firstName: "John",
        get getName(){
          return this.firstName;
        },
        set setName(input){
          this.firstName = input;
        }
      }

Here the `setName` is a setter property, and it assigns its input value to a property named `firstName`.

Note that a setter property has one parameter and we use the `set` keyword in front of the setter property name to create one.

Example: using set keyword in JavaScript

const obj = {
  firstName: "John",
  get getName(){
    return this.firstName;
  },
  set setName(input){
    this.firstName = input;
  }
}
console.log(obj.getName);
obj.setName = "Omid";
console.log(obj.getName);

Output:

John

Omid

Take a look at the way we called a setter property:

obj.setName = "Omid";

Note: we don’t use a pair of parentheses after the name of a setter property to assign a value to it.

In this example, the value `Omid` will be assigned to the parameter of the `setName` setter property and so within the body of this setter, this value then will be assigned to the `firstName` property of the obj object.