Namespaces and JavaScript

A big problem in JavaScript is the global scope. Everybody has access to it and other libraries can easily overwrite or use things that you intended to be for yourself.

You can try to solve this with a namespace to encapsulate your code. Then if all your code is in your namespace you will not have to worry about conflicting with other developers JavaScript.

For your namespaces I suggest the reverse DNS style, which if you do not know you can read about it here: What To Call Your Namespaces & Packages.

But JavaScript does not have namespaces
Although JavaScript does not have a namespace or a package keyword, all you need for a namespace is an object.

var com = {};

Because objects in JavaScript are dynamic you can add all of your own objects and modules to this. object.

var com = {};
com.betweenTheBraces = {};

If from this point you load another script and for some reason unknown to us a developer write a function called betweenTheBraces on the global namespace. We have no need to worry as you can only get to our betweenTheBraces through com.betweenTheBraces.

Now of course this code is not good enough. Why? Because if some other library you are loading is using com, you have just overridden it.

Not overriding namespaces
The simple check below makes sure when you are creating your com namespace, a new object will only be created if the first com was evaluated as a falsy value.

var com = com || {};

You can do the same to add your betweenTheBraces package.

com.betweenTheBraces = com.betweenTheBraces || {};

If you know the order you are loading your code then this style of defensive programming may not be necessary.

Overall you can turn your old list of global functions.

function validateInput(input)
{
    // do something
}

function validateForm(form)
{
    // do something
}

function onFormSubmit()
{
    // do something
}

To a nice new namespace something like.

(function(globalScope)
{
    var com = globalScope.com || {};
    com.betweenTheBraces = com.betweenTheBraces || {};

    com.betweenTheBraces.pageValidator =
    {
        validateInput: function(input)
        {
            // do something
        },

        validateForm: function(form)
        {
            // do something
        },

        onFormSubmit: function()
        {
            // do something
        }
    };
}(window));

Here I have created a new namespace for the page validation and wrapped the whole think in a closure. But that is a subject for another day.

From here you may want to read. Creating Classes in JavaScript

What To Call Your Namespaces & Packages

You can practically call your namespace anything you want. Different languages seem to have their own conventions, but the reverse DNS style is what I like the most.

The idea of a namespace is to encapsulate your code, hide it behind folders unique to you. Some of the big libraries will ignore the reverse DNS rule. In JavaScript you’ll find their seems to be no rule at all.

Reverse DNS
Your DNS is unique to you, so it is a great idea to create your namespace using it.

If my domain is www.betweenthebraces.com you drop the www and flip the domain name to create your namespace.

My namespace is com.betweenthebraces.

From this point you can add your project name and any other packages you need.

For example: com.betweenthebraces.myapp.Viewport might be the location of my main class for a mobile application.