Good solution for multiple identical getter/setter functions in ES5/6 classes?

Question

I'm looking for an elegant way to declare identical getter/setters for multiple properties in ES6 classes.

Rather than having a slew of:

  set prop_1(value){
      this.prop_1 = value;
      console.log(`set prop_1 = ${value} and calling updateroom`);
      db.updateRoom(this, 'prop_1');
  }

...

  set prop_n(value){
      this.prop_n = value;
      console.log(`set prop1 = ${value} and calling updateroom`);
      db.updateRoom(this, 'prop_n');
  }

I'd like to do something a little more maintainable like this in the class definition adjacent to the other getters and setters:

['prop_1', 'prop_2' ... 'prop_n'].forEach(prop => {
      set [prop](value) {
        this[prop] = value;
        console.log(`set ${prop} = ${value} and calling updateroom`);
        db.updateRoom(this, prop);
      }
});

But of course can't do that inside the class definition as literals aren't one of the things syntactically allowed there.

Can't even add the setters to the class definition after declaration later via e.g.:

class Room {
// stuff
}

['initialised', 'type', 'owner'].forEach(prop => {
    Object.defineProperty(Room, prop, {
      set: function(value) {
        this[prop] = value;
        console.log(`set ${prop} = ${value} and calling updateroom`)
        db.updateRoom(this, prop);
      }
})

as there is no instance at that point.

So end up going down an arcane path of decorating the constructor, which just means anyone trying to figure out what the heck I was trying to achieve afterwards ends up with a half hour headache and way more complexity.

Am I missing something, has anyone figured out an elegant way of coding this efficiently without repetition of the getter-setters?

Note that your setter examples will all result in stack overflows. You can't assign to the property the setter sets from within the setter. — T.J. Crowder, Nov 09 '17 at 11:37
You need to put the setters on the prototype object, not on the class (constructor) itself. That's where they would have gone to if they had been declared in the `class` body either. — Bergi, Nov 09 '17 at 11:51

T.J. Crowder · Accepted Answer · 2017-11-09T13:22:34.443

I'd like to do something a little more maintainable like this in the class definition adjacent to the other getters and setters:
['prop_1', 'prop_2' ... 'prop_n'].forEach(prop => {
      set [prop](value) {
        this[prop] = value;
        console.log(`set ${prop} = ${value} and calling updateroom`);
        db.updateRoom(this, prop);
      }
});

and

Can't even add the setters to the class definition after declaration later via e.g.:...as there is no instance at that point.

Right, but you can use Object.defineProperty to do it, setting the properties on the object that will be the prototype of those instances (Room.prototype). After the class declaration:

class Room {
    // ...
}

...you can add those setters to Room.prototype:

['prop_1', 'prop_2'/* ... 'prop_n'*/].forEach(prop => {
    Object.defineProperty(Room.prototype, prop, {
        set: function(value) {
            // ...save the value somewhere (*NOT* `this[prop] = value;`,
            // which will call the setter again, resulting in a stack
            // overflow error...
        }
    });
});

Remember that class notation is mostly syntactic sugar on prototypical inheritance (but, you know, the good kind of sugar). You still have a Room.prototype object, and it's perfectly valid to add things to it outside the class declaration.

Live Example (in this example, I just store the values on a separate values property object):

class Room {
    constructor() {
       this.values = {};
    }
}
['prop_1', 'prop_2', 'prop_n'].forEach(prop => {
    Object.defineProperty(Room.prototype, prop, {
        set: function(value) {
            console.log(`set ${prop} = ${value}...`);
            this.values[prop] = value;
        },
        get: function() {
            return this.values[prop];
        }
    });
});

const r = new Room();
r.prop_1 = 42;
console.log("r.prop_1 = ", r.prop_1);
r.prop_2 = "Answer";
console.log("r.prop_2 = ", r.prop_2);

That's perfect, thank you. Still feeling my way around baked in JS class syntax, and the fact that it is just syntactic sugar on prototype inheritance rather than a new thing is key. Knew it had to be simpler than I was making it. — Rob Pickering, Nov 09 '17 at 13:28
@RobPickering: Glad that helped. You may find [this answer](https://stackoverflow.com/a/30783368/157247) useful as well; amongst other things it shows how `class` syntax relates to doing much the same thing without `class` syntax in ES5 and earlier. — T.J. Crowder, Nov 09 '17 at 13:30

Good solution for multiple identical getter/setter functions in ES5/6 classes?

1 Answers1