Providing a local name for a function created in a function instantiation makes it possible for the function to refer to itself independently of any external (closure) variable. Consider:
var foo = function() {
// do something
setTimeout(foo, 1000);
};
setTimeout(foo, 1000);
foo = 23;
Because the code inside the function relies on the external symbol "foo" to access itself, the thing will fail after the first timeout. However:
var foo = function foo() {
// do something
setTimeout(foo, 1000);
};
setTimeout(foo, 1000);
foo = 23;
Now it'll work, because "foo" inside the function refers to the name given after the function
keyword, not the "foo" in the enclosing scope.
You're also right about it being a debugging aid. If you're setting up event handlers for example (please excuse the jQuery):
$(document).on('click', 'button', function() {
// do all sorts of complicated stuff
});
It's nice to have a name show up in stack traces when things go wrong:
$(document).on('click', 'button', function buttonClickHandler() {
// ...
});
Finally, this used to be problematic due to bugs, but I think a lot of that has been smoothed out in newer JavaScript runtime environments.