Why use getters and setters in JavaScript?

javascript getter-setter
NL500 picture NL500 · Feb 20, 2017 · Viewed 11.7k times · Source

I know how getter and setter work in JavaScript. What I don't understand is why we need them when we can get the same result using normal functions? Consider the following code:

var person = {
    firstName: 'Jimmy',
    lastName: 'Smith',
    get fullName() {
        return this.firstName + ' ' + this.lastName;
    }
}

console.log(person.fullName);    // Jimmy Smith

We can easily replace getter with a function:

var person = {
    firstName: 'Jimmy',
    lastName: 'Smith',
    fullName: function() {
        return this.firstName + ' ' + this.lastName;
    }
}

console.log(person.fullName());    // Jimmy Smith

I don't see the point of writing getter and setter.

Answer

Bulent Vural picture Bulent Vural · Feb 20, 2017

A difference between using a getter or setter and using a standard function is that getters/setters are automatically invoked on assignment. So it looks just like a normal property but behind the scenes you can have extra logic (or checks) to be run just before or after the assignment.

So if you decide to add this kind of extra logic to one of the existing object properties that is already being referenced, you can convert it to getter/setter style without altering the rest of the code that has access to that property.

Edit: Here is an example for an extra logic, this class counts how many times its name is read:

class MyClass {
  constructor() {
    this.refCount = 0;
    this._name = 'the class';
  }

  get name() {
    this.refCount++;
    console.log(`name is read ${this.refCount} times.`);
    return this._name;
  }
}

const myClass = new MyClass();

let maxMessages = 5;
const t = setInterval(() => {
  console.log(`name: ${myClass.name}`);
  
  if (--maxMessages < 1) {
    console.log('done');
    clearInterval(t);
  }
}, 1000);

Related questions

Is it possible to implement dynamic getters/setters in JavaScript?

I am aware of how to create getters and setters for properties whose names one already knows, by doing something like this: // A trivial example: function MyObject(val){ this.count = 0; this.value = val; } MyObject.prototype = { get value(){ return this.count &…

Read More
Getter/setter in constructor

I recently read about the fact that there is a possibility of defining getters/setters in JavaScript. It seems extremely helpful - the setter is a kind of 'helper' which can parse the value to be set first, before actually …

Read More
CoffeeScript: Getter/Setter in Object Initializers

ECMAScript allows us to define getters or setters as following: [text/javascript] var object = { property: 7, get getable() { return this.property + 1; }, set setable(x) { this.property = x / 2; } }; I can work around if I'm using a class: [text/coffeescript] "use strict" Function::…

Read More