Without namespacing, Javascript becomes disorganized and insane. Because effectively namespacing in Javascript involves anonymous functions and closures, some of Javascript's more confusing features, it's not always practiced. The result is a global namespace cluttered with every single variable and helper function ever used. This is bad.

Namespacing Using Self-Executing Anonymous Functions and Closures

A self-executing anonymous function looks like this: (function() { ... })();. Each time you use one, you are also using a closure. Here is what this type of namespacing looks like:

var onSaturn = (function() {
  return {
    jump: function() { console.log("Too heavy to jump."); },
    dropAnApple: function() { console.log("*Splat*."); }
  };
})();

onSaturn.jump();
// Too heavy to jump.
onSaturn.dropAnApple();
// *Splat*.

The only variable we've added to the global scope is onSaturn, and through it, we have access to jump and dropAnApple.

Leveraging the Power of the Closure

A closure is created with the self-executing anonymous function. It enables us to declare variables that the namespaced functions can access.

var onSaturn = (function() {
  var gravityConstant = 10.44; // unit: m/s^2

  return {
    weight: function(mass) { return mass * gravityConstant; }
  };
})();

The closure enables selective exposure of its internal variables. In the above example, we are only exposing the weight function. The user is unable to access the internal variable gravityConstant.

onSaturn.weight(40);
// 417.59999999999997
onSaturn.gravityConstant;
// undefined

Exposing it is as simple as adding it to the returned object:

var onSaturn = (function() {
  var gravityConstant = 10.44; // unit: m/s^2

  return {
    weight: function(mass) { return mass * gravityConstant; },
    // Allow access to gravityConstant
    gravityConstant: gravityConstant
  };
})();

Dynamic Internal Variables

Say an asteroid strike happens, and part of Saturn is blown away. This will alter Saturn's gravitational constant. We need our weight function to always choose the correct value in its calculations.

Let's create an asteroidStrike function that reduces the gravitational constant.

var onSaturn = (function() {
  var gravityConstant = 10.44,
      asteroidStrike; // Declare it

  // Define it to reduce gravityConstant
  asteroidStrike = function() {
    gravityConstant = gravityConstant * (3/4);
  };

  return {
    weight: function(mass) { return mass * gravityConstant; },
    gravityConstant: gravityConstant,
    // Expose it
    asteroidStrike: asteroidStrike
  };
})();

Like this, the weight function performs correctly even after an asteroid strike.

onSaturn.weight(1);
// 10.44
onSaturn.asteroidStrike();
onSaturn.weight(1);
// 7.83

Unfortunately, the exposed gravityConstant does not behave as expected after the asteroid strike. It always returns 10.44.

onSaturn.gravityConstant
// 10.44
onSaturn.asteroidStrike()
onSaturn.gravityConstant;
// 10.44

To resolve this, we should expose gravityConstant not as a number, but as a function that returns the value of the inner variable:

var onSaturn = (function() {
  var gravityConstant = 10.44,
      asteroidStrike;

  asteroidStrike = function() {
    gravityConstant = gravityConstant * (3/4);
  };

  return {
    weight: function(mass) { return mass * gravityConstant; },
    // Expose gravityConstant as a function
    gravityConstant: function() { return gravityConstant; },
    asteroidStrike: asteroidStrike
  };
})();

Now, when we call the namespaced gravityConstant() function, we will always get the correct value.

onSaturn.gravityConstant()
// 10.44
onSaturn.asteroidStrike()
onSaturn.gravityConstant()
// 7.83

Nested Namespaces

After creating the main namespace, making nested namespaces is easy. See an example below:

onSaturn.north = (function() {
  var temperature = 30;

  return {
    temperature: function() { return temperature; }
  };
})();

Note that even though onSaturn.north is nested within the onSaturn object, it is created outside of the onSaturn closure. Therefore, onSaturn.north cannot access the private variables of onSaturn. Trying to access a private variable like gravityConstant will fail:

onSaturn.north = (function() {
  return {
    gravityConstant: function() { return gravityConstant; }
  };
})();

onSaturn.north.gravityConstant();
// ReferenceError: gravityConstant is not defined

This wraps up my examples. I hope you're inspired to start namespacing your Javascript if you weren't already. Happy closures!