How to use setters and getters in a Javascript object (Class)? - Stack Overflow

The following script DOES NOT WORK. What would be the proper way?

function AnObject () {
    get this.apple = () {
        return this.apple + "GET";
    }
    set this.apple = ( newValue ) {
        return newValue + "SET";
    }
}

var obj = new AnObject();
obj.apple = "Lemon";
console.log( obj.apple ); // LemonSETGET

The following script DOES NOT WORK. What would be the proper way?

function AnObject () {
    get this.apple = () {
        return this.apple + "GET";
    }
    set this.apple = ( newValue ) {
        return newValue + "SET";
    }
}

var obj = new AnObject();
obj.apple = "Lemon";
console.log( obj.apple ); // LemonSETGET

• javascript
• class
• setter
• getter
• getter-setter

Share Improve this question Follow asked May 10, 2015 at 15:28 MarkMark 18.3k2424 gold badges9090 silver badges130130 bronze badges 1

• What doesnt work about it? You never actually set the value in the set method. – tymeJV Commented May 10, 2015 at 15:33

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

You can use Object.defineProperties():

function AnObject() {
  Object.defineProperties(this, {
    apple: {
      get: function() {
        return this._apple + " GET";
      },
      set: function(value) {
        this._apple = value;
      },
      configurable: true, writable: true
    }
  });
 }

Note that you have to be careful to use a different property name if you want to keep the value around with the object directly. If not, you could use the constructor's closure:

function AnObject() {
  var theApple;

  Object.defineProperties(this, {
    apple: {
      get: function() {
        return theApple + " GET";
      },
      set: function(value) {
        theApple = value;
      },
      configurable: true, writable: true
    }
  });
 }

To add to Pointy's ...point,

You can use getters and setters as a language feature, by putting them inside of Object Literals.

Your original constructor could be turned into a factory, with instance-based getters and setters simply by doing the following:

function makeAnObject () {
    var hiddenApple = "Granny Smith";
    return {
      get apple () { return hiddenApple; },
      set apple (ignore) { return hiddenApple; }
    };
}

var thing = makeAnObject();
thing.apple;
thing.apple = "Crab Apple";

Keep in mind that depending on getters/setters will flat-out explode on older browsers (IE8 being the real stickler here), used this way.

Also, using them inside of defineProperties is fine for preventing IE8 from exploding (as it's no longer a language construct)... ...buuuut, it doesn't actually add getters/setters, either (even with polyfills to add the method to Object, and not just DOM Elements), and thus, will have bugged behaviour, either due to syntax explosions, or due to doing something pletely different from your other browsers.

This might not apply to you right now, and hopefully it never does... ...some of us still live in that horrible reality.

class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }


  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }


  set fullName(newValue) {
    [this.firstName, this.lastName] = newValue.split(' ');
  }



};

let user = new User("AAAA", "BBBB");
alert( user.fullName ); 
user.fullName = "CCCC DDDD";
alert( user.fullName ); 

There are no setters and getters in JS

But you can emulate them

function AnObject () {
    var apple = '';
    this.get = function() {
        return apple + "GET";
    }
    this.set = function( newValue ) {
        apple = newValue + "SET";
    }
}

var obj = new AnObject();
obj.set("Lemon");
console.log( obj.get() ); // LemonSETGET