Namespaces in JavaScript

Gone are the days where one could let JavaScript code grow like the weed on the global scope. Increasing size and complexity on the client side calls for the better organization of code. Namespaces allow to organize units of code into logical groups and reduces possibilities of name collisions. JavaScript doesn’t provide any built-in way to define namespaces like C# or Java.

Variables declared outside of function or object scope is by default added to the window space, which you could think of as a global namespace. This default mode could lead to issues like naming collation and unorganized code structure. Having a basic system for creating namespaces would go the long way to ensuring better code organization. There are multiple ways of simulating namespaces in JavaScript, and we will walk through a pattern based on object literal({}) in this post.

Following is a utility function that would help us define namespaces.

namespace = function (name) {
    var currentSpace, parts = name.split('.');

    currentSpace = window;
    for(var i=0; i < parts.length; i++){
        partName = parts[i];
        currentSpace[partName] = currentSpace[partName] || {};
        currentSpace = currentSpace[partName];
    }

    return currentSpace;
};

This function takes ‘.’ delimited namespace as an argument. It splits the namespace by . and iterate through each part checking whether that it defined, if it isn’t defined, it assigns empty object {} to it. We define window as the default value of the currentSpace as it is the default scope in JavaScript.

So lets put it to use and define Car class in the Vehicles.Passenger namespace.

passenger = namespace('Vehicle.Passenger');

passenger.Car = (function () {
    function Car(make, model) {
        this.make =  make;
        this.model =  model;
    }

    return Car;
}());

You could see how line #1 is calling the namespace function and holding the returned value in a variable named passenger. You could think of passenger as namespace alias here. Now you could define your classes simply by attaching it to this namespace alias as shown in line #3. Now, to create instance of Car you need to call it as maybatch = new Vehicle.Passenger.Car("Daimler AG", "Maybach Guard").

It is hard to avoid mentioning module pattern in a discussion of code organization and modularity. Module pattern takes the namespace technique discussed here to the next level and provides a way for wrapping private members using closers and exposing public API only. Modules facilitate easy code sharing and dependency management. I am keeping detailed discussion of module pattern for a separate post.

I hope this was helpful, I would like to hear your thoughts on this.