Is there any benefit when writing JavaScript classes and namespaces of this...

if(typeof MyNamespace === 'undefined'){
    var MyNamespace = {};
}

(function(){
MyNamespace.MyClass = function(){
    this.property = 'foo'

    return this;
}
}());

Versus just this...

if(typeof MyNamespace === 'undefined'){
    var MyNamespace = {};
}

MyNamespace.MyClass = function(){
    this.property = 'foo'

    return this;
}

I have seen the first pattern implemented in a few libraries, and was trying to find how out if there is any added benefit unless some sort of other function was declared inside of the anonymous function in the first example.

Is there any benefit when writing JavaScript classes and namespaces of this...

if(typeof MyNamespace === 'undefined'){
    var MyNamespace = {};
}

(function(){
MyNamespace.MyClass = function(){
    this.property = 'foo'

    return this;
}
}());

Versus just this...

if(typeof MyNamespace === 'undefined'){
    var MyNamespace = {};
}

MyNamespace.MyClass = function(){
    this.property = 'foo'

    return this;
}

I have seen the first pattern implemented in a few libraries, and was trying to find how out if there is any added benefit unless some sort of other function was declared inside of the anonymous function in the first example.

• javascript

• Yeah that's pretty much it. If you need a variable or function in an outside scope of MyClass that you do not want to be global. – John Kalberer Commented Nov 17, 2011 at 21:02

4 Answers 4

To your question:

Yes, there is a difference (and benefit). In your first example, you can control access control (meaning using prototype-based version of public/private member variables and functions). As an example:

var m = (function() {
    var o = {};
    o.myPublicProperty = 0; // can be accessed by instantiated object's calling code

    var myPrivateProperty = 1; // can't be accessed outside of this module

    o.myPublicFunction = function() {
        myPrivateFunction();
        return myPrivateProperty;
    };

    function myPrivateFunction() {
        ++myPrivateProperty;
        ++o.myPublicProperty;
    }

    o.getMyPrivateProperty = function() {
        return myPrivateProperty;
    }

    return o;
})();

console.log(m.myPublicProperty);       // 0
console.log(m.getMyPrivateProperty()); // 1
console.log(m.myPrivateProperty);      // undefined
console.log(m.myPublicFunction());     // increments
console.log(m.myPublicProperty);       // 1
console.log(m.getMyPrivateProperty()); // 2

http://jsfiddle/dbrecht/EQ4Tb/

A little off topic, but this is a little strange to me:

if(typeof MyNamespace === 'undefined'){
    var MyNamespace = {};
}

Why not just use: var MyNamespace = MyNamespace || {};?

I'm not entirely sure of other benefits, but everything declared within the anonymous function will stay in that scope, i.e. it is not declared in the global scope. That can be of benefit.

For the simple case you've shown the immediately executed anonymous function provides no advantages at all.

However, you could declare variables or other functions inside the scope of the anonymous functions and they would effectively be private to your MyClass function. So that's a huge advantage, and even if you don't need private variables now you might later so you could use the anonymous function anyway...

Note also that putting a var statement inside an if is kind of pointless because the declaration (but not the assignment) gets "hoisted" up out of the block.

Yeah, private variables.

var MyNamespace = MyNamespace || {};

(function(){

    var priv_var = 'bar';

    MyNamespace.MyClass = function(){
        this.property = 'foo';

        //priv_var is accessible in here

        return this;
    }

}());

Versus:

var MyNamespace = MyNamespace || {};

var priv_var = 'bar';

MyNamespace.MyClass = function(){
    this.property = 'foo';

    //priv_var is accessible anywhere

    return this;
}