Google Chrome: JavaScript associative arrays, evaluated out of sequence

Question

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.

Answer 1

Think of an associative array as a paper sack into which all the key-value pairs are placed. As you reach your hand into the sack to look at the pairs (such as with the for...in loop), the order that you encounter them is for all practical purposes random.

If you want to see them in a specific order, you'll need to extract the keys into an array and sort it. Then walk across the array, using the keys you encounter to index into the associative array.

Answer 2

The order in which elements are stored in an associative array is not guaranteed. You'll have to sort your output explicitly.

Answer 3

As the other answers say, the order in which an object's properties are iterated is not defined in the spec, even though the major browsers all iterate them in the defined order.

Chrome will enumerate them in order too, if all of the object's properties contain primitive values. John Resig gives more detail on Chrome's behavior here (under "for loop order"): http://ejohn.org/blog/javascript-in-chrome/

Answer 4

As pointed out Chrome's behaviour is perfectly valid.

This is a good case of where some OO thinking can help. Do you really want an associative array or just a list of objects?

var salesWeeks = [
    ["200911", "11 / 2009", "Fiscal 2009"],
    ...
]
...
for(var key in salesWeeks)
{
    arr.push(
        "<option value=\"" + salesWeeks[key][0] + "\">" +
        salesWeeks[key][1] + " (" + salesWeeks[key][2] + ")" +
        "<\/option>"
    );
}

would serve you better I think (to those that advocated some form of sort, the order is already defined - why do you want to do extra work?)

Answer 5

@curtainDog: NO! NO! Using “for .. in” with Array objects in JavaScript is bad - the entire point of most of the the responses here is that “for .. in” does not guarantee any order. Moreover, “for .. in” will grab properties from an object’s constructor’s prototype and will not iterate over nonexistent keys.

@Samnan: The spec simply says that iteration order is not guaranteed; this means that browsers are free to iterate in sorted order, in order of insertion, in random order, or however else they may. It’s just like a hash table - think of it as random, even if it happens to come out in some apparent order.

I’m fairly sure most browsers look for “for..in” with Array objects and iterate in numeric order so that things don’t break; however, it’s not really doing what most people who use it that way think it’s doing, and it should be avoided unless you specifically need object-type iteration.

Answer 6

It's not a real good practice but...

If you add a space to the value chrome will not consider value a number and won't sort them by value.

Example:

<select>
  <option value=" 3">Third</option>
  <option value=" 1">First</option>
  <option value=" 2">Second</option>
</select>

The good side is that you have not to add and then remove alphabetic characters from ID like someone suggested (don't remember if in this or other post with similar question), you could easily trim it but most of the times the space is just ignored and if you post or get those to another file they will simply see the integer value not the space.

Answer 7

Contrary to all the other answers, it is CERTAINLY A BUG IN CHROME

The reason:

If the data structure is a paper sack like Barry said then:

The values should always be randimized. This is not the case in chrome

If the data structure is sequential then:

The values should be in the sequence in which they are added to the structure

While other browsers follow the second approach, chrome follows neither and there is still no explanation of what is the sorting order chrome makes up for the data structure while it is accessed.