OK, this is driving me crazy:

First example, no problem:

<script>

window.myvar = 150;

if (false) {
  var myvar = 3;
}

// This will popup "150"
alert(myvar)

</script>

Now, with TWO script elements:

<script>

window.myvar = 150;

</script>

<script>

if (false) {
  var myvar = 3;
}

// This will popup "undefined"
alert(myvar)

</script>

Tested with IE8.

Have you any idea why?

OK, this is driving me crazy:

First example, no problem:

<script>

window.myvar = 150;

if (false) {
  var myvar = 3;
}

// This will popup "150"
alert(myvar)

</script>

Now, with TWO script elements:

<script>

window.myvar = 150;

</script>

<script>

if (false) {
  var myvar = 3;
}

// This will popup "undefined"
alert(myvar)

</script>

Tested with IE8.

Have you any idea why?

• javascript
• internet-explorer

• Can you please test if the code at tinypaste./49c80 shows the same error as above, so I can answer your question? I can't test because I'm not using my Windows box at the moment. Ad@m – kirb Commented Jul 5, 2011 at 11:06
• I wish I had IE8 to test right now. Sounds like myvar's definition is being hoisted and shadowing the property of window. – alex Commented Jul 5, 2011 at 11:14
• @adam that code tests OK in IE7/8, it alerts 100 – clairesuzy Commented Jul 5, 2011 at 11:29
• adam, nope. That does not exploit the bug/feature. – Claudio Commented Jul 5, 2011 at 11:30
• I see... So it must be something to do with the if(false){} block, because I didn't add it in the code above. Ad@m – kirb Commented Jul 5, 2011 at 11:38

5 Answers 5

Inside the second example, in your second script block, myvar has been hoisted (as per the spec) to the top of the containing scope. Remember JavaScript does not have block scope, only function scope.

Therefore, var myvar (the hoisted definition that is interpreted) is going to lead to myvar being undefined when the alert() looks up myvar on the VariableObject.

That's because since javascript does scope based on function levels, your code putes/piles/equivalent to the following:

<script>

window.myvar = 150;

</script>

<script>
var myvar;

if (false) {
  myvar = 3;
}

// This will popup "undefined"
alert(myvar)

</script>

There's a bit more too it than Alex said (even though he just referenced my article - thanks!).

If the code sequence was in the sequence it appears, "var myVar" would not get hoisted (or rather its hoisting would have no effect) because "window.myvar = 150" is defined first (moreover this wouldn't explain why the first example worked and the second one only failed in IE)

It looks like the second script is (somehow) loading before the first one - but only in IE8. You can simulate switching the tag sequence and you will see undefined alert in all browsers

var myvar;

if (false) {
  myvar = 3;
}

alert(myvar)

window.myvar = 150;

This doesn't happen to me in iOS Safari on 4.3.1, so it might be a bug in IE. However, @alex's answer may also be true as well. Ad@m

I am for hoisting, as alex said. The piler sees that you define myvar in your block (var myvar inside if) and hoists the previously known myvar. I am not sure, whether it is bug or feature, though.