title: On mixing `this`, array notation and the module pattern in IE8
body: <p>My "single page app" is built with code in multiple files, using the "loose augmented module" <a href="http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html#loose_augmentation" rel="nofollow">pattern described by Ben Cherry</a>. Here are two stripped back examples of modules. </p>
  
  <p>Some "data" in one module: </p>
  
  <pre><code>var application = (function ( App ){
      App.usesvar = {
          one: 'one',
          two: 'two',
          three: 'three'
      }
      return App;
  }( application || {} ));
  </code></pre>
  
  <p>A "master" module that represents the app in total and initialises the application:</p>
  
  <pre><code>// the 'master' module
  var application = (function ( App ){
      console.log( 'Using `var` (should log "three"): ' + App.usesvar.three );
  
      return App;
  }( application || {} ));
  </code></pre>
  
  <p>These work as expected. The data is imported to the page first and the master module can access it and prints out the expected values.</p>
  
  <p>A part of my app can't be built this way. Instead some JavaScript is generated by a build step and it's output is like this:</p>
  
  <pre><code>this["application"] = this["application"] || {};
  this["application"]["usesthis"] = this["application"]["usesthis"] || {};
  this["application"]["usesthis"]["one"] = 'uno';
  this["application"]["usesthis"]["two"] = 'dos';
  this["application"]["usesthis"]["three"] = 'tres';
  </code></pre>
  
  <p>Notice it's trying to use the same <code>application</code> namespace as the earlier code and as such, <code>usesthis</code> should be visible to the "master" module, just like <code>usesvar</code> from the first snippet.</p>
  
  <p>Adding <code>console.log( 'Using `this` (should log "tres"): ' + App.usesthis.three );</code> to the "master" module logs what you would expect in Chrome, Safari Firefox (recent), and IE10. In IE8 (I've not tested IE9 yet), it doesn't. In IE8, the "master" module, doesn't have access to properties declared using the `this['namespace']['property'] notation.</p>
  
  <p>In the examples, please assume the files are loaded in the right order. The actual application also imports the files in the right order. If the example JavaScript is written into an HTML file's <code>&lt;script&gt;&lt;/script&gt;</code> tags, rather than imported, the problem still occurs.</p>
  
  <p>Disclosure: the <code>this['foo']['bar']</code> notation is generated by the <a href="http://handlebarsjs.com/" rel="nofollow">Handlebars.js</a> pre-compiler, so I don't have as much control over the style of its output. It's a battle-tested bit of code so I'd expect it should work in IE8 and play nice with most other code. My gut feeling is this is not a Handlebars problem, but a scoping issue around the `var foo = (function bar(){}()); pattern.</p>