Javascript Namespace declaration

Question

What is the proper way to declare a namespace? I've just read "Developing Large Web Applications" and the author suggests using:

if (!window.YourNamespace) {
  YourNamespace = {};
}

seems easy enough.. but I see all the javascript libraries for declaring namespaces and alternate methods. Isn't there a standard way to do this? Any problems with the above?

Answer 1

There is no standard way as you'll see between frameworks but they do go beyond the basics so that for example X.Y.Z, it will create all objects in that chain if they don't already exist.

Answer 2

  var Utils = {
        namespace : function(name) {
                return window[name] = window[name] || {};
        }
  };

or if you prefer your way use:

if (typeof window.YourNamespace === 'undefined') {
    YourNamespace = {};
}

Answer 3

I've seen this convention used several places.

window.YourNamespace = window.YourNamespace || {};

Answer 4

The mentioned namespace-declarating-way by book author is indeed quite good one. But when you need to repeat it in several files and the namespace has several subnamespaces, it can get quite tedious:

if (!window.Foo) {
  Foo = {};
}
if (!window.Foo.Bar) {
  Foo.Bar = {};
}
if (!window.Foo.Bar.Baz) {
  Foo.Bar.Baz = {};
}
etc...

Instead you should write a simple function that takes care of declaring the namespaces for you:

function namespace(ns) {
  var parts = ns.split(/\./);
  var obj = window;
  for (var i=0; i<parts.length; i++) {
    var p = parts[i];
    if (!obj[p]) {
      obj[p] = {};
    }
    obj = obj[p];
  }
}

Now you can declare the whole nested namespace with just one line:

namespace("Foo.Bar.Baz");

In ExtJS framework this is basically what Ext.ns() function does. I don't really know about other libraries.