Declaring the same variable name in a loop

Question

Which usage of var is correct:

$( 'li' ).each( function()
{
    var item = $( this );

    // ...
});

or

var item;

$( 'li').each( function()
{
    item = $( this );

    // ...
});

Both work fine, even having 'use strict'. Is there any fundamental difference between these two?

Thank you.

both are correct, with the 2nd approach `item` would be accessible outside the loop(that's the difference) — Dr.Molle, Jul 08 '14 at 12:41
@raina77ow: No, it's not a `for` loop but `each` with callbacks. — Bergi, Jul 08 '14 at 12:46

score 2 · Answer 1 · answered Jul 08 '14 at 12:43

It depends on the result you want. In the first case, the variable is declared inside a function, which means it is unique to each iteration/function invocation and not accessible outside the loop/function.

The second case allows you to access the variable outside the function/loop, where it will contain the value of the last iteration.

score 0 · Answer 2 · answered Jul 08 '14 at 12:43

Optimizations like this, in the long run, probably do not matter.

Please checkout out the JSPerf below:

http://jsperf.com/declaring-variables-inside-loops/4 http://jsperf.com/declaring-variables-inside-loops/11

Seems there is still a debate going on :P

score 0 · Answer 3 · answered Jul 08 '14 at 12:44

If it were a "normal loop" (ie. for) then your first block of code would be technically incorrect (at least from a human-readability, least-surprise standpoint).

But because you have a jQuery iteration function with a callback, there is actually a difference. That difference being that the last value of item will be accessible outside the loop in the second block of code, but in the first block it will be kept inside the closure.

score 0 · Answer 4 · answered Jul 08 '14 at 12:55

There is.

Since in JavaScript variables are function-scoped, in first case variable will exist only inside anonymous function, declared in iterator, and will be allocated on each run, each time it will be a new variable.

In second case function is bounded to some outer scope, and it will be exactly the same variable on each iteration, preserving value, stored on previous execution

Words "allocated on each iteration" can sound frightening, but basically it's not a problem, JS engines like V8 can easily perform optimisation, which will reduce overhead to 0. I'd say it's a recommended way of declaring variables - bound them to the tightest reasonable scope.

Speaking about second case - since no things would be broken, it's generally a bad design practice since some garbage old-stored value can leak to some other context, variable can be caught by some unexpected closure on continuation, etc.. Use local variables as really local.

Declaring the same variable name in a loop

4 Answers4