Javascript: difference between the different forms of functions

Question

# Version A - Function Declaration Statement

// Some JavaScript code
function a() {
    // code within function
}
//Some more JavaScript code


# Version B - Function Expression

// Some JavaScript code
var b = function () {
    // code within function
};
// Some more JavaScript code

I've been reading JavaScript: The Definitive Guide and I wanted to make sure I'm understanding how these 2 versions are being processed by JavaScript. I'll explain my understanding for each version below:

Version A

JavaScript scans the script at the global scope and identifies all variable and function definitions and hoists them to the top. Variable assignments and function evaluations won't happen yet.
For the function a(), JavaScript will then package up the global context and associate it with the scope chain of the function. At this point, the function a() will know all the variable and function definitions in Step 1.
JavaScript does NOT evaluate the function a() and therefore doesn't know anything about the local context within the function. This will remain true until the function is invoked.

Version B

Same as step 1 from above - JavaScript scans the script at the global scope and identifies all variable and function definitions and hoists them to the top. Because the variable b is hoisted to the top, the script is equivalent to this:
```
var b;
// Some JavaScript code
b = function (){ /* code within function */ };
// Some more JavaScript code
```
When JavaScript comes to variable b's assignment, it sees that an anonymous function object is being defined. When JavaScript defines the function, it will package up the context in which the function is defined (in this case, it's the global context) and associate it with the scope chain of the function. At this point, the anonymous function will know all the variable and function definitions in Step 1 which includes var b being undefined.
Because JavaScript sees that the function is being used as an expression in a variable assignment, it will evaluate the function expression. When it evaluates the function expression, it will again hoist all variable and function definitions within the local scope to the top and if there are any function declaration statements within this function expression, it'll package this local context and add it to the scope chain of this function.
A function object is returned when the function is evaluated and then the function object is assigned to var b.

If you could comment on each of the versions and let me know if my understanding is accurate, that'd be great.

possible duplicate of [JavaScript: var functionName = function() {} vs function functionName() {}](http://stackoverflow.com/questions/336859/javascript-var-functionname-function-vs-function-functionname) — Evan Davis, Mar 27 '13 at 18:49
Read this question and the accepted answer to it: http://stackoverflow.com/questiones/3887408/javascript-function-declaration-and-evaluation-order . Then go vote that answer because it's mine ;) — slebetman, Mar 27 '13 at 18:53
Once you understand that js is processed in two phases your understanding of what's happening will be much clearer and simpler. — slebetman, Mar 27 '13 at 18:57
@slebetman I actively had to hunt for your question and answer. "questiones" in the link doesn't work. (But your answer there is very good.) — Scott Mermelstein, Mar 27 '13 at 21:13
I think there is an error in slebetman's answer and added a comment about that to that answer. — GitaarLAB, Mar 28 '13 at 10:47

GitaarLAB · Accepted Answer · 2013-03-28T10:46:35.670

Theory is nice, but in real life browsers use their own dialect (as a result of using their own engine and added browser-candy).

For instance IE doesn't care that your script-tag specifies 'text/javascript'. It'll use its own JScript anyway.

So (to devise a polyglot EcmaScript dialect) it helps to also understand that the theory might not work in the same manner in real life.

For example, a Named function expression is treated as BOTH — function declaration AND function expression in IE(JScript):

typeof g; // "function"
var f = function g(){};

See this link for some of those examples:
http://kangax.github.com/nfe/#jscript-bugs

Actually, here is a rather complete and 'semi-official' (by Pratap Lakshman from MS) overview of JScript deviations from ES3:
http://wiki.ecmascript.org/lib/exe/fetch.php?media=resources:jscriptdeviationsfromes3.pdf

Lastly I'd want to point to this very helpful video where Douglas Crockford explains things some more thorough in 'Crockford on JavaScript - Act III: Function the Ultimate':
http://youtu.be/ya4UHuXNygM

Hope this helps!

Javascript: difference between the different forms of functions

1 Answers1