Do var fn = function() {...} and var fn = function foo() {...} ever differ?

Question

When you're assigning a function to a variable, does it make any difference at all if you use a named instead of an anonymous function. The following generates an error that "foo() is not defined".

var fn = function foo(){...};
foo();

Can anyone clear up what's going on here?

Answer 1

You're creating a named function expression.

Except in IE, the name is only visible inside the function.

Answer 2

Because it (foo) is not defined ;-)

In this context, function is a function-expression ("FunctionExpression") and not a function-statement ("FunctionDeclaration") -- there are two different productions in the grammar. Only the function-statement form [magically] assigns (and hoists the assignment) of the function name to the appropriate variable. Even functions created with a function-expression can have a name, it just happens to be optional, but there is no implicit assignment as with the other form.

[Edit: Apparently this is more quirky then I imagined. In any case, the above cases hold for a properly conforming browser. For instance Gecko has the "function statement extension, which is non-conforming, and IE/JScript exhibits different behavior, which is also non-conforming. Both of these are incorrect implementations according to the grammar specification.]

Consider the following, which should hopefully show why a ([more] conforming implementation) will sanely throw an exception:

// `function` is just an expression here -- there is no good reason for it to
// cause an implicit side-effect. And, according to the specification, it will not.
(function foo () {}).name // "foo", at least in FF
foo // undefined

On a side note: Any function production which is not a top-level statement or a statement directly inside a function block is a function-expression. The behavior of the following is quirky across browsers:

foo() // works in IE (this should never work)
if (true) {
   // this is an INVALID GRAMMAR production, although it is accepted in browsers,
   // with different operational semantics
   function foo () {
   }
}
foo() // works in FF and IE (this should never work)

Happy coding.

---

A little trip to the ECMAScript specification to talk about the grammar. The "rules" can be equally found there, although I find Ed. 5 to be written in the most confusing manner possible. (It misses for forest for all the trees...)

Grammar for FunctionExpression:

// There is a silly long expression tree to get here.
// Look it up if you want :)
FunctionExpression : function Identifier [optional] ( FormalParameterListopt ) { FunctionBody }

Grammar for FunctionDeclaration (what I refer to as a function-statement above), and associated "chain":

 FunctionBody : SourceElements [optional] 
 Program : SourceElements [optional]  
 SourceElements : SourceElement 
                  SourceElements SourceElement
 SourceElement : Statement
                 FunctionDeclaration 
 FunctionDeclaration : function Identifier ( FormalParameterListopt ) { FunctionBody } 

Note that there is no grammar rule for the "INVALID GRAMMAR" noted. The only way to get to a FunctionDeclaration is through a SourceElement which is only valid inside a FunctionBody or Program (which does not include other blocks like if). "Normal expressions", as a FunctionExpression are restricted, as per below:

An ExpressionStatement cannot start with an opening curly brace because that might make it ambiguous with a Block. Also, an ExpressionStatement cannot start with the function keyword because that might make it ambiguous with a FunctionDeclaration.

...and an apt note from the spec:

Several widely used implementations of ECMAScript are known to support the use of FunctionDeclaration as a Statement. However there are significant and irreconcilable variations among the implementations in the semantics applied to such FunctionDeclarations. Because of these irreconcilable difference, the use of a FunctionDeclaration as a Statement results in code that is not reliably portable among implementations.

Answer 3

In your example, the variable fn is accessible in the current scope, but foo is only accessible in the functions scope. For example:

var bar = function foo() {    
    document.write("Internally, Foo is " + typeof foo + "<br/>");
    document.write("Internally, Bar is " + typeof bar + "<br/>");
};

document.write("Foo is " + typeof foo + "<br/>");
document.write("Bar is " + typeof bar + "<br/>");

bar();

Will produce:

Foo is undefined
Bar is function
Internally, Foo is function
Internally, Bar is function

http://jsfiddle.net/robert/TEnjb/

Answer 4

Technically, fn is a function pointer pointing to "foo", but you don't really see this in Javascript. You should really just write:

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

foo();

As others have pointed out, your assignment makes the foo function "live" only in the scope of fn, so when fn goes out of scope, the function object could in principle be cleaned up. If you have a really compelling reason to do that then use the function pointer, but otherwise you can just keep the function global.

Answer 5

On some versions of IE this will work, but only because they are non-conforming.

var fn  // declares a variable named fn
    = function  // initializes fn
      foo  // declares a name foo that is only visible within the function body.
      (){
        ...  // foo is visible here.
      };
foo();  // foo is not defined here (except on IE 6 and earlier)
fn();  // works just fine.

Answer 6

Note also that although it's often said that:

function foo() {
};

is just syntactic sugar for:

var foo = function() {
};

it's actually not quite true.

In the former case the named function is immediately available when the script is parsed regardless of the order of definitions in the file.

In the latter, the anonymous function body is parsed immediately, but its assignment to a locally scoped variable doesn't happen until that line of code is executed. This means that you can't call foo() in any code executed before then.

Answer 7

Depending on the scope and how you define the function it can be a Function Declaration, Function Expression, or Function Statement. These three function types are treated and loaded differently. Among them, only function declarations require a name. So two other types can be defined without a name. These three types are also different in they way they are assigned to a variable with the function name.

1. Function Declaration : is defined in the top scope and is not used in another expression/statement (e.g., it is not assigned to a variable)

    function foo(){}
   

   The function object is assigned to the variable foo in the global scope.

2. Function Expression : is defined in another expression/statement.

    var bar = function foo(){}
   

   The function object is assigned to the variable foo but in the inner scope (i.e., the scope inside the function)

3. Function Statement : they are allowed to be anywhere where plain Statements are allowed.

   if (true) {
     function foo(){ }
   }
   

   The function object is assigned to the variable foo in the outer scope (i.e., the scope contains the function definition).

   For more information look at this address: http://kangax.github.com/nfe/