Question

Are there any dangers/caveats one should be aware of when creating JavaScript namespaces?

Our project is fairly expansive and we are running a lot of JavaScript files (20+, expecting more). It is impossible to have any code maintainability without using namespaces, so we are implementing them like so:

var namespace1 = {

  doSomething: function() {
    ...
  },

  doSomethingElse: function() {
    ...
  }

}

And then to create hierarchies, we link them like so:

var globalNamespace = {
  functions1: namespace1,
  functions2: namespace2,
  ...

}

This works fine, but it is essentially a “trick” to make JS behave as if it did have namespaces. Although this method gets used a lot, most literature on this seems to focus on how to do it, and not whether there are any possible drawbacks. As we write more JS code, this is quickly becoming an integral part of the way our system works. So it’s important that it works seamlessly.

Were there any situations in which this “induced” namespace system caused you errors, or otherwise needed special attention? Can we safely expect identical behaviour across all browsers?

Answer 1

The way you define namespaces in your example it appears to create globals out of each namespace so you end up with

window.namespace1
window.namespace2
window.globalNamespace
window.globalNamespace.namespace1
window.globalNamespace.namespace2

So if you have anything that clobbers window.namespace1 it will also clobber window.globalNamespace.namespace1

edit:

Here’s how we got around this problem:

namespacing = {
    init: function(namespace) {
        var spaces = []; 
        namespace.split('.').each(function(space) {
            var curSpace = window,
                i;  

            spaces.push(space);
            for (i = 0; i < spaces.length; i++) {
                if (typeof curSpace[spaces[i]] === 'undefined') {
                    curSpace[spaces[i]] = {}; 
                }   
                curSpace = curSpace[spaces[i]];
            }   
        });
    }
};

Then you use it like this:

namespacing.init('globalNamespace.namespace1');

globalNamespace.namespace1.doSomething = function() { ... };

This way you don’t have to introduce new global variables and you can confidently add to an existing namespace without clobbering other objects in it.