Why would assigning a function to a var be different than simply defining it?

Question

So I'm just about to add a new function to our every growing list of global ones (sigh) and noticed the last user used a variable assignment over simple function a(){}.

function aFunction(){
    return null;
}

var bFunction = function(){
    return null;
}

I created a test to see if it made a difference; It does, but a conflicting one. (chrome favours the simple function, while firefox the variable assignment).

Firefox: Function create (90+% slower) / Create with variable assignment (fastest)

Chrome: Function create (fastest) / Create with variable assignment (70+% slower)

I understand it's trivial but is there any reason for the discrepancy and is there a preferable way of doing this?

I can't answer your question, but I can tell you that a discrepancy here isn't surprising: function *expressions* (your second case) are handled differently from function *declarations* (your first case). Function declarations are [*hoisted* to the top of their lexical scope](http://elegantcode.com/2011/03/24/basic-javascript-part-12-function-hoisting/), so it's unsurprising that browsers handle the two things differently under the hood. — apsillers, May 28 '13 at 14:56
You can get a total different result after each browser update. So I would not worry about this. Ran a test at IE10 and variable assignment is 95% slower. — huysentruitw, May 28 '13 at 14:56
@apsillers a declaration sounds more relevant to the intention of the function (and it reads clearer?) so syntactically, I'll go with that. — Phil Cooper, May 28 '13 at 15:01
I remember reading at one point something on this regarding the parse phase vs the execution phase but don't have a ready reference at hand here. (first one, parse, second execution, hence a reference error/sequence of definition dependency) — Mark Schultheiss, May 28 '13 at 15:37
You're asking why one implementation performs differently than another? It's because they're different implementations! — , May 28 '13 at 16:08
...and why do you have lots of global functions? Why not use a single namespace to hold them? — , May 28 '13 at 16:09
@MarkSchultheiss: I've seen that answer too, and it made no sense. All code is parsed at the same time, and then executed at the same time, though perhaps in an order different from that which was defined. ...EDIT: Found it: http://stackoverflow.com/questions/336859/javascript-var-functionname-function-vs-function-functionname — , May 28 '13 at 16:10

score 1 · Accepted Answer · edited May 23 '17 at 12:05

1

One difference between the two is how they behave in the browser.

Defining the function in the first case will work no matter where in the code that it is called. In the second case, if you attempt to call it before it is defined an error will be thrown.

This answer explains in better detail: What is the difference between a function expression vs declaration in JavaScript?

So which way that is preferable would depend on use case.

As to difference in browser speed, I imagine that that is due to differences in how the browsers are parsing the javascript.

edited May 23 '17 at 12:05

Community

1
1

answered May 28 '13 at 15:07

Schleis

41,516
7
68
87

Damn, missed those questions when posting. Quoting the post: "function declarations loads before any code is executed. While function expressions loads only when the interpreter reaches that line of code." Seems I've hit one of those something-new-day moments. – Phil Cooper May 28 '13 at 17:48

Why would assigning a function to a var be different than simply defining it?

1 Answers1