Blog

Front End Development topics with a touch of humor

Getters and Setters

API for an object

October 13, 2020


Consider an object:

              const pirateShip = {
                  crew: 30,
                  captain: "Skullface McCoy", 
                  treasure: 300
              }
          

What if our program wanted to know how many crew there were? You could access it by invoking the object properties.

              pirateShip.crew;
              //30
              pirateShip.treasure;
              //300
          

What if you wanted to change these properties? Again, you access them directly.

              pirateShip.crew = pirateShip.crew - 5;
              //25
              pirateShip.treasure = 250;
              //250
          

JavaScript offers us another way to access object properties: these are the getters and setters.

            const pirateShip = {
                crew: 25,
                captain: "Skullface McCoy", 
                treasure: 250,

                get doubloons() {
                    return this.treasure;
                }
                set doubloons(coins) {
                    this.treasure = coins;
                }
            }
          

The syntax looks strange. It looks like two normal methods, with keywords in front of them. One wonders how you would even call these weird, newfangled two-word functions.

The first point about the getters and setters is that they are actually two sides of the same doubloon--so to speak (by the way, a doubloon was a gold coin, minted in New Spain back in the 16th century. Pirates liked them). The get and set doubloons, in this case, is called an accessor property, which has two methods, as opposed to, the others, the normal, plain-Jane ones, which are called data properties.

You call them like this:

              pirateShip.doubloons;
              //250
              pirateShip.doubloons = 275;
              pirateShip.doubloons;
              //275
          

Notice that the getter and setter properties are functions, but they are accessed like normal data values. Accessing the doubloons getter results in treasure being outputted. The setter method is not called like a function either, but as if it, too,were a normal data property. Look what happens if you try to call it like a normal function and set doubloons to 10.

              pirateShip.doubloons(10);
              //VM1116:1 Uncaught TypeError: pirateShip.doubloons is not a function
              at <anonymous>:1:12
          

Whew! dodged a musket-ball there!

Keep yer mitts off me doubloons!

Yet, making somewhat complicated syntax is not the goal of a programming language, so what, exactly, is the use of getters and setters? How are they better than just accessing the properties directly?

One way they are better is that you can attach some processing to the data as it's being outputted. Here's the simplest example I can think of:

            const square = {
                sideLength: 4,
    
                get side() {
                    return this.sideLength;
                },
                get area() {
                    return this.sideLength * this.sideLength;
                }
        }
          

I've defined an object, square, with two getters. One returns the length of the side, the other uses the same property, but squares it, resulting in the area.

              square.side;
              //4
              square.area;
              //16
          

From such simple beginnings, great structures can be built! We now have an object that will not only report on its properties, but can do calculations on those properties. It has an API.