3

Scenario 1:

console.time("loop");
for (var i = 0; i < 1000000; i += 1){
  // Do nothing
}
console.timeEnd("loop");

Ran in Chrome's console, this will return apx 450ms or so.

Scenario 2:

function test() {
  console.time("loop");
  for (var i = 0; i < 1000000; i += 1){
    // Do nothing
  }
  console.timeEnd("loop");
}
test();

Run this code is Chrome's console and it's usually < 1ms. I get this function example from an article on Node interview questions. I understand that the loop outside of the function will have i resolve to a window object whereas the same loop inside the function scopes i locally - hence the performance increase.

My question is, would it be good practice to put your loops into functions where possible? That kind of performance increase is tempting, but it seems weird to always have loops in functions as I've not seen code looking like that.

The Qodesmith
  • 3,205
  • 4
  • 32
  • 45
  • 3
    You should have as little global code as possible anyway. Most JS code is already inside a function. – Felix Kling Jul 22 '15 at 18:29
  • 1
    When would you have a loop outside of a function? – howderek Jul 22 '15 at 18:29
  • 2
    I think you are completely misunderstanding where the performance gain is coming from. Scenario 1 *does* something, Scenario 2 *does nothing* (because `i` isn't returned). So they aren't the same thing. If you have a loop that actually *does something* it won't make a difference if it's in a loop or not. – Matt Burland Jul 22 '15 at 18:29
  • 1
    Actually, in an ideal world you are always running all of your javascript code inside of a function. This solves issues you might have with namespacing. – shieldstroy Jul 22 '15 at 18:30
  • Here are three resources about anonymous, self-executing functions and why it's good to use them: http://markdalgleish.com/2011/03/self-executing-anonymous-functions/ http://esbueno.noahstokes.com/post/77292606977/self-executing-anonymous-functions-or-how-to-write http://stackoverflow.com/questions/592396/what-is-the-purpose-of-a-self-executing-function-in-javascript – shieldstroy Jul 22 '15 at 18:31
  • @MattBurland, huh? They both do the same thing. Are you saying that because the function doesn't return anything those lines of code aren't actually run?? – shieldstroy Jul 22 '15 at 18:32
  • 1
    Thank you guys for the comments. Yea, most of the time the loops are part of functions anyway, so I guess it's not a big concern. – The Qodesmith Jul 22 '15 at 18:32
  • 1
    @MattBurland Hey Matt. Both scenario's do the same thing. A loop is run inside of which nothing is executed for each iteration, but the loop itself is still run. `i` is declared on each iteration, so in the global scope, the global object is accessed (written to) each iteration. Since the global object has a ton of other properties, therein lies the performance hit. – The Qodesmith Jul 22 '15 at 18:35
  • 1
    @shieldstroy: In 1, at the end `i == 1000000`, in 2 `i == undefined`. `i` is a global variable in 1 which has to be updated 1000000 times. That is something the function doesn't have to do. It can be optimized by the browser. – Matt Burland Jul 22 '15 at 18:36
  • @TheQodesmith: `i` is not global in the second example, that's the difference. – Matt Burland Jul 22 '15 at 18:37
  • @MattBurland Yup, that I understand. Thank you. – The Qodesmith Jul 22 '15 at 18:38
  • 2
    just strong of V8 optimization... – vp_arth Jul 22 '15 at 18:39
  • 1
    And more to the point, if you are comparing two pieces of code to decide which is faster then those two pieces of code *should do the same thing* or else there is no point comparing them. Use the one that does what you wanted it to do and not the one that doesn't do it, but doesn't do it faster. – Matt Burland Jul 22 '15 at 18:40
  • 1
    So if the function returned i at the end of the loop and OP set var i = test(), then it would take the exact same amount of time? The issue he's describing is that the browser has to set i 1000000 times on the global scope if it's not in a function. They both 'do the same thing' but one has an unintended side effect. – shieldstroy Jul 22 '15 at 18:43
  • `in function/not in function` why not just remove `var` in "function" loop? – vp_arth Jul 22 '15 at 18:44
  • @vp_arth Removing the var would result in a global variable regardless if declared inside a function. – The Qodesmith Jul 22 '15 at 18:46
  • 1
    Exactly, so issue not about wrapping loops in functions, but about using global(big scope) variables as iteration var... – vp_arth Jul 22 '15 at 18:48
  • @shieldstroy: `They both 'do the same thing' but one has an unintended side effect.` if one has a side effect then they don't, by definition, *do the same thing*. – Matt Burland Jul 22 '15 at 19:06
  • @MattBurland, which is entirely the point of his question. – shieldstroy Jul 22 '15 at 20:58

1 Answers1

-1

The answer is that it's good practice to put all of your code into functions. You should write very little code on the global scope.

While this might come with a performance increase as you've apparently pointed out, the reason to do this is because it stops you from putting properties on the window that may result in name conflicts with other libraries.

So, yes, it's good practice, but not just for this reason.

http://markdalgleish.com/2011/03/self-executing-anonymous-functions/

http://esbueno.noahstokes.com/post/77292606977/self-executing-anonymous-functions-or-how-to-write

What is the purpose of a self executing function in javascript?

Community
  • 1
  • 1
shieldstroy
  • 1,307
  • 1
  • 10
  • 24