JS Map Methods

JavaScript Map Methods and Properties

To manipulate data inside a JavaScript Map, you cannot use standard object notation (like map.key = "value"). Instead, JavaScript provides a dedicated set of built-in Map Methods to safely set, get, delete, and iterate through key-value pairs.

1. Setting and Getting Values

set(key, value)

The set() method adds a new key-value pair to the Map. If the key already exists, it updates the value of that key.

const myMap = new Map();

// Add values of different types
myMap.set("name", "Akash");  // String key
myMap.set(100, "Number Key"); // Number key
myMap.set(true, "Boolean Key"); // Boolean key
console.log(myMap);

Pro Tip (Chaining): Every map.set() call returns the map itself. This means you can "chain" multiple set operations together: myMap.set("a", 1).set("b", 2).set("c", 3);

get(key)

The get() method returns the value associated with a specific key. If the key does not exist in the Map, it returns undefined.

const fruits = new Map([
  ["apples", 500],
  ["bananas", 300]
]);

console.log(fruits.get("apples"));  // Outputs: 500
console.log(fruits.get("oranges")); // Outputs: undefined

2. Checking, Sizing, and Deleting

has(key)

The has() method returns true if a key exists in the Map, and false if it does not.

delete(key)

The delete() method removes a specific key-value pair from the Map. It returns true if an element existed and was removed, or false if the element did not exist.

const cars = new Map([
  ["Ford", 20000],
  ["Tesla", 50000]
]);

// Check if key exists
console.log(cars.has("Tesla")); // true
// Delete a key
cars.delete("Ford");
console.log(cars.has("Ford"));  // false

The size Property

The size property returns the total number of elements currently stored in a Map. (Note: this is a property, not a function, so you do not use parentheses).

clear()

The clear() method completely empties the Map, removing every single key-value pair.

const numbers = new Map([ ["one", 1], ["two", 2], ["three", 3] ]);

console.log(numbers.size); // Outputs: 3
numbers.clear(); // Empty the map
console.log(numbers.size); // Outputs: 0

3. Iterating Over JavaScript Maps

Because Maps are iterable, JavaScript provides several clean and intuitive ways to loop through them. Remember that Maps iterate elements in the exact order they were inserted!

Using forEach()

The forEach() method calls a provided callback function once for each key-value pair in the Map.

const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

fruits.forEach((value, key) => {
  console.log(${key} cost $${value});
});

The entries(), keys(), and values() Methods

Maps also provide three specific methods that return an Iterator object. These are perfect for use in for...of loops:

• keys(): Returns an iterable of all the keys.
• values(): Returns an iterable of all the values.
• entries(): Returns an iterable of [key, value] arrays.

const fruits = new Map([
  ["apples", 500],
  ["bananas", 300]
]);

// 1. Loop through keys
for (let key of fruits.keys()) {
  console.log("Key:", key);
}
// 2. Loop through values
for (let value of fruits.values()) {
  console.log("Value:", value);
}
// 3. Loop through entries (key-value arrays)
for (let [key, value] of fruits.entries()) {
  console.log(key, "=>", value);
}

(Note: Because entries() is the default iterator for Maps, doing for (let x of fruits) is exactly the same as doing for (let x of fruits.entries())!)