在JavaScript中分配变量时使用命名函数的目的是什么？

Question

I recently came across this pattern in the source for https://github.com/yeoman/generator-webapp :

AppGenerator.prototype.packageJSON = function packageJSON() {
  this.template('_package.json', 'package.json');
};

What's the purpose of giving the function the name "packageJSON" when you're going to assign it to a variable or object property anyways? I've always used anonymous functions in similar cases.

Answer 1

For debugging purposes. If you use a named function you can see that name in the call stack trace in your favorite dev tools. Otherwise you'd see anonymous function .

Answer 2

That's called a named function expression (or NFE) and it makes the debugging process much easier.

An important detail to remember is that this name is only available in the scope of a newly-defined function; specs mandate that an identifier should not be available to an enclosing scope:

var f = function foo(){
  return typeof foo; // "foo" is available in this inner scope
};
// `foo` is never visible "outside"
typeof foo; // "undefined"
f(); // "function"

Answer 3

As others says, for debugging purposes mainly. But not only that. For instance, you can rely on the fact that in function's body, you can access to the function itself using the name you set. To give a silly example:

var sum = function (a, b) {
    if (a < 3)
        return sum(3 + a, b);

    return a + b;
}

sum(1, 2) // 3;

But let's see what happens now:

var aSum = sum;
sum = null;

aSum(1, 3); // TypeError: sum is not a function

Naming the function, will cover that use case:

var sum = function sum(a, b) {
    if (a < 3)
        return sum(3 + a, b);

    return a + b;
}

sum(1, 2) // 6

var aSum = sum;
sum = null;

aSum(1, 2) // 6

That's because in the body of the function, the name of the function is always referring to it, and is not taken from another scope, like the first example.