What is the purpose of "bar" in "var foo = function bar () {...}"?

Question

In a book by Douglas Crockford, he writes a recursive function as:

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

I have never seen a function defined as var foo = function bar(){...} - I have always seen that the right side of the declaration will be anonymous: var foo = function (){...}

Is the sole purpose of the name walk on the right side of the declaration to shorten the call to walk_the_DOM ? They seem to become separate names for an identical function. Perhaps I misunderstood how this fragment works.

Is there a functional reason for naming a function in both a variable declaration and a function constructor?

Answer 1

Is there a functional reason for naming a function both in a variable declaration and in a function constructor?

Yes. function bar() {} forces the name property to set the value to bar , which can be useful, for example, for debugging in a stack trace.

As for some naming confusion you referred to, this might help:

 function bar() {} 

^ This is a function declaration because it does not exist as part of an assignment expression.

 var foo = function() {}; 

^ This is an assignment expression, where the right operand is a function expression and the function expression defines an anonymous function.

 var foo = function bar() {}; 

^ This is an assignment expression in which the right operand is a function expression and the function expression defines a named function.

It is probably worth noting that function declarations can be referenced locally by the name of their function, so the following statements are roughly equivalent:

 function bar() {} var bar = function() {}; 

I say roughly equivalent, because the second statement still leads to an anonymous function, not a named function. There is also a subtle difference in how function declarations go up. Consider the following, for example:

 function test() { hello(); var hello = function () { console.log('hello'); }; } test(); // > TypeError: hello is not a function 

Note that hello was technically defined where we tried to call it (the exception is simply that it is not a function (for now)). This is due to a variable rise. However, as expected, we have not yet assigned our function to the hello variable. This is easier to show than to explain, in fact. Basically, due to the lift, the above test example is equivalent:

 function test() { var hello; // declared, but not assigned yet hello(); hello = function () { console.log('hello'); }; // now the assignment happens } 

Compare this to the actual function declaration:

 function test() { hello(); function hello() { console.log('hello'); }; } test(); // > "hello" 

Note that although the declaration is lower than the invocation command, it still works, because function declarations rise generally in the upper part of their area (in this case test ).

If this is confusing, here is a more concise description of the behavior that might help: ads are raised, not assigned. As long as you understand the difference between function declarations and function expressions, that’s all you need to know. :)

Answer 2

By writing var foo = function (){...} , you declare a variable called foo that contains an anonymous function. By writing var foo = function bar(){...} , you declare a variable named foo , which has a named function as bar . As @ jmar777 noted in his answer, this is useful for tracking stack traces when debugging and fixing bugs.