How does this JavaScript closure-function reuse an object without a global variable?

Question

I decided to make one step forward on trying to understand Javascript and read again Javascript: The Good Parts. And here comes the first doubt:

Let's say I want to avoid using the global variables because they are evil, and so I have the following:

var digit_name = function(n) {
 var names = ['zero','one','two','three'];
 return names[n];
}

D.Crockford claims that this is slow because everytime the function gets called, a new instantiation of names is done. So, then he moves to the closure solution by doing this:

var digit_name = function () {
  var names = ['zero', 'one', 'two', 'three'];
  return function (n) {
    return names[n];
  }
}();

This makes the names variable stored in memory and therefore it doesn't get instantiated every time we call digit_name.

I want to know why? When we call digit_name, why is the first line being "ignored"? What am I missing? What is really happening here?

I have based this example not just in the book, but on this video (minute 26)

(if someone thinks of a better title, please suggest as appropriate...)

Answer 1

This is not an answer but a clarification in case the given examples still seem confusing.

First, lets clarify. digit_name is not the first function you see in the code. That function is just created to return another function (yes, you can return functions just like you can return numbers or strings or objects, in fact functions are objects):

var digit_name = (
    function () { // <------------------- digit name is not this function

        var names = ['zero', 'one', 'two', 'three'];

        return function (n) { // <------- digit name is really this function
            return names[n];
        }
    }
)();

To simplify the example and illustrate just the idea of closures rather than mix it up with things like self calling functions (which you might not be familiar with yet) you can re-write the code like this:

function digit_name_maker () {
    var names = ['zero', 'one', 'two', 'three'];

    return function (n) {
        return names[n];
    }
}

var digit_name = digit_name_maker(); // digit_name is now a function

What you should note is how even though the names array is defined in the digit_name_maker function it is still available in the digit_name function. Basically both functions share this array. That basically is what closures are: variables shared between functions. I like to think of it as a kind of private global variable - it feels like globals in that all the functions have shared access to it but code outside of the closure can't see it.

Answer 2

Simply put, the issue with the first code is that it creates an array upon each call and returns a value from it. It's an overhead due to the fact that you are creating an array everytime you call.

In the second code, it creates a closure that declares only a single array and returns a function that returns a value from that array. Basically, digit_name now carries it's own array instead of making one every call. Your function gets from an existing array from the closure.

---

On the other hand, closures, if not used properly can and will eat up memory. Closures are usually used to protect inner code from the outer scopes, and usually, implemented with limited access from the outside.

Objects don't get destroyed by the GC unless all references to them are "nulled". In the case of closures, if you can't get in them to kill those inner references, then the objects will not be destroyed by the GC and forever will eat memory.