Treasured Maps

Javascript objects are wonderful things. So wonderful that they’re the basis of the ever popular JSON. But there are some things they won’t do. One of the big ones is that they are slightly limited in what can be used as a key. Mind you, they are fairly flexible as these things go. When I was learning to program, all we had was C where you can only put non-negative integers between the square braces. (You could put negative numbers in there too, but that was primarily for hacking and generating bugs).

Then along came languages like Python where arrays and structures were replaced with lists and dictionaries, where the key could be any number or string. When Javascript was created, it went with a similar notation and similar semantics, but instead of 'dictionary' or 'hash', it called them Objects.

So far so good. Much more flexible than arrays or structs, I quickly learned to love JavaScript Objects. Plus, they’re dynamic things. You can easily add fields or extend them by just assigning values to specific keys (obj.newfield = ” That’s easy”). Then one day I had a brilliant idea; DOM elements (like almost everything else in JavaScript) are basically just Objects, and I often run into a situation where I want to associate something (simple data or a more complex Object) with that element. Since it’s so easy to add things to Objects, I could just add stuff to the DOM element Object. Well, of course I wasn’t the first person to think of this and after using it on a few small projects I discovered it was a bad idea, and was generally considered bad form.

What to do, what to do. Well, I could do a quick hack like creating an object like this:


    {
	domAssociatedInfo: [{
	    element: 
	    info: 
        },
	...
	]
    }

but this is neither pretty nor efficient, as I’d have to search through an array to find the right match. I could use a systematic way of assigning ids to the DOM elements of interest and use the ids (which are strings) as keys for an Object:

    domAssociatedInfo[e.id] = <info to associate>;
    // assuming e is the DOM element of interest.

Well, that’s not too bad, but you’re relying on systemizing your `id`, which could be complicated. Also, you might have some other ways you want to name your id’s which may not work with the same systematic approach.

Fortunately with ES6 you don’t need to solve that problem anymore. This version of Javascript has introduced the Map object.

When you first look at a Map, it seems redundant. After all, it’s just a mapping of a key and value pair, much like an Object. But of course the key difference (pun intended) is that the key can be not just a string but any object, making it easy to solve the problem above. I’ll get into more details about Map later, but for now these three lines of code illustrate the basics:

    var x = new Map(); // Create a new Map object

    x.set(obj, “my object”); // Create and assign field “obj"

    x.get(obj) // returns string “my object”

Be sure to give it a try. It worked in all the desktop browsers I tried. I’m not sure how many mobile browsers support it, but it does work in mobile apps built by the Intel XDK with Crosswalk.

Para obter informações mais completas sobre otimizações do compilador, consulte nosso aviso de otimização.