JavaScript Namespaces and Modules

Namespaces

In most programming languages we know the concept of namespaces (or packages). Namespaces allow us to group code and help us to avoid name-collisions.

In c# for example you have this declaration

namespace MyNameSpace
{
    public class MyClass
    {
    }
}

If you want to use MyClass, you need to do explicitly say in which namespace it lives:

MyNameSpace.MyClass obj;

Unfortunately, the concept of namespaces does not exist in JavaScript. To add insult to injury, everything you create in JavaScript is by default global. Now obviously, this is a recipe for disaster, especially since in any modern application you’ll probably end upll using third-party components. How do you avoid these collisions then?

Let’s first look at an anti-pattern, which is declaring all your functions and variables globally:

function calculateVat(prod) {
    return prod.price * 1.21;
}

var product = function (price) {
    this.price = price;
    this.getPrice = function(){
                       return this.price;
		};
    };

function doCalculations() {
    var p = new product(100);
    alert(calculateVat(p.getPrice()));
}

This is a simple snippet, but there are already 3 global items: CalculateVat, product and doCalculations. This could get us in trouble if we start using third-party libraries. What would happen if they use the same names? Well, if they are included after our script, they will overwrite our variables and function. Bad! If they’re included before our script, we’re overwriting their variables, which is also bad, since we’ll probably break the library.

How to create a namespace in JavaScript

To solve this problem you can create a single global object for your app and make all functions and variables properties of that global object:

var MYAPPLICATION = {
    calculateVat: function (base) {
        return base * 1.21;
    },
    product: function (price) {
        this.price = price;
        this.getPrice = function(){
                          return this.price;
                       };
    },
    doCalculations: function () {
        var p = new MYAPPLICATION.product(100);
        alert(this.calculateVat(p.getPrice()));
    }
}

Now we only have one global variable (MYAPPLICATION). Although this is not really a namespace, it can be used as one, since you have to go through the MYAPPLICATION object in order to get to your application code:

var p = new MYAPPLICATION.product(150);
alert(p.getPrice());

Nested namespaces

In most languages you can declare a namespace inside a namespace. This allows for even better modularization. We can just apply the pattern again and define an object inside the outer object:

var MYAPPLICATION = {
    MODEL: {
        product: function (price) { 
                     this.price = price; 
                    this.getPrice = function(){
                         return this.price;
                     };
                 }
    },
    LOGIC: {
        calculateVat: function (base) {
            return base * 1.21;
        },
        doCalculations: function () {
            var p = new MYAPPLICATION.MODEL.product(100);
            alert(this.calculateVat(p.getPrice()));
        }
    }
}

This pattern is fairly simple and is a good way to avoid naming collisions with other libraries (or your own code for that matter).

Safely creating namespaces

Since we still have one global object, there’s still a possibility that we are overwriting another global object with the same name. Therefore, we need to build in some safety:

// not safe, if there's another object with this name we will overwrite it
var MYAPPLICATION = {};

// We need to do a check before we create the namespace
if (typeof MYAPPLICATION === "undefined") {
    var MYAPPLICATION = {};
}

// or a shorter version
var MAYAPPLICATION = MYAPPLICATION || {};

As you can see in this example, if we want to safely create namespaces it can be quite cumbersome and require a bit of boilerplate code. Wouldn’t it be nice if we could avoid all of this?

Creating a multi-purpose Namespace function

What we’d like to do is simply call a function that creates a namespace safely and then lets us define function and variables in that namespace. Here’s where JavaScript’s dynamic nature really shines. Let’s start with an example of what we want to achieve:

var MAYAPPLICATION = MYAPPLICATION || {};

var ns = MYAPPLICATION.createNS("MYAPPLICATION.MODEL.PRODUCTS");

ns.product = function(price){
   this.price = price;
   this.getPrice = function(){
	return this.price;
   }
};

We still need to check our main namespace (you have to start somewhere), but it will allow us to create a hierarchy of namespaces with a single line and have it all figured out.

