Let's Discover the JavaScript Map Keyed Collection
10 February, 2023
9
9
1
Contributors
What is Map?ā
It is an object that holds key-value pairs and remembers the original insertion order of the keys. It is similar to Object with the main difference being that Map allows keys of any type.
Map vs Object - key typeā
The Map can have any key types including functions, objects or any primitive while an Object must be a string or symbol
const map = new Map();
map.set("a", "this is string");
map.set(1, "this is number");
map.set(true, "this is boolean");
const object = {};
object.a = "this is string";
object[1] = "this is number";
object.true = "this is boolean";
console.log(map);
console.log(object);
let's use typeof to check the key type.
map.forEach((_, key) => {
console.log(`key value: ${key} | type: ${typeof key}`);
});
Object.keys(object).map((key) => {
console.log(`key value: ${key} | type: ${typeof key}`);
});
Map vs Object - Performance and Supportā
According to the MDN docs, Map offers better performance while the object is not optimized.
At this moment, Map is supported in all major browsers based on caniuse.com.
Methodsā
Let's say you have character data that you need to add to Map object.
const characters = [
{ id: 1, name: "The Doctor", age: 900 },
{ id: 2, name: "Rose Tyler", age: 26 },
{ id: 3, name: "Martha Jones", age: 27 },
{ id: 4, name: "Donna Noble", age: 31 },
{ id: 5, name: "Amy Pond", age: 26 },
];
const map = new Map();
set(key, value)ā
This method is to add or update an element with a key and a value.
for (const character of characters) {
map.set(character.id, character);
}
// or
characters.forEach((character) => {
map.set(character.id, character);
});
has(key)ā
This method will find out if the key exists in the Map object by returning a boolean value.
const checkForRose = map.has(2);
console.log("Is Rose existed in the map? ", checkForRose);
const checkForSomething = map.has(7);
console.log("Is something existed in the map? ", checkForSomething);
get(key)ā
This method will return the character based on the key. If the key doesn't exist in the Map object, it will return undefined
const getMartha = map.get(3);
console.log("Martha Information: ", getMartha);
const getSomething = map.get(7);
console.log("There is no key value of 7: ", getSomething);
delete(key)ā
This method removes the specified element from a Map with the key value. If the key doesn't exist, it will return false
const sorryMartha = map.delete(3);
console.log("Deleting Martha Information: ", sorryMartha);
const deleteSomething = map.delete(7);
console.log("Deleting something that doesn't exist: ", deleteSomething);
This method removes all elements from a Map object.
console.log(map);
map.clear();
console.log(map);
sizeā
This is similar to array.length and will return the total number of elements in a Map object.
const checkMapSize = map.size;
console.log("The size of characters data: ", checkMapSize);
// The size of characters data: 5
Iteration over Mapā
There are 3 ways to iteration over Map: keys(), values(), and entries()
keys()ā
This method returns keys for each element in the Map object in the insertion order.
const keys = map.keys();
console.log(keys);
values()ā
This method will return each element value.
const values = map.values();
console.log(values);
entries()ā
This method will return the [key, value] pairs of each element.
const entries = map.entries();
console.log("entries", entries);
Recapā
Map and object are very similar data structures since both of them store key-value pairs. However, one main difference is that the key value in Map can be any type while the key value in the object must be a string or symbol. The Map offers methods like get(), has() and more to perform create, read, update, and delete operations. Also, three methods such as key() to iterate over the Map object.
If you are curious about the performance between Map and object, Zhenghao explains this in their blog (3rd link in the resources). In short, Map is faster than the object, unless small integer and is more memory-efficient. Additionally, MDN docs also mentioned that Map is optimized for the frequent adding and removing of elements while the object is not optimized.
Resourcesā
Thank you!ā
Thank you for your time and for reading this!
Originally published at victoriacheng15.vercel.app
javascript