Ben – Page 43 – ben lowery

window.baz vs var baz. A subtle oddity.

While trucking away at $work, Jim pointed out a subtle nasty edge case in how JavaScript and the browser interact. Let’s say you have the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>shared var</title>
    <script type="text/javascript">
      var foo = "awesome";
      bar = "bartastic";
      window.baz = "bazzoom";
    </script>
    <script type="text/javascript">
      if(!window.foo) var foo = "not awesome";
      if(!window.bar) var bar = "not bartastic";
      if(!window.baz) var baz = "not bazzoom";
    </script>
  </head>
  <body>
    <p>Foo is <script type="text/javascript">document.write(foo);</script></p>
    <p>Bar is <script type="text/javascript">document.write(bar);</script></p>
    <p>Baz is <script type="text/javascript">document.write(baz);</script></p>
  </body>
</html>

I think most folks would expect the output to be:

Foo is awesome

Bar is bartastic

Baz is bazzoom

and it is on Firefox, Safari and Opera, but on IE you get:

Foo is awesome

Bar is bartastic

Baz is not bazzoom

Care to guess why?

Hairy Faces

Rise