Know JavaScript Function Expression vs Function Declaration, but what is this? Named Function Expression?

Question

Possible Duplicate:
JavaScript: var functionName = function() {} vs function functionName() {}
What is the difference between a function expression vs declaration in Javascript?

I am aware of the differences between Function Declarations and Expressions, but have come across this code involving function name and want to understand what happens when we run it:

var abc = function def() {
    console.log("Wait! What??");
}

I know that this is not a way to JavaScript, but just want to know few things:

1. What happens to abc? Why it works? abc can be called but not def, why?
2. Is it a function declaration or an expression?
3. def is undefined - why? If it is supposed to be, are there memory leaks?
4. Why is abc.prototype is function def?

Thanks

Answer 1

What happens to abc?

It contains a function object. If you are doing nothing with it, it will be garbage-collected.

Why it works?

Why not? What "works"?

abc can be called but not def, why?

This is only true from outside, and not in IE. See below.

Is it a function declaration or an expression?

It is a function expression. You can easily see that as it is part of an assignment expression; declarations always need to be on top level (of functions or global code)

def is undefined - why?

Only from outside. A function expression does not create variables. "def" is the name of the function, and inside the function it is a reference to the function as well. This allows recursion for example without using any outer variables.

var abc = function def() {
    def === abc; // true
    def.name; // "def"
}
abc();
def; // undefined

If it is supposed to be, are there memory leaks?

Yes, in Internet Explorer. It creates two distinct functions from that code. For the details, see http://kangax.github.com/nfe/#jscript-bugs

Why is abc.prototype is function def?

It is not. It is just an object. Maybe it is shown with that name in your console, as belongs to a function named "def".

Answer 2

It's a named function expression. A possible use for this could be:

var abc = function def() {
    def.test = 'Wait!'; //< sort of a static property
    console.log(def.test+" What??");
}

But beware.

Answer 3

It is a Function Expression²

Function Expressions can have names as well; the names of Function Expressions are only in scope in the function body¹. (Since ECMAScript 5th edition deprecates arguments.callee, this is the only simple way to write a recursive "anonymous" function.)

Because it is a Function Expression, the name may not¹ introduce a new binding in the outer scope.

Also, all functions are objects in JavaScript. In f(..), f is evaluated before it is "invoked" with (..); if f did not evaluate to a function then an error is thrown. This is why callbacks, which are just functions, can be named by variables and passed as parameters.

Also, check the assumption/assertion about the prototype:

var abc = function def() {}
abc.prototype === abc // -> false
abc.name              // -> "def"

---

¹ See Bergi's answer.

² How to easily tell which is which?

The grammar rules only allow function .. to be parsed as a Function Declaration when it is a SourceElement although most engines will still [incorrectly] parse a Function Declaration as a Statement. SourceElement productions only occur at the top-level "block" of a Program or the top-level "block" of a Function.

In any case, whenever there is a function .. that appears in a place that requires an Expression, it will be parsed as a Function Expression. Examples that are all parsed as Function Expressions:

// Can only assign values: Statements do not have values!
var f = function () {}        
var g = function gName () {}  // see Bergi's answer

// Can only pass values: Statements do not have values!
doIt(function () {})          // callback / "anonymous function"

// IIFE: Immediately-Invoked Function Expression
;(function () {})()           // standard IIFE
;(function () {} ())          // alternative standard IIFE
;+function () {} ()           // curious way to write an IIFE
// basically you can use any unary operator to turn it into an expression not only
//  + but also - ! ~ and so on which will modify the return value accordingly

The point is that in every single one of the above cases, function .. appears at a grammar location requiring an Expression and is thus parsed as a Function Expression. (The semicolons at the start of the lines above avoid "ambiguity" with ASI, which is required when writing in a semicolon-free style like I prefer.)

However. ;function () {} () and ;function f () {} () are both invalid syntax - why? ;-)

Answer 4

It is a named function expression.

Contrary to Function Declarations the Identifier of a Function Expression is not mandatory.

Your function def is not immediately invoked - the whole function is passed to abc and needs to be invoked explicitely abc().

§13 of the ES5 spec states how named function expressions are built. Read the third production rule on how named function expressions are built.

NOTE The Identifier in a FunctionExpression can be referenced from inside the FunctionExpression's FunctionBody to allow the function to call itself recursively. However, unlike in a FunctionDeclaration, the Identifier in a FunctionExpression cannot be referenced from and does not affect the scope enclosing the FunctionExpression.

All recent browsers handle this correctly, so you don't have to worry about and memory leaks or other weird stuff (the incorrect handling is only in old IE <=8).

Answer 5

Your example is a (named) Function Expression.

The difference Between the two is in how the browser loads them.

Function declarations are loaded before any code is executed.
Function expressions are loaded only when the interpreter reaches that line of code.

This means:

abc();
var abc = function() {
    console.log("Wait! What??");
}

Won't work, but:

def();
function def() {
    console.log("Wait! What??");
}

Will.

Now in your example, you can access def, but only inside the function itself.

var abc = function def() {
    console.log(def);
}
abc();

// Logs:
//function def() {
//    console.log(def);
//}