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?
The main difference between a function expression and a function declaration is the function name, which can be omitted in function expressions to create anonymous functions. A function expression can be used as an IIFE (Immediately Invoked Function Expression) which runs as soon as it is defined.
A function declaration tells the compiler about a function's name, return type, and parameters. A function definition provides the actual body of the function.
The function in function declaration can be accessed before and after the function definition. The function in function declaration can be accessed only after the function definition. 5. Function declarations are hoisted. Function expressions are not hoisted.
Use a function expression when:you need a more flexible function. you need a function that isn't hoisted. the function should only used when it is defined. the function is anonymous, or doesn't need a name for later use.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With