Javascript - difference between namespace vs. closure?

Question

In Javascript, what's the difference between a namespace and a closure? They seem very similar to me.

EDIT

Specifically, this article discusses namespaces and closures, and has sentences like

Now, we’re still going to have situations where we’ll want to declare variables that don’t naturally fit into a namespaced object structure. But we don’t want those variables to have a global scope. This is where self-invoking functions come in.

It goes on to give what looks a lot like a closure, as an "object namespace". It looks to me like the namespace IS a closure...but maybe it's not...? Help?

Answer 1

A namespace is essentially an Object with no interesting properties that you shove stuff into so you don't have a bunch of variables with similar and/or conflicting names running around your scope. So, for example, something like

MyNS = {}
MyNS.x = 2
MyNS.func = function() { return 7; }

A closure is when a function 'retains' the values of variables that are not defined in it, even though those variables have gone out of scope. Take the following:

function makeCounter() { 
   var x = 0;
   return function() { return x++; }
}

If I let c = makeCounter() and then repeatedly call c(), I'll get 0, 1, 2, 3, .... This is because the scope of the inner anonymous function that makeCounter defines 'closes' over x, so it has a reference to it even though x is out of scope.

Notably, if I then do d = makeCounter(), d() will start counting from 0. This is because c and d get different instances of x.

Answer 2

A namespace is typically a method of putting all your global variables as properties under one master global variable, thus only adding one new truly top-level global variable. It prevents pollution of the global namespace and reduces the chance of conflict with other global variables.

And example of a namespace:

var YUI = {};
YUI.one = function(sel) {...};
YUI.two = function(sel) {...};
YUI.three = function(sel) {...};

There is one new item in the top-level global namespace YUI, but there are multiple globally accessible items via the YUI namespace object.

A closure is a function block that lasts beyond the normal finish of the execution of the function because of lasting references to internal parts of the function.

function doSometing() {
    var x = 10;
    setTimer(function() {
        // this gets called after doSomething() has finished executing
        // but because of the function closure, the variables 
        // inside of the parent scope like x are still accessible
        x += 10;
    }, 1000);
}