← Back to Chapters

JavaScript Maps and Map Methods

?️ JavaScript Maps and Map Methods

⚡ Quick Overview

A Map in JavaScript is a collection of key–value pairs, similar to an object, but with some powerful differences.

  • Keys can be any data type (objects, functions, numbers, etc.), not just strings or symbols.
  • Maps remember the insertion order of keys.
  • They provide a rich set of methods like set(), get(), has(), delete(), clear(), forEach(), keys(), values(), and entries().

? Great for dynamic key–value data

? Key Concepts

  • Map Object: A special data structure for storing key–value pairs.
  • Flexible Keys: Any value can be a key, including primitives and objects.
  • Size: map.size gives the number of entries in the Map.
  • Iteration: Maps are directly iterable, providing keys, values, and entries in insertion order.
  • Use Case: Prefer Map over plain objects when keys are dynamic or you frequently add/remove entries.

? Syntax and Theory

? Creating a Map with new Map()

Use the new Map() constructor to create an empty Map or from an array of key–value pairs.

? View Creation Example 
const myMap = new Map();

myMap.set("name", "John");
myMap.set("age", 30);

console.log(myMap);
? View Initialization with Entries 
const fruits = new Map([
["apple", 500],
["banana", 300],
["orange", 200]
]);

? Adding or Updating with set()

The set(key, value) method adds a new entry or updates an existing key with a new value.

? View set() Example 
fruits.set("grape", 150);

? Reading Values with get()

The get(key) method returns the value associated with a given key.

? View get() Example 
console.log(fruits.get("banana")); // Output: 300

❓ Checking Keys with has()

The has(key) method returns true if the key exists in the Map, otherwise false.

? View has() Example 
console.log(fruits.has("apple")); // true

?️ Removing Entries with delete()

The delete(key) method removes the entry with the given key and returns true if successful.

? View delete() Example 
fruits.delete("orange");

? Clearing All Entries with clear()

The clear() method removes all entries from the Map.

? View clear() Example 
fruits.clear();

? Looping with forEach()

The forEach() method executes a callback for each key–value pair in the Map.

? View forEach() Example 
fruits.forEach((value, key) => {
console.log(key + " = " + value);
});

?️ Getting All Keys with keys()

The keys() method returns an iterator over all keys in insertion order.

? View keys() Example 
for (let key of fruits.keys()) {
console.log(key);
}

? Getting All Values with values()

The values() method returns an iterator over all values.

? View values() Example 
for (let val of fruits.values()) {
console.log(val);
}

? Getting Key–Value Pairs with entries()

The entries() method returns an iterator with [key, value] pairs.

? View entries() Example 
for (let entry of fruits.entries()) {
console.log(entry);
}

? Live Output and Explanation

? View Combined Map Example 
const fruits = new Map([
["apple", 500],
["banana", 300],
["orange", 200]
]);

fruits.set("grape", 150);

console.log("banana =", fruits.get("banana"));
console.log("has apple?", fruits.has("apple"));

fruits.delete("orange");

fruits.forEach((value, key) => {
console.log(key + " = " + value);
});

? What This Code Does

  • Creates a fruits Map with three entries.
  • Adds a new entry for "grape" with quantity 150.
  • Reads the value of "banana" using get().
  • Checks if "apple" exists using has().
  • Deletes the "orange" entry with delete().
  • Uses forEach() to log all remaining key–value pairs.

The final iteration prints something like:

apple = 500
banana = 300
grape = 150

This confirms that "orange" was removed and that the Map maintained the insertion order of keys.

? Tips and Best Practices

  • Remember that Maps maintain insertion order of keys, which is useful for ordered data.
  • Use Maps when you need non-string keys or frequently add/remove key–value pairs.
  • Prefer map.set() and map.get() instead of object-style map.key access.
  • Use map.clear() to empty a Map instead of reassigning it to {}.
  • Combine keys(), values(), and entries() with for...of loops for clean, readable iteration.

? Practice Tasks

  • Create a Map of student names and their grades (e.g., "Alice" → 95).
  • Use set() to add at least 4 students, then use get() to retrieve one student’s grade.
  • Loop through:
    • All keys using keys()
    • All values using values()
    • All entries using entries()
  • Use has() to check if a particular student exists in the Map.
  • Use delete() to remove one student and confirm removal with has().
  • Use clear() to empty the Map and log map.size to verify.