Return named function from constructor function

Question

I've never seen this syntax done before, but it's used all throughout the Angular source code.

function something() {
    // do stuff...
    return function foo() {
        // do stuff..
    };
}

// later
var x = something();

From what I can tell foo() is being used as a closure function, but why does the function have a name? I thought giving a closure function a name was invalid syntax, but this appears to run fine in the browser.

Is there anything different between the above and below code? if so, what?

function something() {
    // do stuff...
    return function() {
        // do stuff..
    };
}

// later
var x = something();

Answer 1

This has nothing to do with the function being included in a closure.

There is a real difference between a function declaration:

function myFunc() { /* ... */ }

and a function expression:

var myFunc = function() { /* ... */ };

or

var myObj = {
    myFunc: function() { /* ... */ },
    // ...
}

In these cases, the function expressions were anonymous. What you're discussing is a named function expression:

var myFunc = function privateName() { /* ... */ };

(Note that the internal privateName does not have to match myFunc.)

These have two distinct advantages over anonymous ones, and one disadvantage. The disadvantage is that:

• IE, at least through IE8, created two copies of such functions for every one you meant to create.

The advantages are:

• The names show up in debuggers, making it easier to find your way around.

• The names are available inside the function, and nowhere else, so you can use them for recursion or other internal usage without polluting the global namespace and without depending on deprecated features like argument.callee.

Kangax wrote perhaps the definitive article on them: Named function expressions demystified.