Getters & Setters in JavaScript – part 3

Setters in JavaScript. Check out parts 1 and  2

Setters in JavaScript

There are three ways you can use  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

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');

2. Set keyword

The set keyword can be used in lieu of the default method syntax for setting the value of a property. The set keyword will define an accessor property whose value you can set. For example:

const randomNum = {
    number1: 1,
    get number2() {
        return Math.floor(Math.random() * 100);
    },
    set num(x) {
        this.number1 = x;
    }
};

In the example we have used the set keyword to define a num accessor property which
takes x as a parameter. It will set the value of this.number1 property to x.
Let’s set the num accessor property to a value of 10.

randomNum.num = 10;

Upon logging the number1 property of the randomNum object, we see 10 logged to the
console:

console.log(randomNum.number1);

3.Object.defineProperty() method

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"
});

•  The first argument passed to the Object.defineProperty() method is the
  truck object.
• The second argument is the name of the property which we have called color.
• The third argument is the color property’s descriptor. Descriptors allow
  modification of a property.
• The configurable attribute is set to false. Configurable alludes to
  whether a property can be deleted or changed.
• The second attribute is enumerable. This will dictate whether the color
  property can be enumerated using the for-in loop.
  218
• The third descriptor attribute is writable. This will dictate whether the
  color property’s value can be changed using the assignment = operator.
• 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"

The Object.defineProperty() method can also be used to define getters and
setters on an existing object. The code below demonstrates a setter method of the truck
object:

Object.defineProperty(truck, "setColor", {
  set: function(newColor) {
  this.color = newColor;
 }
});

The property setColor is a setter which will set the color of the truck to the new value
assigned to it. For example let’s change the color property of the truck to blue:

truck.setColor = ('blue')

A console.log reveals that the color is still red:

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

This is because the writable descriptor is set to false. Let’s add another setter to this object for practice:

Object.defineProperty(truck, "setBrand", {
  set: function(brand) {
  this.brand = brand;
 }
});

This will create a brand property and now let’s set its value:

truck.setBrand = 'Peterbilt';