JavaScript Map Methods
A Map in JavaScript provides a set of built-in methods for manipulating key-value pairs. Maps maintain insertion order, allow keys of any type, and provide easy iteration.
1. Creating a Map
Using new Map()
You can create a Map by passing an array of [key, value] pairs:
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
2. Adding and Updating Entries: set()
Adds a new key-value pair or updates an existing key:
const fruits = new Map();
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("apples", 600); // Updates value
Returns the Map itself (supports chaining):
fruits.set("oranges", 200).set("kiwi", 150);
3. Accessing Values: get()
Returns the value associated with a key:
console.log(fruits.get("apples")); // 600
console.log(fruits.get("kiwi")); // 150
console.log(fruits.get("mango")); // undefined
4. Checking Existence: has()
Checks if a key exists in the Map:
console.log(fruits.has("bananas")); // true
console.log(fruits.has("mango")); // false
5. Removing Entries: delete()
Removes a specific key-value pair:
fruits.delete("oranges");
console.log(fruits.has("oranges")); // false
6. Clearing All Entries: clear()
Removes all entries from the Map:
fruits.clear();
console.log(fruits.size); // 0
7. Size of the Map: size
Returns the number of key-value pairs:
console.log(fruits.size); // e.g., 3
8. Iterating Over a Map
Iterating Over a Map: Looping through a Map's key-value pairs, keys, or values using methods like .forEach(), .entries(), .keys(), .values(), or a for...of loop.
a. for...of with entries()
for (const [key, value] of fruits.entries()) {
console.log(key, value);
}
b. forEach() Method
fruits.forEach((value, key) => {
console.log(key, value);
});
c. keys() / values()
for (const key of fruits.keys()) console.log(key);
for (const value of fruits.values()) console.log(value);
d. Example: Sum of Values
let total = 0;
for (const value of fruits.values()) {
total += value;
}
console.log(total);
9. Objects as Keys
Unlike plain objects, Maps can use objects as keys:
const apples = { name: 'Apples' };
const bananas = { name: 'Bananas' };
const fruits = new Map();
fruits.set(apples, 500);
fruits.set(bananas, 300);
console.log(fruits.get(apples)); // 500
console.log(fruits.get("apples")); // undefined
10. ES2024: Map.groupBy()
Groups elements based on a callback function:
const fruitsArr = [
{ name: "apples", quantity: 300 },
{ name: "bananas", quantity: 500 },
{ name: "oranges", quantity: 200 },
{ name: "kiwi", quantity: 150 }
];
function myCallback({ quantity }) {
return quantity > 200 ? "ok" : "low";
}
const grouped = Map.groupBy(fruitsArr, myCallback);
console.log(grouped);
/*
Map(2) {
"ok" => [{name:"apples", quantity:300}, {name:"bananas", quantity:500}],
"low" => [{name:"oranges", quantity:200}, {name:"kiwi", quantity:150}]
}
*/
Summary Table of Map Methods
| Method / Property | Description |
|---|---|
new Map() | Creates a new Map |
set(key, value) | Add/update entry |
get(key) | Retrieve value |
has(key) | Check key existence |
delete(key) | Remove entry |
clear() | Remove all entries |
size | Number of entries |
entries() | Returns iterator of [key, value] |
keys() | Returns iterator of keys |
values() | Returns iterator of values |
forEach() | Iterate with callback |
Map.groupBy() (ES2024) | Groups elements by callback function |