Anonymous function vs normal function

Question

Just out of interest, are there any speed/functionality differences between

function foo(bar) {
    alert("foo" + bar);
}

and

var foo = function(bar) {
    alert("foo" + bar);
};

Solution

There are no significant speed differences. (Test)

There are functionality differences.

• Function declarations (like your first) and function expressions (like your second) are processed at different times.
• They have different effects on the scope in which they occur.
• Your first function has a true name, your second does not in ES5 and earlier, your second does not; in ES6/ES2015, it does, because the specification says that the JavaScript engine must assign the name of the variable to the function in that case.

If you look around for "function declaration" vs. "function expression" you'll find a lot of talk (some of it even correct) on the topic.

But briefly:

Function Declaration

A function declaration like your first example happens when the execution cursor enters its containing scope (containing function or the global scope), before any step-by-step code is done. Therefore they cannot appear within non-function blocks (if, try, etc.), since no step-by-step code has been run when they're processed. The name of the function is added to the scope in which it appears, and the function object has a true name (although there's no standard way to query that name, it's still useful in stack traces and such). (Note: Some JavaScript engines allow function declarations within blocks, but it's invalid and what they do is not necessarily consistent. Don't do it.)

Anonymous Function Expression

A function expression like your second example happens, like all expressions, when it's encountered in the step-by-step flow of the code. Your expression is called an anonymous function expression since it doesn't explicitly specify a name for the function. In ES5 and earlier, that meant that the resulting function had no name. In ES6/ES2015 and later, many functions created with anonymous function expressions do have names because the name can be inferred from the expression, and that's the case with your example, in which the function ends up with the name the variable has: foo. Since anonymous function expressions are expressions, they can occur anywhere expressions can occur, although sometimes you have to warn the parser that that's what you're doing.

Named Function Expression

There's a third way of doing this: A named function expression, rather than an anonymous one. They look like this:

var foo = function bar() {
};

or

var obj = {
    foo: function bar() {
    }
};

or

doSomething(function bar() { });

etc.

They used to be really problematic cross-browser (IE8 and earlier mess them up, for instance; early versions of Safari had issues, etc.; Kangax has a good page of the problems that used to abound). It's an expression, so it's valid anywhere there's an expression. The function name (bar in my example) is not added to the containing scope by a compliant JavaScript engine.

Comments

[Šime Vidas]

Depends on where foo is declared (or more precisely, bound) in the second example.

[Šime Vidas]

Also, the missing semicolon in the second example could lead to problems, if the next statement begins with a (, for instance.

[Bluefire]

Can you provide some examples?

[T.J. Crowder]

@Bluefire: Examples of what? I did add a bit more discussion to my answer, if that's what you mean.

[Paul S.]

+1, I use named function expressions all the time in my code but never realised they bleed like that in IE8-. Good thing I normally give them a specific name.

[Aesthete]

Functionality differences outweigh any possible speed benefits. +1 for the detailed response.

[MichaelHuelsen]

What I really like about this answer: Usually people only talk about "function declarations" and "anonymous functions". But it is important to distinguish the two flavours of the expression-based variant, the anonymous function expression and the named function expression. Further reading: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…