Solution

The answer to the problem is "hoisting".

When you declare a variable within a function using let the declaration is automatically moved to the start of the function - i.e. it is hoisted to the top.

You can write Javascript for years without ever running into problems with hoisting or even being aware that it is going on - but when you blunder into it as in our example it can seem very strange.

Notice that hoisting only moves the declaration of the variable and not any initialisation. With hoisting taken into account our function reads more like:

function test()
{
 var i;
 alert(i);
 for(i=0;i<10;i++)
 {
  alert(i);     
 }
}

Now it is perfectly clear why i is undefined.

The local variable i has been declared at the start of the function as the result of hoisting so hiding the global variable i which isn't initialised until the for loop starts.

Now it is perfectly obvious why i is reported as undefined.

Notice that the declaring of the variable in the for loop is quite irrelevant to the the problem which would have happened no matter how i was declared. This is all a matter of where i is declared not how.

Notice that if you declare the variable using let then you get a different sort of potential problem. The let declaration is hoisted to the top of the block that it is declared in but it isn't initalized to undefined like a var declared variable. Instead from the start of the block to the point where is is finally declared it is said to be in a temporal dead zone or TDZ. This means that any attempt to use it will generate a ReferenceError rather than an undefined error. When the declaration is reached either the variable is also initialized when everything just works or it isn't when any attempt to use it generates and undefined error.

So to hoist or not to hoist - does it really matter as long as you know what is going on.

Pattern

The pattern that you need to follow to make sure that hoisting never causes you any problem is simple:

always declare, and if appropriate initialize, all of the variables that a function uses at the start of the function.

Following this pattern makes any hoisting explicit.

• Ian Elliot is the author of Just JavaScript: An Idiomatic Approach; JavaScript Async and  JavaScript Bitmap Graphics with Canvas. All these titles are part of the I Programmer Library published by I/O Press.

<ASIN:1871962579>

<ASIN:1871962560>

<ASIN:1871962625>

More Puzzles

<ASIN:059680279X>

<ASIN:0470526912>

<ASIN:1590597273>

<ASIN:0596806752>