Google Chrome: JavaScript associative arrays, evaluated out of sequence
- by Jerry
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:
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"]
};
The order of the key/value pairs is intentional, as I'm turning the object into an HTML select box such as this:
<select id="ddl_sw" name="ddl_sw">
<option value="">== SELECT WEEK ==</option>
<option value="200911">11 / 2009 (Fiscal 2009)</option>
<option value="200910">10 / 2009 (Fiscal 2009)</option>
<option value="200909">09 / 2009 (Fiscal 2009)</option>
<option value="200908">08 / 2009 (Fiscal 2009)</option>
<option value="200907">07 / 2009 (Fiscal 2009)</option>
<option value="200906">06 / 2009 (Fiscal 2009)</option>
<option value="200905">05 / 2009 (Fiscal 2009)</option>
<option value="200904">04 / 2009 (Fiscal 2009)</option>
<option value="200903">03 / 2009 (Fiscal 2009)</option>
<option value="200902">02 / 2009 (Fiscal 2009)</option>
<option value="200901">01 / 2009 (Fiscal 2009)</option>
<option value="200852">52 / 2008 (Fiscal 2009)</option>
<option value="200851">51 / 2008 (Fiscal 2009)</option>
</select>
...with code that looks like this (snipped from a function):
var arr = [];
arr.push(
"<select id=\"ddl_sw\" name=\"ddl_sw\">" +
"<option value=\"\">== SELECT WEEK ==</option>"
);
for(var key in salesWeeks)
{
arr.push(
"<option value=\"" + key + "\">" +
salesWeeks[key][0] + " (" + salesWeeks[key][1] + ")" +
"<\/option>"
);
}
arr.push("<\/select>");
return arr.join("");
This all works fine in IE, FireFox and Opera.
However in Chrome, the order comes out all weird:
<select id="ddl_sw" name="ddl_sw">
<option value="">== SELECT WEEK ==</option>
<option value="200852">52 / 2008 (Fiscal 2009)</option>
<option value="200908">08 / 2009 (Fiscal 2009)</option>
<option value="200906">06 / 2009 (Fiscal 2009)</option>
<option value="200902">02 / 2009 (Fiscal 2009)</option>
<option value="200907">07 / 2009 (Fiscal 2009)</option>
<option value="200904">04 / 2009 (Fiscal 2009)</option>
<option value="200909">09 / 2009 (Fiscal 2009)</option>
<option value="200903">03 / 2009 (Fiscal 2009)</option>
<option value="200905">05 / 2009 (Fiscal 2009)</option>
<option value="200901">01 / 2009 (Fiscal 2009)</option>
<option value="200910">10 / 2009 (Fiscal 2009)</option>
<option value="200911">11 / 2009 (Fiscal 2009)</option>
<option value="200851">51 / 2008 (Fiscal 2009)</option>
</select>
NOTE: This order, though weird, does not change on subsequent refreshes. It's always in this order.
So, what is Chrome doing? Some optimization in how it processes the loop?
In the first place, am I wrong to rely on the order that the key/value pairs are declared in any associative array?
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?
Any insight would be awesome.
Thanks.
