CODEWITHSUNDEEP
javascript
Andy Hin
Andy Hin

Reputation: 31883

Difference between Javascript function declarations

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'); }

Upvotes: 1

Views: 1013

Answers (4)

RobG
RobG

Reputation: 147363

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.

Upvotes: 0

Simon Buchan
Simon Buchan

Reputation: 13245

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

Upvotes: 4

JasonG
JasonG

Reputation: 922

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.

Upvotes: 0

Benny Tjia
Benny Tjia

Reputation: 4883

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

Upvotes: -1

Related Questions