Question

This is my code:

function func(){
 for(i=0; i < 5; i++){
   alert('g');
 }
}

for(i=0; i < 5; i++){
  func();
  alert('h');
}

What I expected was: gggghgggghgggghgggghggggh

but what received was just ggggh

I found out that’s because there is function scope, not block scope in JS. What I’d like to know is how to preserve such a behavior. I mean to force something like block scope. Otherwise it’s very easy to make really nasty bugs – e.g. while using a function somebody else wrote or the one you wrote yourself, but a few months earlier.

Answer 1

This actually doesn’t have to do with function vs. block scope – it has to do with implicit global variables.

The short story: You are accidentally creating a global variable in your for loop – if you use for(var i=0; rather than for(i=0; you’ll get the expected results.

The slightly longer version:

alert("typeof i: " + typeof i);
// Alerts "typeof i: undefined"    
function func() {
  // References the *global* variable `i`
  for(i=0; i < 5; i++){
    alert('g');
  }
}

// Creates a *global* variable `i` and sets it to 0
for(i=0; i < 5; i++) {
   alert("i at start of iteration: " + i);
   // Alerts "i at start of iteration: 0"
   func();
   // `func` has just altered *global* state - here's the proof
   alert("i after call to func: " + i);
   // Alerts "i at start of iteration: 5"
   alert('h');
}
alert("typeof i: " + typeof i);
// Alerts "typeof i: number
// `i` is now in the global scope.

// Left as an exercise for the reader:
// try it again with `var i=0;` in both of the `for` loops.