15

The difference b/w function declaration & function expression is beautifully described in var functionName = function() {} vs function functionName() {}
In this it's mentioned that function declaration is evaluated during parse-time, & function expression is evaluated in the execution-phase

In bytes.com it's mentioned that function declaration is faster than function expression.

I created a basic test case for this: http://jsperf.com/function-declaration-vs-function-expression

Function Declaration:

function myfunc() {
 alert("yo");
}
myfunc();

Function Expression:

var myfunc = function() {
 alert("yo");
}
myfunc();

The test showed that function expression is 90% slower than function declaration.

Why such a difference in speed?

Edit:
From the results in http://jsperf.com/function-declaration-vs-function-expression

In Chrome, IE9, Opera & Safari -> Function Declaration is faster than Function Expression

In Firefox, IE7, IE8 -> Function Expression is faster than Function Declaration

In IE9 Function declaration is faster, whereas in IE 7 & 8 function expression is faster. Is it because of change in JavaScript engine in IE9, or was this move intentional?

Community
  • 1
  • 1
Anish
  • 1,164
  • 4
  • 15
  • 27
  • 3
    What browser or javascript engine are you using? – Daniel A. White Mar 25 '11 at 14:37
  • Its actually faster in firefox. – Daniel A. White Mar 25 '11 at 14:38
  • 3
    Those results are pretty interesting, while it is 90% slower in Chrome & Opera, it's actually faster in FF. I'd say that it doesn't matter too much though, because if you are declaring enough functions that this becomes an issue, you are doing something wrong. – idbentley Mar 25 '11 at 14:40
  • @idbentley _"if you are declaring enough functions that this becomes an issue, you are doing something wrong"_. A case like http://jsperf.com/function-declaration-vs-function-expression-2 is very common in codes nowadays right? Yes, there are many other important stuffs to be considered while optimizing. But shouldn't this also be considered? – Anish Mar 25 '11 at 15:33
  • Sure, doing some like that is common, but doing it enough times that it will have a noticeable effect on performance is unlikely. It is for example nothing compared to doing an AJAX request, or a DOM manipulation. My statement before intended to say that doing a large number of function declarations (enough to cause performance effects) is a code smell, and you should consider refactoring. – idbentley Mar 25 '11 at 17:42
  • There appears to be some serious flaws in the posted test. Testing [*4 different methods of creating functions*](http://jsperf.com/function-creation-tests) reveals that the created functions all run at about the same speed. – RobG Jul 21 '14 at 01:01

2 Answers2

3

Firefox also has non-standard Function Statements, which makes it possible to conditionally choose between function declarations (per spec, you can't). Just using an example of Juriy "kangax" Zaytsev:

if (true) {
    function foo(){ return 1; }
} else {
    function foo(){ return 2; }
}
foo(); // 1
// Note that other clients interpet `foo` as function declaration here, 
// overwriting first `foo` with the second one, and producing "2", not "1" as a result

So those are compiled at execution time, instead of in the parse-phase:

Function statements are NOT declared during variable instantiation. They are declared at run time, just like function expressions.

Other browsers probably will pre-compile function declarations, making them perform faster at run time, but Firefox has to interpret function declarations at run time, causing not much difference between the speed of function declarations and function expressions in Gecko-based browsers.

Marcel Korpel
  • 21,536
  • 6
  • 60
  • 80
  • _"Firefox has to interpret function declarations at run time"_ That's bad. is it fixed in the new versions? – Anish Mar 25 '11 at 15:37
  • @Anish: Fixed? It's a [feature](https://developer.mozilla.org/en/JavaScript/Reference/Statements/function): "JavaScript 1.5, NES 6.0: Added conditional function declarations (Netscape extension)". That said, the team is working to make the JS engine as fast as possible. – Marcel Korpel Mar 25 '11 at 16:08
  • From _kangax's article_ I understand that Firefox interprets function declarations at run time only if they're a part of function statement. When function declarations are defined normally, I guess they're defined during parse time? – Anish Apr 01 '11 at 06:30
  • @Anish: You must be right, as function statements are only declared at run time, but I can still use function declarations at the bottom of my script, which means there *must* be a functional difference between the two. I must have been trapped by the syntax. Thanks for pointing this out! – Marcel Korpel Apr 01 '11 at 09:17
1

This has to be a browser dependent issue. Some browsers may compile the javascript differently if it's an expression rather than a declaration and some might treat them exactly the same.

Mike Park
  • 10,845
  • 2
  • 34
  • 50