Respecting the JavaScript global namespace

Here's my plea to all JavaScript developers, whether for web pages, Firefox extensions, or otherwise: Please respect the global namespace.

I've not seen a lot written about this, but as fast as new uses of JavaScript are appearing on web pages, and with how many extensions are being developed for Firefox, function and variable naming collisions and conflicts are a real potential issue.

In a web page, all functions and variables share the same global namespace - that of the Window object. In a Firefox extension, all declared functions and variables become properties of the ChromeWindow.

(Note that in JavaScript, a function is basically just another variable. function someFunction(…){…} and var someFunction = function(…){…}; are identical, and someFunction can be passed and reassigned just like someString from var someString = "Hello, World!". As such, the same issue pertains to both functions and other variables.)

(Don't) prefix your variable names

One primitive approach to preventing problems is to prefix variable names, as discussed at http://forums.mozillazine.org/viewtopic.php?t=129485. While this may slightly help to lessen the chance of naming collisions, it is not the best solution. There is no system in place to prevent 2 authors or code libraries from choosing the "abc_" prefix. The best alternative to such an approach would be to choose a prefix that is more guaranteed to be unique, such as a utilizing an owned Internet domain name, such as with Java packages. For example, I might prefix all my JavaScript code with "com_ziesemer_", to separate it from other JavaScript libraries I may utilize either now or in the future. But there are still better options!

JavaScript is an object-oriented language

Contrary to some popular beliefs, JavaScript is very much an object-oriented language. As such, I feel that an object-oriented solution is in order.

One of the best posts I've found about this is from Douglas Crockford, a senior JavaScript Architect at Yahoo!, and well known for introducing JavaScript Object Notation(JSON). In "Global Domination" on the Yahoo! User Interface Blog, "Global variables are evil". His post is later referred to by Eric Miraglia, also of Yahoo!, in "A JavaScript Module Pattern", including a useful code example.

Another posting I found, "Namspacing your JavaScript", I'm listing more for the comments that follow than the original post. (Choosing "DED" as a top-level variable name is a prime example of choosing a bad name.)

To clearly state the desired trend, most of the best examples and methods make use of JSON and/or JavaScript closures.

Package it up

Further following the appearance of Java packages, I recommend something like the following, again, utilizing JavaScript as an OO language:

if(!com) var com={};
if(!com.ziesemer) com.ziesemer={};

com.ziesemer.myPackage = {
  name: 'visitor',
  location: 'someplace unknown',
  alertHello: function(){
    alert('Hello, ' + this.name
      + ", from " + this.location + '!');
  }
}

(See JavaScript Closures for more context.)

The if checks at the top prevent for wiping out the objects if they already exist, and allow for either creating each level as a new object, or extending an existing object at that level.

Update (2008-05-12): See my JavaScript namespace function for a function to handle all of this in one call, e.g.
namespace("com.ziesemer.myPackage").alertHello = { /* … */ };

Update (2009-12-02): See my proposal to add the above namespace function to the base ECMAScript / JavaScript language.

I am also honored to see that this page itself has been linked to from the Mozilla Firefox Add-on Review Process.

The other advantage of this design over prefixing is that each package can easily be aliased, e.g.:

var czmp = com.ziesemer.myPackage;
czmp.name = 'Mark';
czmp.location = 'Wausau, WI';
czmp.alertHello();

Note that such use should only be done from within another function or another scope limitation, otherwise "czmp" would become a member of the global namespace, which is exactly what this is trying to prevent. An alternative would be to use the JavaScript with statement: (However, this is only meant as a possibility, not a recommendation. I would nest the above in a closure function instead. See Douglas Crockford's "with Statement Considered Harmful" for details.)

with(com.ziesemer.myPackage){
  name = 'Mark';
  location = 'Wausau, WI';
  alertHello();
}

Checking Firefox and extensions

To see how populated/polluted your Firefox global namespace is, follow the instructions at JavaScript debugging in Firefox extensions to setup the JavaScript Debugger/Venkman to inspect the browser window. Then run the following two commands at the debugger's Interactive Session window to get an idea of all the variables created at the global level:

var vars=[]; for(var v in this){vars.push(v);} vars.sort();

vars.length;

On my current Firefox install with less than 20 extensions installed, this yields more than 1,500 variables! (439 of them begin with "webdeveloper_" from the Web Developer extension.)

Update (2009-12-02): See Mats Bryntse's "Global is the new private". It shows the number of global variables used by 30+ popular JavaScript frameworks, from YUI (currently 1), to Microsoft VirtualEarth (currently 880!). It also allows for analysis of any given script (available somewhere online). If that wasn't enough, it even calculates namespace collisions between chosen frameworks.

Update (2008-12-19):

This is in response to Arturo's comment. I'm replying here so that I can properly format my code.

I'm not sure how you got "hello content". Given your code above, I'd expect "hello undefined".

I think avoiding the JSON syntax would probably be the best bet with what you're attempting to do.

Also, beware that your example declares "com.ziesemer.myPackage" twice, which is unnecessary.

Here's what I would recommend, using closures:

if(!com) var com={};
if(!com.ziesemer) com.ziesemer={};

com.ziesemer.myPackage = function(){
  var pub = {};
  pub.name = "visitor";
  pub.greeting = "hello " + pub.name;
  pub.alertHello = function(){
    alert(pub.greeting);
  };
  return pub;
}();

com.ziesemer.myPackage.alertHello();

You can tweak this to not assign everything to "pub", essentially making some things private. You could also somewhat combine both methods, utilizing the "with" within the closure - though that could be somewhat confusing.

BTW, please don't use "com.ziesemer" - that namespace is registered to me. :-)