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