Performance of function declaration vs function expressions in javascript in a loop

Question

In the following jsperf: http://jsperf.com/defined-function-vs-in-loop-function/3

You will notice that this code:

for (var i = 0; i < loops; i++) {
   function func(a, b) {
    return a + b;
  };
  func(i, i);
}

Performs on par with this code:

function declaredFn(a, b) {
    return a + b;
};


for (i = 0; i < loops; i++) {
    declaredFni, i);
}

But this code:

for (i = 0; i < loops; i++) {
  var func = function(a, b) {
    return a + b;
  };
  func(i, i);
}

is significantly slower then this code:

var expfunc = function(a, b) {
  return a + b;
};
for (i = 0; i < loops; i++) {  
  expfunc(i, i);
}

Why? What is happening internally?

Community · Accepted Answer · 2017-05-23 10:33:19Z

8

If you define a function using the function fn() {} declaration, it gets hoisted to the top. Therefore, this code:

for (var i = 0; i < loops; i++) {
   function func(a, b) {
    return a + b;
  };
  func(i, i);
}

is exactly equivalent to this code:

function declaredFn(a, b) { return a + b; };

for (i = 0; i < loops; i++) { declaredFn(i, i); }

because the function declaration gets hoisted to the top.

However, var fn = function() {} expressions do not get hoisted, so you end up defining the function all over on every single loop.

See this answer for more info.

edited May 23, 2017 at 10:33

CommunityBot

11 silver badge

answered Nov 2, 2014 at 22:32

soktinpk

3,8982 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

freakish Over a year ago

It seems to depend on the JS implementation. The test shows that for FireFox it is significantly slower then other versions.

Marcel Korpel Over a year ago

@freakish That's probably because Firefox supports a third type of function creation: function statements. They behave the same as function expressions, so they're created within the loop, not before.

delbertooo Over a year ago

But wouldn't your function statement be a function declaration on any system not supporting the function-statement-extension? In this case it would be a wrong place for a function definition since it's only allowed in Program- or FunctionBody-Level.

soktinpk Over a year ago

@delbertooo Yes that's true. It's wrong in theory but not in practice because most (some) browsers support it (unless you turn on strict mode -- if you turn on strict mode, then declaring a function in a loop using function fn(){} method will give a syntax error).

Tobi · Accepted Answer · 2014-11-02 22:35:17Z

0

In the snippet

for (i = 0; i < loops; i++) {
  var func = function(a, b) {
    return a + b;
  };
  func(i, i);
}

you are assigning a function to a variable, which will be available in the rest of the current scope. As you are doing this in a loop, the function is defined and assigned many times, therefore consuming more time than in the other cases you mentioned.

answered Nov 2, 2014 at 22:35

Tobi

2,0402 gold badges29 silver badges50 bronze badges

7 Comments

zerkms Over a year ago

"you are assigning a function to a variable" --- even if you remove assignment performance will stay the same

Tobi Over a year ago

I don't think (but didn't test it), that performance will stay exactly the same, but I guess you are right, that the function definition takes much longer.

zerkms Over a year ago

"I don't think (but didn't test it), that performance will stay exactly the same" --- well, try then

Tobi Over a year ago

Sry, didn't really think, when I wrote my last comment: If you remove the assignment, the function is declared only once, if you assign it to a variable, it's defined in every single loop. So it's substantially different code and performance does not stay the same.

zerkms Over a year ago

it's not an assignment that is slow since assignment is virtually free. Convert it to IIFE, there will be no assignment but it will be slow.

|

Collectives™ on Stack Overflow

Performance of function declaration vs function expressions in javascript in a loop

2 Answers 2

4 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related