Map vs Object in JavaScript
I just discovered chromestatus.com and, after losing several hours of my day, found this feature entry:
Map: Map objects are simple key/value maps.
That confused me. Regular JavaScript objects are dictionaries, so how is a Map different from a dictionary? Conceptually, they're identical (according to What is the difference between a map and a dictionary?)
The documentation chromestatus references doesn't help either:
Map objects are collections of key/value pairs where both the keys and values may be arbitrary ECMAScript language values. A distinct key value may only occur in one key/value pair within the Map’s collection. Distinct key values as discriminated using the a comparision algorithm that is selected when the Map is created.
A Map object can iterate its elements in insertion order. Map object must be implemented using either hash tables or other mechanisms that, on average, provide access times that are sublinear on the number of elements in the collection. The data structures used in this Map objects specification is only intended to describe the required observable semantics of Map objects. It is not intended to be a viable implementation model.
…still sounds like an object to me, so clearly I've missed something.
Why is JavaScript gaining a (well-supported) Map object? What does it do?
Answer
According to mozilla:
A Map object can iterate its elements in insertion order - a for..of loop will return an array of [key, value] for each iteration.
and
Objects are similar to Maps in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Because of this, Objects have been used as Maps historically; however, there are important differences between Objects and Maps that make using a Map better.
An Object has a prototype, so there are default keys in the map. However, this can be bypassed using map = Object.create(null). The keys of an Object are Strings, where they can be any value for a Map. You can get the size of a Map easily while you have to manually keep track of size for an Object.
Use maps over objects when keys are unknown until run time, and when all keys are the same type and all values are the same type.
Use objects when there is logic that operates on individual elements.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
The iterability-in-order is a feature that has long been wanted by developers, in part because it ensures the same performance in all browsers. So to me that's a big one.
The myMap.has(key) method will be especially handy, and also the myMap.size property.