Question

My Task

In my JavaScript code i’m often using objects to "map" keys to values so i can later access them directly through a certain value. For example:

var helloMap = {};
helloMap.de = "Hallo";
helloMap["en"] = "Hello";
helloMap.es = "Hola";

So i build up the map object step by step in my source code using the two available notations object style and array style.

Later i can then access the values i added through helloMap["de"] for example. So thats all fine if i don’t have to care about the order in which the attributes has been set on the object.

If i want to iterate the objects properties now as far as i know there is no way to ensure that i’ll iterate them in the order they have been added (insertion order).

Note: I can’t use some wrapper object and simply hold a array in there and then use its methods to add the values so something like this:

var HelloMap = function(){
  this.myMap = [];
  this.addProperty = function(key, value){
    this.myMap.push({key: key, value: value});
  }
}

or something similar won’t work for me. So the solution needs to be absolutely transparent to the programmer using the object.

That said the object i needed would be an empty object which maintains the order of the properties that were added to it. Something like this would do:

var helloMap = {};
helloMap = getOrderAwareObject(helloMap);

so that every further assignment of the form helloMap.xy = "foo" and helloMap["yz"] = "bar" would be tracked in the object "in order",

Possible Solutions

Since i did not find any solution in underscore or jQuery giving me such a special object i came across the possibility of defining getters and setters for properties in JavaScript objects with Object.defineProperty since i can rely on ECMAScript 5 standard i can use it.

The Problem with this one is, that you have to know all the possible properties that can be set on the object, before they are actually set. Since if you define it you got to name it.

What i am searching for is something like a Default Getter and Default Setter which applies on the object if no getter and setter has been defined for the property. So i could then hide the sorted map behind the object inteface.

• Is there already a solution for this in any framework you know?
• Is there a mechanism like "default getter/setter" ?

Answer 1

You’ll need a wrapper of some kind using an array internally, I’m afraid. ECMAScript 5 (which is the standard on which current browser JavaScript implementations are based) simply doesn’t allow for ordered object properties.

However, ECMAScript 6 will have a Map implementation that has ordered properties. See also http://www.nczonline.net/blog/2012/10/09/ecmascript-6-collections-part-2-maps/.

There may also be other options in ECMAScript 6. See the following question:

How can I define a default getter and setter using ECMAScript 5?