javascript namespace examples

The idea of namespace is to avoid the variable or object name collisions. On a web page, usually there are multiple javascript files. Each of these javascript file will have variables and functions for various tasks. Now, the issue arises when two different javascript files are using the same name for one of the variables or functions. The solution to this is to have wrap all the variables and functions in a javascript file into one namespace, namely one variable/object per javascript file. Here are some ways to namespacing your javascript code.

1. Closure
[code language=”javascript”]
//closure namespace
var ns1 = {};
(function(){
this.name = ‘namespace 1’;
this.greeting = function() {
console.log(‘hello, I am in ‘ + this.name);
};
}).apply(ns1);
[/code]

2. Object literal
[code language=”javascript”]
//object literal namespace
var ns2 = {
name: ‘namespace 2’,
greeting: function() {
console.log(‘hello, I am in ‘ + this.name);
}
};
[/code]

3. Object
[code language=”javascript”]
//object namespace
var ns3 = new function() {
this.name = ‘namespace 3’;
this.greeting = function() {
console.log(‘hello, I am in ‘ + this.name);
};
};
[/code]

4. Closure and attach to window
[code language=”javascript”]
//attach to window directly
(function(ns4) {
ns4.name = ‘namespace 4’;
ns4.greeting = function() {
console.log(‘hello, I am in ‘ + ns4.name);
};
}(window.ns4 = window.ns4 || {}));
[/code]

To call the greeting function from each of the above namespace
[code language=”javascript”]
ns1.greeting();
ns2.greeting();
ns3.greeting();
ns4.greeting();
[/code]

By default, all javascript variables are attached to the window object, thus all of these namespace objects are available from the window object.window.ns1,window.ns2,window.ns3,window.ns4
demo