What's the best way to create a JavaScript namespace?

Question

I have not yet found a common way on the Internet for creating a namespace in JavaScript.

What's the best way to create a namespace (and please list any downfalls that particular approach might have).

Answer 1

See the answers to this question.

Answer 2

(function() {

    var usefulVariable;

    var foo = {
      bar:function(){ alert('hi') }
    };

    // leak into global namespace
    window.foo = foo;

})();

Only foo is exposed to the global namespace, and it "lives" within your private self executing anon function namespace.

Answer 3

You can combine the answers you have received so far and accomplish much;

var Foo;  // declare in window scope.

(function(){

   var privateVar = "BAR!";

   // define in scope of closure where you can make a mess that 
   // doesn't leak into the window scope.

   Foo = {
      staticFunc: function(){ return privateVar; }
   };

})();

I generally avoid window.xxxx = yyyy; as it does not always play nicely with visual studio intellesense. There may be other issues but none that I know of.

Answer 4

In JavaScript, namespaces can only be achieved through object literals, which can be as simple as this:

var MyNS = {
    f1: function() {...},
    f2: function() {...}
};

As others have attempted to show, if you want to provide a private scope within your namespace (which is suggested), the following method is the most appropriate:

var MyNS = (function() {
    var private1 = "...", 
        private2 = "...";

    return {
        f1: function() {...},
        f2: function() {...}
    }
})();

Answer 5

Here's my favorite way. It's a little unorthodox but it works well.

  var MyNamespace = new function(){

    this.MY_CONST_ONE = 1;
    this.MY_CONST_TWO = 2;

    this.MyClass = function (x) {
      this.x = x;
    }

    this.MyOtherClass = function (y) {
      this.y = y;
    }

  } // end of namespace

  // ... 

  var oc = new MyNamespace.MyOtherClass(123);

The interesting thing about it is the closure function is called with new instead of the normal parenthesis, so directly inside of it this refers to the object returned by the function, in other words, the 'namespace' itself.

Answer 6

The book Pro JavaScript Design Patterns (Harmes & Diaz, 2008) provides examples of namespace creation using simple object literals or self-executing anonymous functions, both of which are illustrated in Justin Johnson's excellent answer, and these approaches work well.

Depending on the situation, it might be possible that the namespace already exists and contains members. In such a case, these approaches would destroy any members in the namespace. If this is a concern, one can use an approach similar to this to preserve any existing members, while adding new ones:

var myNamespace = (function(ns) {
    ns.f1 = function() { ... };
    ns.f2 = function() { ... };

    return ns;
})(window.myNamespace || {});

Here, myNamespace is assigned the value returned by the anonymous, self-executing function that receives the parameter ns. As one can see, the value of this parameter is either window.myNamespace or an empty object, depending on whether or not myNamespace has been previously declared.