Why can 'for (a of a)' iterate an array correctly?

Question

Consider the following code snippets

var a = [1, 2, 3, 4];
for (a of a) { // The first 'a' is made by mistake
    console.log(a);
}

The first a in the for loop is written by mistake. I think the above code should run error, because when a is assigned to 1 in the first iteration, then a is not iterable object. So an error should be thrown out in the next iteration.

Actually, the results are as following:

1
2
3
4

It seems the above code can iterate the array correctly. After the for loop, the result of a is 4. Why?

> a
4

For further investigation, I tried to find some information from ECMA-6 doc, but I am confused by the following statement.

for ( var ForBinding of AssignmentExpression ) Statement

for ( ForDeclaration of AssignmentExpression ) Statement

To understanding the ForBinding and ForDeclaration, test the following code.

var a = [1, 2, 3, 4];
for (var a of a) {
    console.log(a);
}
console.log(a);

Unfortunately, the result is the same as the previous codes. What is the difference between for (var a in a) and for (a in a)?

Answer 1

for evaluates value of "AssignmentExpression" and iterates over it. The value is obtained only once in the beginning of iteration, so reusing the same variable is perfectly valid (also quite confusing).

Presence of var: for (a of ...) and for (var a of ...) does not make any ¹ difference in code as you already have a defined - so it will just re-declare the same variable.

---

To be completely precise there are cases where behavior is different - when a is declared in outer scope for current function var version will shadow that value (as in JavaScript all var statements are hoisted to top of the function scope):

var a = [1,2,3];
function tryForVar()   {
   // Note that declaration of `a` is hoisted here as var a = undefined;
   // for (var a ... does not work as expected as local 'a' is undefined
   for (var a of a) { 
     console.log(a); // log 'undefined' once
   }
   console.log(a); // undefined 
} 
tryForVar();
console.log(a); // [1,2,3]

function tryFor()   {
   // Note that declaration of `a` from outer scope
   // for (a ... works fine as it uses outer 'a'
   for (a of a) { 
     console.log(a); // logs all 1,2,3 in sequence
   }
   console.log(a); // 3
} 
tryFor();
console.log(a); // 3