So how can we do that? Let’s take a look at the implementation of createNS:

MYAPPLICATION.createNS = function (namespace) {
    var nsparts = namespace.split(".");
    var parent = MYAPPLICATION;

    // we want to be able to include or exclude the root namespace so we strip
    // it if it's in the namespace
    if (nsparts[0] === "MYAPPLICATION") {
        nsparts = nsparts.slice(1);
    }

    // loop through the parts and create a nested namespace if necessary
    for (var i = 0; i < nsparts.length; i++) {
        var partname = nsparts[i];
        // check if the current parent already has the namespace declared
        // if it isn't, then create it
        if (typeof parent[partname] === "undefined") {
            parent[partname] = {};
        }
        // get a reference to the deepest element in the hierarchy so far
        parent = parent[partname];
    }
    // the parent is now constructed with empty namespaces and can be used.
    // we return the outermost namespace
    return parent;
};

This function splits the string you pass it and creates a nested namespace for each part. This means that this code:

MYAPPLICATION.createNS("MYAPPLICATION.MODEL.PRODUCTS");

is essentially the same as declaring the following (but with the advantage of checking whether we’re not overriding any existing namespace):

var MYAPPLICATION = {
    MODEL: {
        PRODUCTS: {
        }
    }
}

Aliasing namespaces

