Friday, March 30, 2012

javascript object keys being sorted in some browsers

Keywords:
javascript object associative array map keys sorted ordered chrome safari webkit

Problem:
Is it the case that some browsers - WebKit, and possibly IE9 - are sorting the keys javascript objects (aka "associative-arrays", aka "maps")?

Trying the following code (note the integer keys as strings is intentional):
    var x = new Object;
    x["3"]="C";
    x["2"]="B";
    x["1"]="A";
    JSON.stringify(x);

Or as a 1-line snippet you can paste in a (modern) browser address bar:
    javascript:var x = new Object;x["3"]="C";x["2"]="B";x["1"]="A";JSON.stringify(x);

You'll get the following in Firefox:
{"3":"C","2":"B","1":"A"}

In Chrome you'll get:
{"1":"A","2":"B","3":"C"}

Is this a bug? Can you not expect the order the keys are added to be preserved?

Solution:
The short answer is no (though more appropriately but rude would be "why would you!?").

A translation in terms that a Java programmer may understand is think of the javascript object as a java.util.HashMap despite the fact it behaves a bit like a java.util.LinkedHashMap in Firefox and like a java.util.TreeMap in WebKit.

Don't code based on any expectation of the key order - which may need some thought if dealing with JSON representations of objects where there is an implicit order in the objects in "stringify-ied" form.

Some thoughts on how to maintain an order are here - How to keep an Javascript object/array ordered.