Recursion | Names of two functions

Question

Below is the code from Douglas Crockford, "Good Details."

In most cases, the code makes sense. Also, I don't understand this line here:

var walk_the_DOM = function walk(node, func) { 

it seems that two names are given to the function - walk_the_dom() and walk()

You can see later that the code is actually called in both ways, so both of these names refer to this function.

Why does this function give two names?

 // Define a walk_the_DOM function that visits every // node of the tree in HTML source order, starting // from some given node. It invokes a function, // passing it each node in turn. walk_the_DOM calls // itself to process each of the child nodes. var walk_the_DOM = function walk(node, func) { func(node); node = node.firstChild; while (node) { // walk() called here walk(node, func); node = node.nextSibling; } }; // Define a getElementsByAttribute function. It // takes an attribute name string and an optional // matching value. It calls walk_the_DOM, passing it a // function that looks for an attribute name in the // node. The matching nodes are accumulated in a // results array. var getElementsByAttribute = function (att, value) { var results = []; // walk_the_DOM() called here walk_the_DOM(document.body, function (node) { var actual = node.nodeType === 1 && node.getAttribute(att); if (typeof actual === 'string' && (actual === value || typeof value !== 'string')) { results.push(node); } }); return results; }; 

Answer 1

This is to make recursion work safely, I would guess.

For example, if you want to use only the name walk_the_DOM , this variable may be reassigned later or inaccessible due to the scope, so it is unsafe to use it inside the function itself.

UPDATE:

I did some research and this is what I found. First of all, refer to the ECMAScript 5 specification, section 13 . There are two ways to define a function: a) using FunctionDeclaration; and b) using FunctionExpression.

They look very similar, but also slightly different. The following is a description of FunctionDeclaration:

 function f() { }; 

These two are FunctionExpression:

 var x = function() { }; var y = function f() { }; 

The interesting part for us is FunctionExpression. In the case of var y = function f() { } identifier f displayed only from inside the body of the function. In other words, somewhere outside of { } , typeof f will return undefined .

Now it's time for some practical examples. Let's say we want to write a recursive function using FunctionDeclaration:

 function f1(x) { x > 5 ? console.log("finished") : f1(x + 1) }; 

Now we want to "copy" the function to another variable and set f1 to something else:

 var f2 = f1; var f1 = function() { console.log("Kitteh") }; 

But this does not work as expected:

 f2(1); // outputs: Kitteh 

Now, if you used the Douglas Crockford method to define a recursive function:

 var f1 = function myself(x) { x > 5 ? console.log("finished") : myself(x + 1) }; 

This way you can reassign the function of any variable as many times as you want. At the same time, we guaranteed that the function always calls itself, and not any function assigned to the variable f1 .

So, the answer to the initial question: you define recursive functions this way because it is the most flexible and reliable way.

Answer 2

Since the walk function is recursive, it must be called both inside and outside the scope of anonymous functions:

 var test = function test_recursive( num ) { if( num < 10 ) { test_recursive( --num ); } } var num = test( 5 ); 

Answer 3

walk_the_DOM is how you should call a function from the outside.

But if a function wants to use recursion and save bytes and / or write faster, they call it walk .

EDIT . As Shedal noted, the walk_the_DOM variable can be reassigned later. Thus, the function will no longer work.