Can I use getters/setters for a variable in a closure using the revealing module pattern?

Question

I thought that I could use a setter to change a closure variable, but when I access the variable directly it's unchanged. Only when I access it using a getter do I get the expected reassigned variable. Is there a second variable being created in some different scope? What is happening here?

var obj = (function () {
  var name = "one";
  var setName = function(strName) {
    name = strName;
  };
  var getName = function() {
    return name;
  };

  return {
    name: name,
    setName: setName,
    getName: getName
  };
}());

obj.setName("two");

alert("obj.name is: " + obj.name); // Prints "one", but why not "two"?
alert("obj.getName() is: " + obj.getName()); // Prints "two" as I'd expect.

I've added the example above to a fiddle

Please include enclosing brackets in your IIFEs so that it's obvious that it's an IIFE **before** I get to the last line of code!! (i.e. `var obj = (function () {…}());` — RobG, May 02 '13 at 04:05

score 5 · Answer 1 · answered May 02 '13 at 03:52

You could use Object.defineProperty to accomplish what you're trying to do:

var obj = function () {
    var name = "one";
    var setName = function(strName) {
        name = strName;
    };
    var getName = function() {
        return name;
    };

    var result = {
        setName: setName,
        getName: getName
    };

    Object.defineProperty(result, 'name', { get: getName });

    return result;
}();

obj.setName("two");

alert("obj.name is: " + obj.name); // two
alert("obj.getName() is: " + obj.getName()); // two

Here's the updated jsfiddle: http://jsfiddle.net/potatosalad/8CsZ2/1/

score 4 · Accepted Answer · answered May 02 '13 at 04:12

In your code:

var obj = function () {
  var name = "one";

This name is a property of the local variable object. This is the one that setName and getName have a reference to. It is resolved on the scope chain.

  return {
    name: name,

This name is a property of the returned object, i.e. it's a different "name" and is resolved using object property identify resolution (i.e. which is completely different to resolving identifiers on the scope chain). The line above assigns the current value of the local variable name, there is no closure here.

setName and getName are setting the closed variable, obj.name is not modified by those functions.

score 2 · Answer 3 · answered May 02 '13 at 03:49

2

return {
    name: name,
    setName: setName,
    getName: getName
  };

The above object is being created before you update the variable, so it will have the old value

answered May 02 '13 at 03:49

TGH

38,769
12
102
135

1

So if I understand correctly, I return an object with a copy of the local name variable, not a reference to it. – Rick Jolly May 02 '13 at 05:25

score 1 · Answer 4 · edited May 23 '17 at 10:28

The logic you may be looking for is:

var obj = function () {
    var name = "one";
    var setName = function(strName) {
        this.name = strName;
    };
    var getName = function() {
        return this.name;
    };

    return {
        name: name,
        setName: setName,
        getName: getName
    };
}();

obj.setName("two");

alert("obj.name is: " + obj.name); // one
alert("obj.getName() is: " + obj.getName()); // two

What this (in this.name) represents may be misleading.

When the method obj.setName() is called, the this.name represents the name property in the returned object, not the first name variable at the top.

this keyword info: https://stackoverflow.com/a/3127440/1538708

score 0 · Answer 5 · answered May 02 '13 at 03:48

0

In this case you are storing reference to closure properties in the object.

When you override the values of the closure variables, the object properties still will have reference to the old objects.

answered May 02 '13 at 03:48

Arun P Johny

384,651
66
527
531

Can I use getters/setters for a variable in a closure using the revealing module pattern?

5 Answers5