Function decaration in Javascript [duplicate]

Question

Possible Duplicate:
What is the difference between a function expression vs declaration in Javascript?

Is there a MAJOR difference between declaring functions in these ways:

```
function foo(){ alert('BAR'); } 
```
```
var foo = function (){ alert('BAR'); } 
```

var foo = function bar(){ alert('BAR'); }

I was told here that:

It happens at a different time, and results in a variable referring to an anonymous function. A function declaration happens prior to any stepwise code executing in the scope, and results in both a binding and a function with a proper name.

Can the way I declare my function really affect the efficiency of my code, and if so which way is best to use?

Did you do any research on this matter before asking it? The web is full of explanations about this. — Angel
– Angel, Commented Jun 14, 2012 at 15:14
In a nutshell, named function expressions are useful for one thing only — descriptive function names in debuggers and profilers. Well, there is also a possibility of using function names for recursion, but you will soon see that this is often impractical nowadays. If you don’t care about debugging experience, you have nothing to worry about. kangax.github.com/nfe. — Justin Blank
– Justin Blank, Commented Jun 14, 2012 at 15:18
The downvotes on the question seem very harsh to me. (The close votes make sense.) — T.J. Crowder
– T.J. Crowder, Commented Jun 14, 2012 at 15:22

T.J. Crowder · Accepted Answer · 2012-06-14 15:40:27Z

Yes, there is a major difference.

The first is a function declaration. It happens upon entry to an execution context, prior to any step-by-step code being processed. It cannot be within any kind of control block (e.g., it's not legal in the body of an if statement; however, most browsers will try to accommodate it if you do that — sometimes resulting in very surprising behavior — at variance with the spec). It results in a named function.

The second is a function expression (specifically, an anonymous function expression). Like all expressions, it's processed when it's encountered in the step-by-step execution of the code. And like all expressions, it can be within a control block. It results in a function with no name assigned to a variable that has a name.

The third is a named function expression. It's a function expression like the above, but the function is also given a name. You want to avoid these with IE8 and earlier, since IE will actually get it quite wrong, creating two separate functions (at two different times). (Basically, IE treats it as both a function declaration and a function expression.) IE9 finally gets this right.

Note that your second and third examples rely on automatic semicolon insertion; because those are both assignment statements, they should end with a ; (after the ending } of the function).

Browsers do allow function declarations within blocks in non-strict mode, but only because they have non-standard extensions to handle it.
@TimDown: Not all do. Firefox's SpiderMonkey engine doesn't, for instance. Not even in relatively straightforward situations where if they were stepwise code, they'd always run (like a try block with no preceding branching).
@TimDown But does spidermonkey? I don't have firefox 3.x or whatever to test
@Tim: Just tried it with Firefox 13, and it allowed it: jsbin.com/atusib And I happened to have Firefox 3.6.15 lying around in a Windows VM, and it allowed it too! Very, very surprised by that, as I distinctly recall work I did about a year ago failing only in FF because I'd blindly wrapped the contents of a function in a try..catch and hadn't noticed it had a declaration within it. And it wasn't strict code, either (the project in question didn't use it). I wonder what was different...

Collectives™ on Stack Overflow

Function decaration in Javascript [duplicate]

1 Answer 1

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Linked

Related