The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value.
const map1 = new Map();
map1.set('a', 1);
map1.set('b', 2);
map1.set('c', 3);
console.log(map1.get('a'));
// Expected output: 1
map1.set('a', 97);
console.log(map1.get('a'));
// Expected output: 97
console.log(map1.size);
// Expected output: 3
map1.delete('b');
console.log(map1.size);
// Expected output: 2
Map objects are collections of key-value pairs. A key in the Map may only occur once. It is unique in the Map's collection. A Map object is iterated by key-value pairs — a for... of loop returns a 2-member array of [key, value] for each iteration. Iteration happens in insertion order, which corresponds to the order in which each key-value pair was first inserted into the map by the set() method (that is, there wasn't a key with the same value already in the map when set() was called).
The specification requires maps to be implemented "that, on average, provide access times that are sub-linear on the number of elements in the collection". Therefore, it could be represented internally as a hash table (with O(1) lookup), a search tree (with O(log(N)) lookup), or any other data structure, as long as the complexity is better than O(N).
Key equality
Objects vs Maps
| Map | Object | |
|---|---|---|
| Accidental Keys | A Map does not contain any keys by default. It only contains what is explicitly put into it. | An Object has a prototype, so it contains default keys that could collide with your own keys if you're not careful. |
| Note: This can be bypassed by using Object.create(null), but this is seldom done. | ||
| Security | A Map is safe to use with user-provided keys and values. | Setting user-provided key-value pairs on an Object may allow an attacker to override the object's prototype, which can lead to object injection attacks . Like the accidental keys issue, this can also be mitigated by using a null-prototype object. |
| Key Types | A Map's keys can be any value (including functions, objects, or any primitive). | The keys of an Object must be either a String or a Symbol. |
| Key Order | The keys in Map are ordered in a simple, straightforward way: A Map object iterates entries, keys, and values in the order of entry insertion. | Although the keys of an ordinary Object are ordered now, this was not always the case, and the order is complex. As a result, it's best not to rely on property order. |
| The order was first defined for own properties only in ECMAScript 2015; ECMAScript 2020 defines order for inherited properties as well. But note that no single mechanism iterates all of an object's properties; the various mechanisms each include different subsets of properties. (for-in includes only enumerable string-keyed properties; Object.keys includes only own, enumerable, string-keyed properties; Object.getOwnPropertyNames includes own, string-keyed properties even if non-enumerable; Object.getOwnPropertySymbols does the same for just Symbol-keyed properties, etc.) | ||
| Size | The number of items in a Map is easily retrieved from its size property. | Determining the number of items in an Object is more roundabout and less efficient. A common way to do it is through the length of the array returned from Object.keys(). |
| Iteration | A Map is an iterable, so it can be directly iterated. | Object does not implement an iteration protocol, and so objects are not directly iterable using the JavaScript for...of statement (by default). |
| Note: | ||
| • An object can implement the iteration protocol, or you can get an iterable for an object using Object.keys or Object.entries. | ||
| • The for...in statement allows you to iterate over the enumerable properties of an object. | ||
| Performance | Performs better in scenarios involving frequent additions and removals of key-value pairs. | Not optimized for frequent additions and removals of key-value pairs. |
| Serialization and parsing | No native support for serialization or parsing. | |
| (But you can build your own serialization and parsing support for Map by using JSON.stringify() with its replacer argument, and by using JSON.parse() with its reviver argument. See the Stack Overflow question How do you JSON.stringify an ES6 Map?). | Native support for serialization from Object to JSON, using JSON.stringify(). | |
| Native support for parsing from JSON to Object, using JSON.parse(). |
Setting object properties
const wrongMap = new Map();
wrongMap["bla"] = "blaa";
wrongMap["bla2"] = "blaaa2";
console.log(wrongMap); // Map { bla: 'blaa', bla2: 'blaaa2' }
/*
--------------------------------------------------------
But that way of setting a property does not interact with the Map data structure. It uses the feature of the generic object. The value of 'bla' is not stored in the Map for queries. Other operations on the data fail
--------------------------------------------------------
*/
wrongMap.has("bla"); // false
wrongMap.delete("bla"); // false
console.log(wrongMap); // Map { bla: 'blaa', bla2: 'blaaa2' }
const contacts = new Map();
contacts.set("Jessie", { phone: "213-555-1234", address: "123 N 1st Ave" });
contacts.has("Jessie"); // true
contacts.get("Hilary"); // undefined
contacts.set("Hilary", { phone: "617-555-4321", address: "321 S 2nd St" });
contacts.get("Jessie"); // {phone: "213-555-1234", address: "123 N 1st Ave"}
contacts.delete("Raymond"); // false
contacts.delete("Jessie"); // true
console.log(contacts.size); // 1