Declaring var inside Javascript for loop declaration

Question

I'm sure I've read a discussion on SO about this but can't find it. Simply, are there cons to declaring a for loop's increment inside the loop's declaration? What is the difference between this:

function foo() {
    for (var i=0; i<7; i++) {
        // code
    }
}

...and this:

function foo() {
    var i;
    for (i=0; i<7; i++) {
        // code
    }
}

Since JS has function scope, either should be fine, right? Are there edge cases where the former approach would cause problems?

If they are identical, why is Crockford/JSLint all, "No way dawg," about it?

Possible duplicate of [JavaScript variables declare outside or inside loop?](http://stackoverflow.com/questions/3684923/javascript-variables-declare-outside-or-inside-loop) — K Scandrett, Mar 14 '17 at 01:38

score 14 · Accepted Answer · edited Feb 13 '17 at 17:21

These are exactly the same. All local variables in javascript have function scope which means they are alive for the entire function they are declared in. This is often counter intuitive at first as most curly brace languages scope the life time of the variable to the block they are declared in.

A portion of Javascript developers very much prefer the second form. The rationale is that since all variables have function scope, you should declare them at the function level to make the life time explicit even for those not familiar with Javascript. This is just a style though and by no means a hard rule

EDIT

Note that with the introduction of ES6 let, you can now use let inside your loop for real block-scoped variable more details

for(let i = 1; i <= 5; i++) {
   setTimeout(function(){
       console.log('Value of i : ' + i);
   },100);
}

There is also `let` which is similar to `var` in that it also gives a local scope, but it differs in that it receives block scope. It is not accessible outside of a `for`/`if`/`while` etc. — 4castle, May 12 '16 at 00:37

Mark Reed · Answer 2 · 2017-02-24T16:36:28.020

The problem with declaring with var in the loop header is that it's deceptive. It looks like you're declaring a variable whose scope is limited to the for loop, when it actually exists everywhere within the function - including before the declaration:

var i = 1;
function foo() {
   console.log(i);                     // 'undefined'
   for (var i=1; i<100; ++i) {
   }
}

Even though the console.log call occurs before the declaration of the local i, it is still in scope for it because it's inside the same function. So the local i, which has not yet had any value assigned to it, is what gets passed to log. This can be surprising; it's certainly not obvious to anyone who's not familiar with Javascript scoping rules.

Starting with ECMAScript 2015, there is a better way to declare variables: let. Variables declared with let are local to the block containing them, not the entire function. So this version of the above code will print 1 as intended:

let i=1; // could use var here; no practical difference at outermost scope
function foo() {
  console.log(i);               // 1
  for (let i=1; i<100; ++i) {
  }
}

So best practice in modern Javascript is to declare variables with let instead of var. However, if you are stuck with a pre-ECMAScript 2015 implementation, it's a little less confusing to declare all variables at the top of the function, rather than waiting till first use.

So as long as you're familiar with Js's handling of scope, then all's well. — Benjamin Allison, Apr 18 '12 at 00:22
Thanks for the reminder, @SartherisStormhammer. Updated to address the availability of `let` in the modern language. — Mark Reed, Feb 24 '17 at 16:36

score 1 · Answer 3 · answered Apr 18 '12 at 00:20

There's no difference, but I prefer the second way (per Crockford) because it explicitly shows that the variable to available outside of the for loop:

function() {
    for(var i=0; i<7; i++) {
        // code
    }

    // i is still in scope here and has value 7
}

score 0 · Answer 4 · answered Apr 18 '12 at 00:15

0

Those are both exactly the same thing.

answered Apr 18 '12 at 00:15

Rob

12,659
4
39
56

Not a very helpful answer; the question is, given that they are functionally equivalent, why the rule in JSLint? JSLint is astonishingly picky about a wide variety of things, whose importance to you may vary widely, but there is method to its madness. – Mark Reed Apr 18 '12 at 00:22
1

Lol it means something... maybe not much but for a noob like me it helps to establish good habits. – Benjamin Allison Apr 18 '12 at 00:29
@Rob: feel free to ignore it, but the OP specifically asked why it flagged this behavior. Your disdain for the software doesn't mean they don't deserve an answer to the question. – Mark Reed Apr 18 '12 at 00:32
1

JSLint can be helpful but it is overly opinionated and too many people seem to think that if you don't pass jslint validation then your code sucks. – Rob Apr 18 '12 at 00:33

score 0 · Answer 5 · answered Oct 27 '14 at 20:55

The two code block are identical. The first statement of the for loop is executed before the for loop starts, the loop is running while the second statement is true, and the third statement is run every time the loop iterates once.

This means that

for(var i = 0; i < 8; i++) {
    //some Code
}

is identical to

var i = 0;
for(;i < 8;) {
    //some Code
    i++;
}

(The semicolon following the ( is to tell the computer that i < 8 is actually the second statement, not the first).

Declaring var inside Javascript for loop declaration

5 Answers5

Linked