Creating namespaces in JavaScript

In the past it was very common to see global variables in snippets of JavaScript code across the web, such as:

name = "Spock";
function greeting() {
 return "Hello " + name;
}

A better approach is to place all of your code within a namespace; an object that contains all of your code and helps to prevent name clashes with JavaScript code written by others.

The simplest method of creating a namespace is to use an object literal.

var foo = {};
foo.name = "Spock";
foo.greeting = function() {
 return "Hello " + foo.name;
}

This can also be specified using a different syntax.

var foo = {
 
 name: "Spock",
 
 greeting: function() {
  return "Hello " + foo.name;
 }
 
};

This approach is better that having outright global variables, but it exposes everything within the namespace as global. In other words both foo.name and foo.greeting are available everywhere.

Another problem with this approach is that greeting needs to refer to ‘foo.name’ rather than just ‘name’.

Another method of creating a namespace is through the use of a self executing function.

var foo = (function(){
 
 // Create a private variable
 var name = "Spock";
 
 // Create a private function
 var greeting = function() {
  return "Hello " + name;
 };
 
 // Return an object that exposes our greeting function publicly
 return {
  greeting: greeting
 };
 
})();

Here, when the function is executed it creates a private variable and a private inner function. The inner function can refer to the private variable directly. The main function then returns an object literal containing a reference to the greeting private function – this then exposes the greeting function as a public function so we can call it via the foo namespace.

console.log(foo.greeting() === "Hello Spock"); // true

This post was inspired by a good post from David B. Calhoun about spotting outdated JavaScript.