Getters & Setters in JavaScript – part 2

carrying on from part 1 ..

Getters in JavaScript

Getters are functions that retrieve a value from static properties from an external source. You can only access properties and cannot access methods as they are functions of an object or class and are not static.
There are three ways you can use getters and setters:
1. Default method syntax
2. get  keyword
3. Object.defineProperty() method

We will now discuss the above three in detail.

1. Default method syntax

We can define a getter by using the default method syntax in order to retrieve the property of an object. In order to make this clear have a look at the following example:

let truck = {
    color: 'red',
    make: 'Peterbilt',
    getDetails: function() {
        return(this.color)
    }
};

In the example above, the truck object has one getter method getDetails().The
this keyword references the object that the property belongs to (truck). The return
statement inside the getter method will return the value of the color property.
To access the color property of the truck object, call the getDetails() method on the
truck object like so:

truck.getDetails();

The default method syntax can also be used for setters. Setters will set the property of the
object to the value passed in to the setter method. For example:

let truck = {
    color: 'red',
    make: 'Peterbilt',
    getDetails: function() {
        console.log(this.color)
    },
    setDetails: function(newColor) {
        this.color = newColor;
    }
};

The setDetails() method takes a parameter newColor and sets the value of the
color property to the parameter passed in. Let’s change the color of truck :

object:truck.setDetails('blue');

Let’s check if the setter method worked properly by using the getter method

getDetails():
truck.getDetails();//blue

The getDetails()method will return blue therefore indicating that the
setDetails() method did indeed set the value of the color property to blue.
Now let’s talk about the get and set keywords.

2. Get keyword

The get and set keywords can be used to explicitly create getters and setters. The following sections will discuss both.

Get Keyword:

The get keyword will explicitly create a getter. It will define an accessor property rather
than using a method. This means it cannot have the same name as the data property whose value it is used to gets/retrieve. Let’s have a look at an example to make this clear:

const randomNum = {
    number1: 1,
    get number2() {
        return Math.floor(Math.random() * 100);
    }
};
console.log(randomNum.number2);

In the method the name of the property number1 and name of the accessor property
defined by the get keyword (number2) are different. Upon getting number2, its value will be computed to a random number between the numbers zero to hundred using the
Math.random and Math.floor methods. Therefore, the value of the number2 property will be generated implicitly by calling a
function.

3.Object.defineProperty() method

This method is part of ES5. It is used to define properties, getters and setters on an object
that has already been declared, you can use the defineProperty() method on the
global Object. This might seem a bit redundant as properties are defined at the time of an
object’s declaration. However, this method allows us to define a property’s descriptor which is akin to a property’s meta data.

Syntax: Object.defineProperty(object, property, descriptor)

The first argument is the object on which to define a getter or setter. The second argument is the name of the property which is to be defined and, the third argument is the descriptor for the property.
Let’s have a look at an example to see how this works. Firstly, we will declare and instantiate a new object called truck:

let truck = {};

Now let’s use the Object.defineProperty() method to add a data property to the
truck object:

Object.defineProperty(truck, "color", {
  configurable: false,
  enumerable: false,
  writable: false,
  value: "red"
});

1. Let’s examine the code block above: The first argument passed to the Object.defineProperty() method is the truck object.
2. The second argument is the name of the property which we have called color.
3. The third argument is the color property’s descriptor. Descriptors allow
   modification of a property.
4. The configurable attribute is set to false. Configurable alludes to
   whether a property can be deleted or changed.
5. The second attribute is enumerable. This will dictate whether the color
   property can be enumerated using the for-in loop.
6. The third descriptor attribute is writable. This will dictate whether the
   color property’s value can be changed using the assignment = operator.
7. And lastly the value attribute’s value will be the color property’s value
   which is “red”.
   Let’s check the color property of the truck object by logging it to the console:

console.log(truck.color); // "red"