Easy JavaScript Part 8: What are getters and setters?

In JavaScript, you may have heard of getters and setters. Let’s take a look at what these things are.

First, a setter is used to set the value of a property. A setter gets called each time the value of the property is changed. In other words, it executes a function for each time a property used inside the setter function is changed. Take a look at the following code:

var foo = {
    set cal(x) {
        this.a = x + 5
    },
    a: undefined
}
 
foo.cal = 8;
console.log(foo.a);

In the object foo, the setter cal will be called each time the property a is changed. As an output, you will get 13 printed. While creating a setter, you need to follow these rules:

1. A setter name could be either string or number.
2. A setter must have exactly one input parameter.
3. There should be only one setter with the same identifier in an object
4. You can remove a setter using the delete operator

For other examples of a setter, let’s take a look at the following code:

var greet = {
    set welcome(m) {
        this.msg = this.msg + m;
    },
    msg: "Hello "
}
greet.welcome = "Jaosn";
console.log(greet.msg);

For the above code snippet as output, Hello Jason will be printed. You can also add the setter to an existing object using Object.defineProperty. Let’s say that you have an object foo: 

var foo = {
    num: 0
}

Now to add a setter for the existing object foo , use Object.defineProperty. 

Object.defineProperty(foo, 'cal', {
    set: function (x) {
        this.num = this.num + x;
    }
});
foo.cal = 9;
console.log(foo.num); //9

Above, you are adding a setter to an existing object, and you’ll get 9 as your output. 

JavaScript getter

Using a JavaScript getter, you can call a function each time you do a property reading. So, if you want to call a function, JavaScript will use a getter each time an object is looked up. Consider the following code:

var cal = {
    num: 0,
    get add() {
        return this.num + 5;
    }
}
console.log(cal.add);

In the above code, your output will be the computed value of the property num. Mainly, you’re going to use getters to read the value of a property that returns a dynamically computed value. If you need to read the value of a property on the following criteria:

1. The property will return  dynamic computed value
2. The property’s internal value should not be reflected without calling a method explicitly

To achieve these two requirements, you should use a getter. Consider the code below:

var foo = {
    name: 'jason',
    get Name() {
        return this.name + " beres";
    }
}
console.log(foo.Name);

In the above code, you are using a getter to compute the value of the name property. Here you will get the output jason beres.

While creating a getter, you need to remember the following rules:

1. A getter name can be either a string or a number.
2. A getter must not have any input parameters - it must have exactly zero parameters.
3. There should be only one getter with the same identifier in an object
4. You can remove a getter using the delete operator

 

You can also add a getter to an existing object using the Object.defineProperty.  Let us say that you have an object foo:

var foo = {
    num: 1
}

To add a getter for the existing object foo, use the Object.defineProperty. 

Object.defineProperty(foo, 'numgetter',
    {
        get: function () {
            return this.num + 1;
        }
    });
console.log(foo.numgetter); //2

As you can see above, you’re adding a getter to an existing object, and your output will be 2.

 Conclusion

Having a good understanding of getters and setters is necessary to work with objects in JavaScript. Using a setter, you can call a function each time the value of a property is changed, and using a getter, you can return the computed value of a property. And that’s it!

Don’t forget to check out Ignite UI for JavaScript/HTML5 and ASP.NET MVC, which you can use with HTML5, Angular, React, and ASP.NET MVC to create rich Internet applications. You can download a trial of all our JavaScript controls for free!