Getters and setters

In the previous lesson, a class set its properties once, in constructor. But some values depend on others. Picture a note on the fridge: "2 minutes until the wash is done." A minute later the note is wrong. The clock on the washing machine never is: it works the time out again every time you look at it.

A property computed in constructor is like the note: it remembers its value once. If the data it came from changes later, the property goes stale:

class Timer {
    constructor(seconds) {
        this.seconds = seconds;
        this.minutes = seconds / 60;
    }
}

const t = new Timer(120);
t.seconds = 300;
console.log(t.minutes); // 2

The property minutes was computed when the object was created, when there were 120 seconds. The new value of seconds no longer affects it, and the program prints the stale 2 instead of 5.

Getter and setter

To make a property work like the clock rather than the note, a class gets a getter and a setter. Here is the same timer rewritten with them:

class Timer {
    seconds = 0;
    get minutes() {
        return this.seconds / 60;
    }
    set minutes(value) {
        this.seconds = value * 60;
    }
}

const t = new Timer();
t.seconds = 300;
console.log(t.minutes); // 5
t.minutes = 2;
console.log(t.seconds); // 120

Getter

A getter is a method with the word get in front of it. From the outside it looks like an ordinary property: it is read without parentheses, t.minutes. On every read the getter runs again and uses the object's current data. A getter has no parameters and gives its value through return.

The getter minutes stores not a number but a rule: divide seconds by 60. That is why reading t.minutes gives 5 after t.seconds = 300.

Setter

A setter is a method with the word set and one parameter. It runs when the property with the same name gets a value: t.minutes = 2 calls the setter with value equal to 2.

The setter minutes does the reverse of the getter and writes the number 120 into seconds. The property minutes itself is stored nowhere: both reading and writing go through seconds.

A setter is like the button that sets the clock: you set the time you want, and the clock changes what is inside it on its own. This is where the comparison ends. A clock runs without you, while a getter computes nothing until the property is read.

Getter or method

Interviewers ask how a getter differs from an ordinary method. Both are functions inside a class; the difference is how they are run:

• a getter runs when the property is read, t.minutes, without parentheses and without arguments;
• a method is called with parentheses, like ann.isAdult(), and can take arguments.

A getter suits a value that follows from the object's data: minutes from seconds, an area from the sides. For an action or a computation with parameters, write an ordinary method.

Common mistake

A getter was called with parentheses, like an ordinary method:

const timer = new Timer();
console.log(timer.minutes()); // ✗

TypeError: timer.minutes is not a function

The expression timer.minutes has already run the getter and given the number 0. The parentheses after it try to call that number as a function. A getter is read without parentheses: timer.minutes.

Key points

• A get getter recomputes its value on every read and is read without parentheses.
• A set setter runs when the property is assigned and gets the value in its parameter.
• The value itself lives in other properties of the object; the getter and setter only read and change them.