Quick question first: Why should one namespace Javascript? Short answer: To avoid name clashes, where you create two functions or variables with the same name. This might especially happen, if you’re using JS libraries from third parties.

The most basic concept to create namespaces in Javascript is by using an object. Regard the following example, which encapsulates the two functions func1 and func2 as well as the variable var1 within the namespace Test:

var Test={
  func1: function(){
    alert("func1");
  },
  func2: function(){
    alert("func2");
  },
  var1: 1
}

Invoking the namespaced functions can now be accomplished by calling Test.func1() or Test.func2(), you can also access the variable with Test.var1 . This concept also allows extending the namespace, meaning adding new functions to it:

Test.func3=function(){
  alert("func3");
}

After this, you can also call Test.func3(), which will output “func3“.

Some people  like to create domain-like namespaces, as they are frequently used in Java packages. This works by stacking objects:

var net={
  misternerd: {
    namespaceTest: {
      func1: function(){
        alert("func1");
      }
    }
  }
}

Now to invoke function 1, a call to net.misternerd.namespaceTest.func1() is required. While this looks nicely to people who work with Java, it is not a good technique to use for Javascript. For each function call to function 1, the interpreter has to work its way down through 4 levels of stacked the stacked objects, which costs time and performance. If you would like to have domain-like namespaces, you should rather create them in single variables using the a separating character, like net_misternerd_namespaceTest.

While the concept of using a simple object as a namespace is easy to understand and very extensible, it does not work well as a class-like concept, meaning you cannot create private functions or members. The variable var1 in the above example can be changed by every function which has access to the namespace variable.

To change this behavior, regard the following technique which I’ve first seen here:

var Test=function(){
  var privateVar=1;

  return{
    func1: function(){
      alert(privateVar);
    },
    func2: function(){
      Test.func1();
    }
  };
}();

In this example, an anonymous function is assigned to Test and immediately invoked. Within the scope of this function, first of all a variable named privateVar is created. Afterwards, the anonymous function returns an object containing functions, which are thus assigned to the namespace variable Test.

Now one might ask: Where is the difference to the first concept? Invoking function 1 is also accomplished by calling Test.func1(), so far no difference here, extending the namespace can also be done as in the example shown above. But take a look at privateVar. This variable only exists in the scope of the anonymous function, which also implies that each of the returned function has access to it. But there is no way for an external function to get access to it, meaning the following example will not work:

Test.func3=function(){
  alert(privateVar);
}

The private variable is not defined within the scope of function 3, meaning that it has no access to it. Using the same concept, you can create private functions as well.

One small drawback of this method is the fact that within exported (meaning returned) functions of the namespace, calls to other functions of the same namespace have to use the full qualified function name, as can be seen in function 2 in the above example. This can lead to issues if you don’t know the name of the namespace in advance. A workaround for this is presented in the following example:

var Test=function(){
  var func1=function(){
    alert("func1");
  }
  var func2=function(){
    func1();
  }

  return{
    func1: func1,
    func2: func2
  }
}

As you can see, all functions are first declared as “private”, meaning in the scope of the anonymous functions. Within this scope, they can access each other without knowing the name of the current namespace. Afterwards, a list of functions from that scope is returned and assigned to the namespace variable.

So in conclusion, namespacing can be useful if you’ve got more than a few lines of code, whether you need the class-like concept with private members or not is really your choice, but avoid stacking namespaces as it coast some performance.