When your namespace hierarchy becomes deeper and deeper you will notice that it becomes cumbersome since you always have to type the complete reference to a function or a variable. This can easily be solved by aliasing a namespace (similar to the using statement in C# and Imports in JAVA and VB). Let’s take a look at an example:

MYAPPLICATION.createNS("MYAPPLICATION.MODEL.PRODUCTS");
MYAPPLICATION.createNS("MYAPPLICATION.LOGIC.BUSINESS");

MYAPPLICATION.MODEL.PRODUCTS.product = function(price){                                           
    this.price = price;    
    this.isVatApplicable = true;
    this.getPrice = function(){                                               
        return this.price;                                            
    }                                       
};

MYAPPLICATION.MODEL.PRODUCTS.currentvatrate = 1.21;

MYAPPLICATION.LOGIC.BUSINESS.getSelectedProductTotal = function () {
    var p = new MYAPPLICATION.MODEL.PRODUCTS.product(100);
    if(p.isVatApplicable){
        return p.getPrice() * MYAPPLICATION.MODEL.PRODUCTS.currentvatrate;
    }
    else {
        return p.getPrice();
    }
}

This simple snippet declares two namespaces and then adds an object to the first and a function to the second. The function uses the object in the other namespace. As you can see, this simple method which just uses one function and a couple of variables is very cumbersome to write because of all the references.

A shortcut would be easier. We can achieve this by simply aliasing the namespace in a local variable:

MYAPPLICATION.LOGIC.BUSINESS.getSelectedProductTotal = function () {
    var model = MYAPPLICATION.MODEL.PRODUCTS;
    var p = new model.product(150);
    if (p.isVatApplicable) {
        return p.getPrice() * model.currentvatrate;
    }
    else {
        return p.getPrice();
    }
}

Apart from saving you typing work and decreasing your file size, this pattern has one more advantage that I think is even more important. Since you are declaring your namespace at the top of each function, you are explicitly clarifying in your code on what module it depends. That, in my opinion, is invaluable and will help you understand written code a lot better.

Disadvantages

Although this pattern is easy to use and perfectly valid for many tasks and scenarios there is one big disadvantage:

The one global instance is vulnerable. This means that anyone could access its internals. For example, the product has a property price and a method getPrice(). However, nothing prevents us from directly accessing the price property. We don’t want this, we want to expose only the method so we can control the access to our private variable.
To solve these problems we need to take a look at how can create modules that encapsulate certain data and behavior.

Modules

Private members

Because JavaScript has no syntax to denote scope, we need to use closures to implement private members. An extended example of this can be seen in my post about private variables in JavaScript
A simple example of this is shown in the following snippet:

MYAPPLICATION.MODEL.PRODUCTS.product = function(price){
    var price = price;    
    
    return {
        isVatApplicable: true,
        getPrice: function(){                                               
            return price;                                            
        }
    };
};

In this snippet, the variable price is private, but it is accessible to the method because it’s inside the closure. The public members are isVatApplicable and getPrice.

Another pattern would be the revealing module. It’s essentially the same as the previous pattern, but now we declare everything privately and then decide what we return (and thus expose as public members):

MYAPPLICATION.MODEL.PRODUCTS.product = function(price){
    var price = price;    
    var isVatApplicable = true;
    var getPrice: function(){                                               
            return price;                                            
        };

    return {
        isVatApplicable: isVatApplicable,
        getPrice: getPrice
    };
};

To me this last pattern is the clearest, because you are declaring everything up front and then explicitly make some members public. It shows the intent.

Private members: caveats

There’s one caveat with the pattern described above. Since in JavaScript all variables are passed by reference you could potentially expose members that you didn’t want to be public. In the example above that doesn’t happen because price is a value.
However, let’s consider the following example:

MYAPPLICATION.MODEL.PRODUCTS.product = function(width, height){
    var dimensions = {
        width: width,
        height: height
    };
    var getDimensions = function(){                                               
            return dimensions;                                            
        };
    return {
        getDimensions: getDimensions
    };
};

We are following the same pattern here, so one might think that the dimensions-variable is private. The following code shows a caveat though:

var model = MYAPPLICATION.MODEL.PRODUCTS;
var p = new model.product(50,100);
var dims = p.getDimensions();
dims.width = 1000;
dims.height = 1000;
// alerts 1000 1000 => unexpected
alert(p.getDimensions().width + “ “ + p.getDimensions().height);  

This code will actually alert “1000 1000”. Because the dimensions variable is returned by reference the first time we call p.getDimensions, changing its values will affect the values of the private variable.

What solutions are there for this problem?
There are a few things you can do to mitigate this problem:

  • Do not return objects, but only actual values. In our example this would constitute of creating two methods: getWidth and getHeight.
  • Create a copy of the object. You could do this in the getDimensions method.

Tying it together

The following example ties all the previous techniques together:

// create the root namespace and making sure we're not overwriting it
var MYAPPLICATION = MYAPPLICATION || {};

// create a general purpose namespace method
// this will allow us to create namespace a bit easier
MYAPPLICATION.createNS = function (namespace) {
    var nsparts = namespace.split(".");
    var parent = MYAPPLICATION;

    // we want to be able to include or exclude the root namespace 
    // So we strip it if it's in the namespace
    if (nsparts[0] === "MYAPPLICATION") {
        nsparts = nsparts.slice(1);
    }

    // loop through the parts and create 
    // a nested namespace if necessary
    for (var i = 0; i < nsparts.length; i++) {
        var partname = nsparts[i];
        // check if the current parent already has 
        // the namespace declared, if not create it
        if (typeof parent[partname] === "undefined") {
            parent[partname] = {};
        }
        // get a reference to the deepest element 
        // in the hierarchy so far
        parent = parent[partname];
    }
    // the parent is now completely constructed 
    // with empty namespaces and can be used.
    return parent;
};

// Create the namespace for products
MYAPPLICATION.createNS("MYAPPLICATION.MODEL.PRODUCTS");

MYAPPLICATION.MODEL.PRODUCTS.product = function(width, height){
    // private variables
    var dimensions = {
        width: width,
        height: height
    };
    // private methods
    // creating getWidth and getHeight
    // to prevent access by reference to dimensions
    var getWidth = function(){
        return dimensions.width;
    };
    var getHeight = function(){
        return dimensions.height;
    };
    // public API
    return {
        getWidth: getWidth,
        getHeight: getHeight
    };
};

// Create the namespace for the logic
MYAPPLICATION.createNS("MYAPPLICATION.LOGIC.BUSINESS");


MYAPPLICATION.LOGIC.BUSINESS.createAndAlertProduct = function () {
    var model = MYAPPLICATION.MODEL.PRODUCTS;
    var p = new model.product(50,100);
    alert(p.getWidth() + " " + p.getHeight());
};

As you can see, this patterns allows for modular and well-structured JavaScript. Using these techniques can make your code easier to read and to modify.
There are other techniques available too, and you can build and vary this pattern. In my next post I will show you can create a sandbox. This will allow your code to operate in an isolated environment. It also allows for a type of dependency Injection.

For the readers who made it all the way here, thanks for your patience, the post turned out a bit longer than I anticipated. I hope you enjoyed it.

  • http://lordhanson.wordpress.com/ David Hanson

    And this is just one of many examples where JavaScript fails to scale and results in hacking to deliver complex apps. Its nice to see TypeScript solving this problem elegantly.

  • Kuro_Maii

    There are some things not quite right in my opinion in your final example:
    on line 2 you assign the existing function, variable, object ( or whatever it is ) to it self OR make it an empty object.

    next you make your namespaces, but you never check to see if the object you are now making by any chance already exists. As soon as you go to the next nesting the original is gone.

    if you want to defend against this you will need to rename there already defined name to:
    var thereThing = myThing || {};
    which will make there code useless because they are not expecting there “thing” to have a different name all of a sudden.

    You also say that it is better to return values yet you return functions ( okay the functions returned return values, I can’t completely argue with that ).

    And now for the fun part which will make all my AND your statements useless…:
    This is a simple snippet, but there are already 3 global items: CalculateVat, product and doCalculations. This could get us in trouble if we start using third-party libraries. What would happen if they use the same names? Well, if they are included after our script, they will overwrite our variables and function. Bad! If they’re included before our script, we’re overwriting their variables, which is also bad, since we’ll probably break the library.

    There you have stated that if there code runs after your code they will override your code and thus negating most of your work.

    the only way to defend against any name-collisions is in the following way:

    document.ready( function()
    {
    if ( typeof MYAPPLICATION !== "undefined")
    {
    alert( "No! name-collision!" );
    }
    } );

    now if we see the alert we know we need a different name than “MYAPPLICATION”.
    we repeat this process until we no longer see the alert. If we apply this technique first we can find out what name we need to use for our code and even make your name-spacing technique usable.

    • Kenneth Truyers

      Hello,

      In the createNs-function the check to see whether the namespace exists is done. That’s the reason of existence for this function.
      You are right that we’re not protecting things inside the namespace from being overwritten. This pattern has a limited applicability. It still relies on global variables and global objects, but less than with the traditional approach. In one of my following posts I will show a Sandbox-pattern, which is more complicated but solves these problems.

      But anyway, since you need at least one global object, you will never be sure that third-party code doesn’t break yours. This technique just assures you that you are playing nicely, it doesn’t assure that other will play nicely to.

  • Michael Voznesensky

    Wonderful post!

    Question for you,

    you have

    return {
    getWidth: getWidth,
    getHeight: getHeight
    };

    alert(p.getWidth() + ” ” + p.getHeight());

    instead of
    return {
    getWidth: getWidth(),
    getHeight: getHeight()
    };

    alert(p.getWidth + ” ” + p.getHeight);

    I would think you would have cleaner use if you moved the function call getting the dimensions on to the return? That way, you could access p.getWidth and p.getHeight as properties and not methods, which leads to a little more readability as you only have to use the method call once in the return type but n times in the rest of the code body?

    I am by no means an expert – so perhaps my evaluation is incorrect? Please let me know!

    • http://www.kenneth-truyers.net/ Kennethtruyers

      In that case, getWidth and getHeight would only be evaluated once. The idea in this post is how to export methods and/or properties. In some cases you’ll need a method, when you want to enable the client to trigger reevaluation. In others, you just want to expose a property.