I've seen others using the following pattern.

var bar = function foo(){};
console.log(bar); // foo()
console.log(foo); // ReferenceError: foo is not defined

But why? I can see the point if both were declared, but they're not. Why is the reason?

I've seen others using the following pattern.

var bar = function foo(){};
console.log(bar); // foo()
console.log(foo); // ReferenceError: foo is not defined

But why? I can see the point if both were declared, but they're not. Why is the reason?

• javascript

Share Improve this question Follow edited Mar 12, 2012 at 21:40 Peter Mortensen 31.6k2222 gold badges110110 silver badges133133 bronze badges asked Mar 12, 2012 at 12:38 9837459834793487598374598347934875 53511 gold badge44 silver badges1212 bronze badges 3

• 3 What you've got there is an anonymous function that has a name. The only reason I know to do that is when you're debugging into the foo() function the stack trace will show the name rather than just 'anonymous function'. – Ben Clayton Commented Mar 12, 2012 at 12:47
• 1 Related: Why use named function expressions?, and more generally: var functionName = function() {} vs function functionName() {}. – Sebastian Simon Commented Sep 30, 2021 at 15:34
• @BenClayton “anonymous function that has a name” is an oxymoron. It’s a named function expression. – Sebastian Simon Commented Sep 30, 2021 at 15:40

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 8

As mentioned by others, using the first form in your example (a named function expression) can help with debugging, although with the recent improvements in built-in developer tools in browsers, this argument is being less persuasive. The other reason for using a named function expression is that you can use the function name as a variable within the body of the function rather than the now-deprecated in ES5 arguments.callee.

However, named function expressions are incorrectly and problematically implemented in Internet Explorer < 9 and should generally be avoided when you're targeting those browsers. See Juriy Zaytsev's excellent article on the subject for more information.

When debugging an application, it is easier to know what is calling what in the call stack when "named" anonymous functions are used. So it is a way to give a name to an anonymous function for debugging purposes.

Try this and look at the callstack in a debugger:

myDiv = document.getElementById("myDiv");

myDiv.onclick = function OnClick(){
    debugger;
    //do something
}

They are naming an anonymous function because it makes debugging easier. When debugging, you will see a call to "foo" in the call stack rather than a bunch of calls to "anonymous".

The only reason I can imagine for this is to give the function a desired name. This helps debugging as the inspector uses the function object's name attribute. Try this:

var bar = function foo(){};
console.log(bar.name); // foo

If you put some real code inside foo and add a breakpoint to the JavaScript debugger in your browser, you will see the function as foo in the call stack.

The function definition (or literal) has 4 parts. 1. The reserved word function 2. An optional name which can be used by debuggers or by the function to call itself recursively. 3. The parameters and 4. The body of the function wrapped by { }

Outside of the function scope foo doesn't exist. But since you assigned the function to the variable bar you can call it using the method invocation bar and since bar is defined you can print it.

If you're interested in JavaScript you should really consider getting Douglas Crockford's book Javascript: The Good Parts