CODEWITHSUNDEEP
javascriptvariablesfor-loopscope
Benjamin Allison
Benjamin Allison

Reputation: 2154

Declaring var inside Javascript for loop declaration

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?

Upvotes: 11

Views: 11216

Answers (5)

Mark Reed
Mark Reed

Reputation: 95242

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.

Upvotes: 8

JaredPar
JaredPar

Reputation: 754575

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);
}

Upvotes: 14

hyperneutrino
hyperneutrino

Reputation: 5425

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).

Upvotes: 0

Tuan
Tuan

Reputation: 5412

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
}

Upvotes: 1

Rob
Rob

Reputation: 12872

Those are both exactly the same thing.

Upvotes: 0

Related Questions