Map in JavaScript
To work with complex data structures like arrays and objects, it is common to use Map and Set.
Map is a collection designed to store data of any type in the form of key-value pairs.
Each value is stored with a unique key, which is then used to access that value. Keys themselves can also be of any type.
Map Methods and Properties
new Map()› creates a collectionmap.set(key, value)› stores the value with the keymap.get(key)› returns the value by the key orundefinedif the key is not presentmap.has(key)› returnstrueif the key exists, otherwisefalsemap.delete(key)› removes an element (key-value pair) by keymap.clear()› clears the collection of all elementsmap.size› returns the current number of elements
Example Usage
let map = new Map();
map.set("1", "string1");
// string as a key
map.set(1, "number1");
// number as a key
map.set(true, "boolean1");
// boolean as a key
// Unlike Object, Map preserves the type of keys
console.log(map.get(1));
// "number1"
console.log(map.get("1"));
// "string1"
console.log(map.size);
// 3
As we can see, unlike objects, keys in Map are not converted to strings. This allows any data type to be used as a key.
Using
map[key]is not the correct way to work with Map. Whilemap[key]might work (e.g., settingmap[key] = 2), it treatsmapas a plain object, which brings all associated limitations (keys become strings, etc.).
Therefore, for working with Map, special methods like set, get, and others should be used.
Using Objects as Keys in Map
let john = { name: "John" };
// store visit count for each user
let visitsCountMap = new Map();
visitsCountMap.set(john, 123);
console.log(visitsCountMap.get(john));
// 123
Using objects as keys is one of the most notable and powerful features of Map. This is not possible with regular objects. In objects, keys can only be strings or symbols.
Example of object used as key in plain object:
let john = { name: "John" };
let ben = { name: "Ben" };
let visitsCountObj = {};
visitsCountObj[ben] = 234;
visitsCountObj[john] = 123;
console.log(visitsCountObj["[object Object]"]);
// 123
Because visitsCountObj is a regular object, it converts all object-type keys like john and ben to the same string "[object Object]". Obviously, that’s not what we want.
