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 orundefined
if the key is not presentmap.has(key)
› returnstrue
if the key exists, otherwisefalse
map.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 treatsmap
as 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.