Javascript namespacing

Namespaces help you organise code so that it’s easy for others to find their way around it. In Javascript, they also minimise the number of global variables.

Javascript doesn’t (at the time of writing) have a dedicated way to namespace components. But we can do it using object literals.

I’ll show you how to namespace your components with an example application. The application represents a zoo. The zoo has a couple of animals plus some additional information.

This is the directory structure for the zoo:

zoo/
  zoo.js
  zoo.information.js
  animals/
    zoo.animals.js
    zoo.animals.Penguin.js
    zoo.animals.Tiger.js

The root namespace resides inside zoo.js.

var zoo = {};

The animals need a sub level namespace too which resides inside zoo.animals.js.

// zoo.animals.js
zoo.animals = {};

You will notice that the namespace matches the name of the file. This consistency helps you find the relevant component later.

The zoo has a penguin and a tiger definition which reside inside zoo.animals.Penguin.js and zoo.animals.Tiger.js respectively. The penguin definition is shown below:

zoo.animals.Penguin = function() {
  // constructor
};

If you need to store some information in the zoo you can do so as follows:

// zoo.information.js
zoo.information = {
  name: "My Awesome Zoo",
  address: "52 Zoo Lane, ZA1 2AP"
};

Where possible, you should avoid deeply nested hierarchies. But don’t worry about having a lot of files. You should be concatenating them for production anyway.

I write articles like this and share them with my private mailing list. No spam and definitely no popups. Just one article a month, straight to your inbox. Sign up below: