|
Lets start with a short quiz. What is alerted in each case?:
15 | var bar = function() { |
19 | var bar = function() { |
28 | var bar = function() { |
32 | var bar = function() { |
40 | var bar = function() { |
43 | var bar = function() { |
If you didn't answer 8, 3, 3 and [Type Error: bar is not a function] respectively, read on... (actually read on anyway  )
What is a Function Declaration?
A Function Declaration defines a named function variable without
requiring variable assignment. Function Declarations occur as
standalone constructs and cannot be nested within non-function blocks.
It's helpful to think of them as siblings of Variable Declarations.
Just as Variable Declarations must start with "var", Function
Declarations must begin with "function".
e.g.
ECMA 5 (13.0) defines the syntax as
function Identifier ( FormalParameterListopt ) { FunctionBody }
The function name is visible within it's scope and the scope of it's
parent (which is good because otherwise it would be unreachable)
What is a Function Expression?
A Function Expression defines a function as a part of a larger
expression syntax (typically a variable assignment ). Functions defined
via Functions Expressions can be named or anonymous. Function
Expressions must not start with "function" (hence the parentheses
around the self invoking example below)
e.g.
07 | var a = function bar() { |
ECMA 5 (13.0) defines the syntax as
function Identifieropt ( FormalParameterListopt ) { FunctionBody }
(though this feels incomplete since it omits the requirement that
the containing syntax be an expression and not start with "function")
The function name (if any) is not visible outside of it's scope (contrast with Function Declarations).
So what's a Function Statement?
Its sometimes just a pseudonym for a Function Declaration. However as kangax
pointed out, in mozilla a Function Statement is an extension of
Function Declaration allowing the Function Declaration syntax to be
used anywhere a statement is allowed. It's as yet non standard so
not recommended for production development
About that quiz....care to explain?
OK so Question 1 uses function declarations which means they get hoisted...
Wait, what's Hoisting?
To quote Ben Cherry's excellent article:
"Function declarations and function variables are always moved
('hoisted') to the top of their JavaScript scope by the JavaScript
interpreter".
When a function declaration is hoisted the entire function body is
lifted with it, so after the interpreter has finished with the code in
Question 1 it runs more like this:
But...but...we were always taught that code after the return statement is unreachable
In JavaScript execution there is Context (which ECMA 5 breaks into
LexicalEnvironment, VariableEnvironment and ThisBinding) and Process (a
set of statements to be invoked in sequence). Declarations contribute
to the VariableEnvironment when the execution scope is entered. They
are distinct from Statements (such as return) and are not subject to their rules of process.
Do Function Expressions get Hoisted too?
That depends on the expression. Let's look at the first expression in Question 2:
The left hand side (var bar) is a Variable Declaration. Variable Declarations get hoisted but their Assignment Expressions don't. So when bar is hoisted the interpreter initially sets var bar = undefined. The function definition itself is not hoisted.
(ECMA 5 12.2 A variable with an initialzier is assigned the value of its AssignmentExpression when the VariableStatement is executed, not when the variable is created.)
Thus the code in Question 2 runs in a more intuitive sequence:
Ok I think that makes sense. By the way, you're wrong about Question 3. I ran it in Firebug and got an error
Try saving it in an HTML file and running it over Firefox. Or run it
in IE8, Chrome or Safari consoles. Apparently the Firebug console does
not practice function hoisting when it runs in its "global" scope
(which is actually not global but a special "Firebug" scope - try
running "this == window" in the Firebug console).
Question 3 is based on similar logic to Question 1. This time it is the foo function that gets hoisted.
Now Question 4 seems easy. No function hoisting here...
Almost. If there were no hoisting at all, the TypeError would be
"bar not defined" and not "bar not a function". There's no function
hoisting, however there is variable hoisting. Thus bar gets declared up front but its value is not defined. Everything else runs to order.
What else should I watch out for?
Function Declarations are officially prohibited within non-function
blocks (such as if) . However all browsers allow them and interpret
them in different ways.
For example the following code snippet in Firefox 3.6 throws an
error because it interprets the Function Declaration as a Function
Statement (see above) so x is not defined. However in IE8, Chrome 5 and
Safari 5 the function x is returned (as expected with standard Function
Declarations).
I can see how using Function Declarations can cause confusion but are there any benefits?
Well you could argue that Function Declarations are forgiving - if
you try to use a function before it is declared, hoisting fixes the
order and the function gets called without mishap. But that kind of
forgiveness does not encourage tight coding and in the long run is
probably more likely to promote surprises than prevent them. After all,
programmers arrange their statements in a particular sequence for a
reason.
And there are other reasons to favour Function Expressions?
How did you guess?
a) Function Declarations feel like they were intended to mimic Java
style method declarations but Java methods are very different animals.
In JavaScript functions are living objects with values. Java methods
are just metadata storage. Both the following snippets define functions
but only the Function Expression suggests that we are creating an
object.
2 | function add(a,b) {return a + b}; |
4 | var add = function(a,b) {return a + b}; |
b) Function Expressions are more versatile. A Function Declaration
can only exist as a "statement" in isolation. All it can do is create
an object variable parented by its current scope. In contrast a
Function Expression (by definition) is part of a larger construct. If
you want to create an anonymous function or assign a function to a
prototype or as a property of some other object you need a Function
Expression. Whenever you create a new function using a high order
application such as curry or compose you are using a Function Expression. Function Expressions and Functional Programming are inseparable.
2 | var sayHello = alert.curry("hello!"); |
Do Function Expressions have any drawbacks?
Typically functions created by Function Expressions are unnamed. For instance the following function is anonymous, today is just a reference to an unnamed function:
1 | var today = function() {return new Date()} |
Does this really matter? Mostly it doesn't, but as Nick Fitzgerald
has pointed out debugging with anonymous functions can be frustrating.
He suggests using Named Function Expressions (NFEs) as a workaround:
1 | var today = function today() {return new Date()} |
However as Asen Bozhilov points out (and Kangax documents) NFEs do not work correctly in IE < 9
Conclusions?
Badly placed Function Declarations are misleading and there are few
(if any) situations where you can't use a Function Expression assigned
to a variable instead. However if you must use Function Declarations,
it will minimize confusion if you place them at the top of the scope to
which they belong. I would never place a Function Declarations in an if statement.
Having said all this you may well find yourself in situations where
it makes sense to use a Function Declaration. That's fine. Slavish
adherance to rules is dangerous and often results in tortuous code.
Much more important is that you understand the concepts so that you can
make your own informed decisions. I hope this article helps in that
regard.
Comments are very welcome. Please let me know if you feel anything I've said is incorrect or if you have something to add.
See also ECMA-262 5th Edition sections 10.5, 12.2, 13.0, 13.2
|