title: Google Chrome: JavaScript associative arrays, evaluated out of sequence
body: <p>Ok, so on a web page, I've got a JavaScript object which I'm using as an associative array. This exists statically in a script block when the page loads:</p>
  
  <pre><code>var salesWeeks = {
      "200911" : ["11 / 2009", "Fiscal 2009"],
      "200910" : ["10 / 2009", "Fiscal 2009"],
      "200909" : ["09 / 2009", "Fiscal 2009"],
      "200908" : ["08 / 2009", "Fiscal 2009"],
      "200907" : ["07 / 2009", "Fiscal 2009"],
      "200906" : ["06 / 2009", "Fiscal 2009"],
      "200905" : ["05 / 2009", "Fiscal 2009"],
      "200904" : ["04 / 2009", "Fiscal 2009"],
      "200903" : ["03 / 2009", "Fiscal 2009"],
      "200902" : ["02 / 2009", "Fiscal 2009"],
      "200901" : ["01 / 2009", "Fiscal 2009"],
      "200852" : ["52 / 2008", "Fiscal 2009"],
      "200851" : ["51 / 2008", "Fiscal 2009"]
  };
  </code></pre>
  
  <p>The order of the key/value pairs is intentional, as I'm turning the object into an HTML select box such as this:</p>
  
  <pre><code>&lt;select id="ddl_sw" name="ddl_sw"&gt;
  &lt;option value=""&gt;== SELECT WEEK ==&lt;/option&gt;
  &lt;option value="200911"&gt;11 / 2009 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200910"&gt;10 / 2009 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200909"&gt;09 / 2009 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200908"&gt;08 / 2009 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200907"&gt;07 / 2009 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200906"&gt;06 / 2009 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200905"&gt;05 / 2009 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200904"&gt;04 / 2009 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200903"&gt;03 / 2009 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200902"&gt;02 / 2009 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200901"&gt;01 / 2009 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200852"&gt;52 / 2008 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200851"&gt;51 / 2008 (Fiscal 2009)&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>...with code that looks like this (snipped from a function):</p>
  
  <pre><code>var arr = [];
  arr.push(
      "&lt;select id=\"ddl_sw\" name=\"ddl_sw\"&gt;" +
      "&lt;option value=\"\"&gt;== SELECT WEEK ==&lt;/option&gt;"
  );
  
  for(var key in salesWeeks)
  {
      arr.push(
          "&lt;option value=\"" + key + "\"&gt;" +
          salesWeeks[key][0] + " (" + salesWeeks[key][1] + ")" +
          "&lt;\/option&gt;"
      );
  }
  
  arr.push("&lt;\/select&gt;");
  
  return arr.join("");
  </code></pre>
  
  <p>This all works fine in IE, FireFox and Opera.</p>
  
  <p>However in Chrome, the order comes out all weird:</p>
  
  <pre><code>&lt;select id="ddl_sw" name="ddl_sw"&gt;
  &lt;option value=""&gt;== SELECT WEEK ==&lt;/option&gt;
  &lt;option value="200852"&gt;52 / 2008 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200908"&gt;08 / 2009 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200906"&gt;06 / 2009 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200902"&gt;02 / 2009 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200907"&gt;07 / 2009 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200904"&gt;04 / 2009 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200909"&gt;09 / 2009 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200903"&gt;03 / 2009 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200905"&gt;05 / 2009 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200901"&gt;01 / 2009 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200910"&gt;10 / 2009 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200911"&gt;11 / 2009 (Fiscal 2009)&lt;/option&gt;
  &lt;option value="200851"&gt;51 / 2008 (Fiscal 2009)&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>NOTE: This order, though weird, does not change on subsequent refreshes. It's always in this order.</p>
  
  <p>So, what is Chrome doing? Some optimization in how it processes the loop?</p>
  
  <p>In the first place, am I wrong to rely on the order that the key/value pairs are declared in <em>any</em> associative array?</p>
  
  <p>I never questioned it before, I just assumed the order would hold because this technique has always worked for me in the other browsers. But I suppose I've never seen it stated anywhere that the order is guaranteed. Maybe it's not?</p>
  
  <p>Any insight would be awesome.
  Thanks.</p>