1

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'); }
Brad Mace
  • 27,194
  • 17
  • 102
  • 148
Andy Hin
  • 30,345
  • 42
  • 99
  • 142
  • 2
    If you would have just typed the title of your question into the StackOverflow search box, you would have gotten many answers, like this one: http://stackoverflow.com/questions/5403121/whats-the-difference-between-function-foo-and-foo-function – user113716 Jun 23 '11 at 02:41
  • There is only one declaration above, the rest are assignments of function expressions. – RobG Jun 23 '11 at 05:25
  • `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. – cwallenpoole Jun 23 '11 at 05:53

4 Answers4

4

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):

  1. Function A()...
  2. undefined
  3. Function A()...
  4. Function B()...
Tremmors
  • 2,906
  • 17
  • 13
Simon Buchan
  • 12,707
  • 2
  • 48
  • 55
  • 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. – nnnnnn Jun 23 '11 at 02:42
  • @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;` – Simon Buchan Jun 23 '11 at 02:49
  • 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. – nnnnnn Jun 23 '11 at 02:54
  • -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. – RobG Jun 23 '11 at 05:31
  • @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. – Simon Buchan Jun 23 '11 at 06:09
0

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.

JasonG
  • 922
  • 6
  • 8
0

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.

RobG
  • 142,382
  • 31
  • 172
  • 209
-1

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...

Benny Tjia
  • 4,853
  • 10
  • 39
  • 48
  • 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. – Tremmors Jun 23 '11 at 02:21