difference between these two ways of creating a 'private' property in Javascript

Question

I am trying to simulate a simple Holder "class" in JavaScript with a "private" property that holds something and "public" getter and setter "methods" to access the value.

The approach exhibited by HolderA below is mentioned e.g. here. The other approach I more or less arrived at by mutation but I guess it must be recognizable as an idiom as well. I like it because it contains no this or prototype stuff and seems very elementary and functional. Is there a difference between the two?

The test code (I run it under nodejs) seems to suggest that the two approaches are identical except that in the first case the objects I get have typeof object whereas in the second function.

var test = function(o) {
    var initialValueCorrect = (!(typeof o.getX()==='undefined'))&&(o.getX()===0);
    var VALUE_TO_SET = 10;
    o.setX(VALUE_TO_SET);
    var getSetWorks = o.getX()===VALUE_TO_SET;
    var xIsPrivate = (typeof o.x === 'undefined');
    var xHasCorrectValue;
    if (!xIsPrivate)
        xHasCorrectValue = o.x === VALUE_TO_SET;
    return {initialValueCorrect: initialValueCorrect,
            getSetWorks : getSetWorks,
            xIsPrivate: xIsPrivate,
            xHasCorrectValue: xHasCorrectValue};
};

var HolderA = (function() {
    function foo(x) {
        this.getX = function() {
            return x;
        };
        this.setX = function(_x) {
            x = _x;
        };
    };
    return foo;
})();

var createHolderB = (function() {
    var x;
    function foo(_x) {
        x = _x;
        return foo;
    }
    foo.getX = function() {
        return  x;
    };
    foo.setX = function(_x) {
        x = _x;
    };
    return foo;
})();



var objects = [{object: new HolderA(0), name: "approach with constructor-invocation and 'this'"},
               {object: createHolderB(0), name: "approach with normal function invocation and closed variable"}];


for (var i = 0; i<objects.length ; i++) {
    var testResult = test(objects[i].object);
    console.log('['+objects[i].name+']: the object is a: '+(typeof objects[i].object)
                +'\n\n\t\t\t'+JSON.stringify(testResult)+'\n\n\n\n\n');
}

update

As Bergi has pointed out function createHolderB in my code above is plain wrong and only creates a singleton object. So, is not really a "constructor" function. To that end I've now created createHolderC which can be used to really create multiple objects with a hidden private property like this:

var objectC1 = createHolderC()(0);

Now, is there any material difference between HolderA and the createHolderC function or is the difference purely stylistic?

var createHolderC = function () {
    return (function() {
        var x;
        function foo(_x) {
            x = _x;
            return foo;
        };
        foo.getX = function() {
            return x;
        };
        foo.setX = function(_x) {
            x = _x;
        };
        return foo;
    })();
};

Bergi · Accepted Answer · 2015-10-22T08:24:29.170

createHolderB does not create new holders like HolderA does. It's essentially a singleton pattern. You might also want to call it a module. Notice that createHolderB() === createHolderB.

createHolderC is still different from HolderA in that it returns function objects, not instances. You may see the differences better when you strip out the unnecessary IEFEs:

function HolderA(x) {
    this.getX = function() {
        return x;
    };
    this.setX = function(_x) {
        x = _x;
    };
    // implicit `return this;` when called via `new`
}

function createHolderC() {
    var x;
    function foo(_x) {
        x = _x;
        return foo;
    };
    foo.getX = function() {
        return x;
    };
    foo.setX = function(_x) {
        x = _x;
    };
    return foo;
}

A typical factory would rather look like this:

function createHolderD(x) {
    var foo = {};
    foo.getX = function() {
        return x;
    };
    foo.setX = function(_x) {
        x = _x;
    };
    return foo;
}

(or even with return {getX: …, setX: …};), the only difference to HolderA is the prototypical inheritance then.

updated code with a correct functional "constructor" function. — Marcus Junius Brutus, Oct 22 '15 at 08:12

rajuGT · Answer 2 · 2015-10-21T19:48:58.190

Basically both exhibits the private access behavior to the x variable. But the difference between those two are

Constructor function

var HolderA = (function() {
  function foo(x) {
    this.getX = function() {
        return x;
    };
    this.setX = function(_x) {
        x = _x;
    };
  };
  return foo;
})();

This is a self executing function, where it returns Constructor foo.
That is the reason you are using new while creating this type of holder {object: new HolderA(0)

A function
```
var createHolderB = (function() {
  var x;
  function foo(_x) {
    x = _x;
    return foo;
  }
  foo.getX = function() {
    return  x;
  };
  foo.setX = function(_x) {
    x = _x;
  };
  return foo;
})();
```
Even this is also a self executing function, but while execution it creates x variable and returns function foo, and foo access x by closure.
You are creating this type of holder just by normal function call object: createHolderB(0).

score 0 · Answer 3 · edited May 23 '17 at 11:58

Both cases are really bad in practice.

If you're making closures (anonymous functions) that hold your "private variable" scope, it means you're creating those functions for every instance of the class. That costs memory and performance. I used to create classes like this, but then once I was making large number of instances and found out that it hits performance hard.

Just as in Python, make private variables private by some convention, like underscore in _name. Then you can break it for debug reasons (because variables in closure scope are not accessible).

This is how I would do it:

function MyClass(arg) {
    this._privateVar = arg;
}
MyClass.prototype.getPrivateVar = function() {
  return this._privateVar;
}

You can also make getters and setters:

Object.defineProperty(MyClass.prototype, "privateVar", {
    get: function() {
      return this._privateVar;
    }
}

But don't try to push javascript into things it's not designed to, or you'll pay with performance, code readability and debugging complexity. Applies to other languages too.

difference between these two ways of creating a 'private' property in Javascript

update

3 Answers3