What is the difference between the following two examples?
setInterval(myFunc, 100);
function myFunc() { alert('asdf'); }
setInterval(myFunc, 100);
var myFunc = function myFunc() { alert('asdf'); }
4 Answers
According to ECMA standard, the first example is a function statement while the second is a function expression. According to Javascript a function statement counts as a definition, which means in the first example it is visible through the entire function (or script if it's not in a function). But in the second example, var myFunc will not have the value of function myFunc until the second line, and therefore setInterval will be passed undefined.
The only syntax difference between function statements and expressions is that statements are not included in are larger expression: eg: (function foo() {}) is an expression, while function foo() {} is a statement.
NB: I believe old IE (pre 9?) treated all function expressions as definitions.
To expound on this answer, consider the following code:
<script language="javascript">
alert(A);
alert(B);
function A() {return "A value";}
var B = function B(){ return "B value";}
alert(A);
alert(B);
</script>
this will alert (in order):
- Function A()...
- undefined
- Function A()...
- Function B()...
answered Jun 23, 2011 at 2:15
5 Comments
nnnnnn
I expected the second example to fail on the
setInterval part, for the same reason you gave. But when I tried it (in IE) it worked. Even if the var myFunc part is hoisted above, doesn't the actual assignment happen inline there after the setInterval? I'm confused.
Simon Buchan
@nnnnnn: I think IE 9 standards mode fixed this, but checking up on this, it looks like IE has treated all function expressions as statements, so the second is equivalent to
function myFunc() {...} setInterval(...); var myFunc = myFunc;nnnnnn
thanks. I thought it might be a weird IE thing, but IE(7) was all I had access to for a quick test. And (d'oh) I just saw the "NB" about IE at the end of your post that somehow I missed on first reading.
RobG
-1 for calling a FunctionDeclaration and "function statement". There is no such thing as a "function statement" in ECMAScript. There is a FunctionDeclaration and FunctionExpression described in ECMA-262 §13.
Simon Buchan
@RobG: Uhh, thanks for the clarification, it makes it easier to look up, but is that really a -1? A definition is (a specific type of) a statement, after all.
Both samples are essentially doing the same thing. In the second example, you can also use a named function with a different name or an unnamed function.
var myFunc = function myOtherName() { alert('asdf'); }
or
var myFunc = function() { alert('asdf'); }
They are all the same.
Comments
In the first example:
> setInterval(myFunc, 100);
>
> function myFunc() { alert('asdf'); }
The function declaration is processed before any code is executed, so myFunc exists as a local parameter when setInterval is called.
The second example:
> setInterval(myFunc, 100);
>
> var myFunc = function myFunc() {
> alert('asdf'); }
works for exactly the same reason: myFunc is declared using var and therefore exists as a local variable when setInterval is called.
Edit
Ooops! It doesn't work. The value of myFunc is evaluated when setTimeout is called, and at that point myFunc hasn't bee assigned a value so an error results. Changing the value later doesn't affect the value held by setTimeout.
Finally, there is no such thing as a "function statement". ECMA-262 defines FunctionDeclaration and FunctionExpression in §13, there is no other kind of function.
Comments
in the first example, you actually assign a newly created variable "myFunc" with a function data type. So, "myFunc" is the name of the variable, and function is the data type. The first one is the same as this:
var myFunc = function(){alert('asdf');}
I have never seen anything like in the second example. I dont know if its even a valid way to declare a function...
answered Jun 23, 2011 at 2:10
1 Comment
Tremmors
I just tested it (in firefox) and the second example is a function mechanism of declaring a function. It seems to be declaring the function myFunc and then assigning a reference to that to the variable myFunc. But this is executing in line, whereas the first example declares the function before linear code execution begins.
var myFunc = function myFunc() { alert('asdf'); }=> create a variable named myFunc. No wait, create a function named myFunc. Now set the variable to = myFunc the function. Now get rid of the function.