JavaScript namespacing and modules

September 12, 2015, 9:52 pmAuthor: James Griffiths

As JavaScript has, at the current time of writing, no native support for namespaces we, as developers, have to implement our own approaches/solutions to avoid polluting the global namespace with objects/methods and variables that might conflict with/overwrite one another if we are not careful.

In this article we take you through using namespaces and modules to better manage your code.

What are namespaces?

In programming languages a namespace is a way to collect, group and organise items (such as objects, methods and variables) so that name collisions can be avoided. A name collision occurs when the same variable/method name is used from two separate contexts that are then brought together. This might occur, for example, if 2 custom scripts separately contain a function titled with the same name that, when concatenated together (or where both scripts are called onto the same HTML page), conflict with and overwrite one another.

As such a scenario would introduce bugs into our code namespaces are an approach that helps to avoid such naming collisions from occurring.

The above example implements a namespace via a single global object (the MYNS variable) for our application. All functions/variables that are attached to that namespace then become properties of the MYNS global object.

This is all good and well but we can start to run into problems with complex applications that require multiple types of related functionality to be implemented.

This is where modules come into play.

Namespacing and modules

By grouping related functionality into their own specific modules (such as, for example network related, DOM parsing, AJAX management etc) we can extend our global namespace object for more effective organisation and management of our code:

Developing from the above examples we can then start to implement our methods for each module without worrying about whether or not the naming of these methods might already be used elsewhere within our namespace.

Namespace generation and handling

The above approaches to generating namespace modules can become hard to maintain over time and prone to potential errors such as assuming that a certain namespace or property exists. One way of overcoming this is by using a namespacing function like the following (based on an existing example by Stoyan Stefanov in the excellent JavaScript Patterns book):

The benefits of declaring our modules/dependencies up front at the beginning of our scripts/functions are as follows:

The global variable lookup (I.e. MYNS.Module.Ajax) is performed only once after which the local variable is used leading to faster performance (due to not having to repeatedly look up the nested properties of an object such as MYNS.Modules.Dom)

Makes it to easier to see what scripts files are required to be included in the page

Makes it easier to resolve dependencies instead of having to hunt through a script to find all instances of where they may be called

Namespace conventions

When implementing namespaces in JavaScript it is accepted convention to capitalise the spelling of the global variable (MYNS - in the above examples).

Be aware though that this is also a convention that is used to denote constants within our scripts (I.e. values that do not - or should not - change through the course of a script's execution):

var PI = 3.14159,
CENTURY = 100,
SPEED_OF_LIGHT = 299792458;

In closing

Namespaces provide JavaScript developers with a number of benefits:

Helps to avoids name collisions on objects, methods and variables

Allows for creation of modules to group and better organise related functionality

Allows for nesting of objects (I.e. sub-modules)

Implements a standard way of organising/managing code that is universally agreed upon

Categories

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.

You might also like...

If you don’t have administrator access to your Mac and need to perform tasks such as installing software then you’ll need to acquire root access. To do this is relatively simple, just follow the steps outlined below and you should be up and running in the space of 3 minutes or less: