JavaScript assigning named function to a variable

Question

I read following kind of function in JavaScript: The Good Parts book. It is something like this.

var Foo = function NameOfFunction() {

};

I do not understand this function at all. It would be great if someone could explain this in general and how can this be used?

The exact code from the book is below, which is basically used for recursion

var walk_the_DOM = function walk(node, func) {
    func(node);
    node = node.firstChild();
    while (node) {
        walk(node, func);
        node = node.nextSibling;
    }
};

Answer 1

When you instantiate a function with a name — a name after the function keyword, that is — then that name is bound inside the function as a reference to itself. Outside the function, the name is not visible unless the function is created in a function declaration statement. In your example, that's not the case, so the local variable "walk_the_DOM" is bound to the function.

The key advantage here is that the function so created will continue to work (assuming a copy of the reference to it is saved somewhere) even if "walk_the_DOM" changes its value somehow. Why? Because the name "walk" is bound inside the function, and will remain bound regardless of what happens to "walk_the_DOM".

So there are two parts to this statement:

var walk_the_DOM = function walk(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walk(node, func);
        node = node.nextSibling;
    }
};

The first part is

var walkt_the_DOM ... 

That's a plain var declaration, and it creates a variable that's not really special in any way. Its value is detrermined by the initialization expression:

... = function walk(node, func) {
        func(node);
        node = node.firstChild;
        while (node) {
            walk(node, func);
            node = node.nextSibling;
        }
    };

which happens to be a function instantiation.

What would happen if the function were declared without a name? Like this:

var walk_the_DOM = function(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walk_the_DOM(node, func); // NOTE CHANGE HERE
        node = node.nextSibling;
    }
};

That would work, unless for some reason "walk_the_DOM" changes:

var thatFunction = walk_the_DOM;

walk_the_DOM = "hello world";

thatFunction(whatever, someFunc); // WILL NOT WORK

We've saved a reference to the function, but because the function in this version expects to be able to "find itself" via the external (to the function) variable "walk_the_DOM", it fails, because "walk_the_DOM" no longer refers to the function. That's the advantage of giving the function its own name.

Here is a classic article on the topic. Note that that article points out some implementation bugs, but it's somewhat dated and I think modern browsers do better.