where in javascript is this kind of function assignment to variable useful?

Question

I am reading the book. Javascript, The good parts by Douglas Crokford. There are examples provided in the book, but I am not able to understand where and how such examples could be useful in practice. I have modified the code here for simplicity. here are two ways, I can do function assignment to a variable.

example1:

var test= function(ex) {
    alert(ex);
};
test(5);

this produces alert box with value of 5

example2:

var test1 = function test2(ex) {
    alert(ex);
};
test1(7); //this produces alert box with value of 7
test2(8)//this does not give a alert box

I have defined function test2 but assigned it to test1. why can't I access test2 directly by calling test2(8). Further I do not see any big advantage in example 2 over example 1. If you there is some difference, and one of them is superior, I would like to hear that.

Thanks

Answer 1

var test1 = function test2(ex) {
    console.log(test2);
};

Naming the function gives it the ability to reference itself from within its body.

test2 is visible only to test2 and its child scopes (functions) if any.

Answer 2

You're basically assigning a function with a name to test1, what's called a "named function expression". It's useful to debug your code because the name of the function will appear in the call stack trace rather than "anonymous function".

Functions in JavaScript are objects too, so the identifier for the function is test1 (the function object), but the function itself has a name of test2, so test1.name == 'test2'

Answer 3

The syntax you're referring to is called a named function expression. It is primarily used to support recursion in anonymous functions.

In javascript prior to ECMASCRIPT 5, there are two ways to do recursion when the function is anonymous.

1. Using arguments.callee:

   (function(x){
       alert(x);
       if (x) {
           arguments.callee(x-1);
       }
   })(10);
   

2. Using a named function expression:

   (function countdown (x){
       alert(x);
       if (x) {
           countdown(x-1);
       }
   })(10);
   

In ECMASCRIPT 5, when strict mode is enabled arguments.callee is no longer supported. Therefore, in ECMASCRIPT 5 strict mode and for future versions of javascript you should use named function expressions to write recursive anonymous function.

---

Additional answer:

Now you may be wondering, that's not the syntax you're asking about. That syntax looks like:

(function foo () { foo })()

and you were asking about:

var bar = function foo () { foo }

Actually, they're the same. The named function expression syntax applies to function expressions. Which is nothing more than functions declared in expression context.

In javascript, expression context is simply anywhere math is evaluated. Basically, expression context is anything between braces (), anything to the right of the = sign. And anything which needs to be evaluated by an operator.

Apart from the two forms above, the following are also valid named function expressions:

!function foo(){ foo };

0==function foo(){ foo };

0?0:function foo(){ foo };

Answer 4

The way you want it to behave is against the specification. Function declarations must be named, and their name represent variables in the current scope. But function expressions, when named, should not create a variable with their name. Instead, their name becomes available only inside the function.

Some old browsers (e.g. IE8) used to leak the names as variables, see Named function expressions demystified.

Answer 5

Your example 2 is not really an example of proper JavaScript. There are two ways to define a function:

• var foo = function(x) { console.log(x); return x; }

and

• function foo(x) { console.log(x); return x; }

note that in the first example you are effectively creating an anonymous function first, and then you attach a name ('foo') to that anonymous function object. In the second example, however, you are creating a named function object 'foo' right away.

Also, if you go to console and define first the test2 the way you did it, and then, after it's defined, enter the line var test1 = test2, then you will have both functions available.

You can see the explanation of the deeper technical difference here in another S/O answer, quite upvoted: var functionName = function() {} vs function functionName() {}