JavaScript Map Methods

JavaScript's Map object is a collection of key-value pairs where keys can be of any type. It offers various built-in methods to add, retrieve, delete, and iterate over entries efficiently. These methods provide more flexibility compared to plain objects and are especially useful for managing dynamic collections of data.

Here are some commonly used Map methods:

  • set(): Adds or updates an element with a specified key and value.
  • get(): Retrieves the value associated with a specified key.
  • has(): Returns a boolean indicating whether a key exists in the Map.
  • delete(): Removes the element associated with a specified key.
  • clear(): Removes all elements from the Map.
  • size: Returns the number of key-value pairs in the Map.
  • keys(): Returns a new iterator object that contains the keys of the Map.
  • values(): Returns a new iterator object that contains the values of the Map.
  • entries(): Returns a new iterator object that contains the [key, value] pairs of the Map.
  • forEach(): Executes a provided function once for each key-value pair in the Map.

Adding and Updating Elements in a Map

In JavaScript, the Map object allows you to store key-value pairs. You can easily add new entries or update existing ones using the set() method. If the key already exists, its value will be updated; if not, a new key-value pair is added.

  • set() – Adds a new key-value pair or updates the value for an existing key.

Example 1: Using set() to Add New Entries

The set() method is used to add new key-value pairs to a Map. It accepts two arguments: the key and the value.

javascript
const userRoles = new Map();
userRoles.set("Jack", "admin");
userRoles.set("Bob", "editor");
console.log(userRoles);

How It Works:

  • new Map(): Creates an empty Map instance.
  • set("Jack", "admin"): Adds a key "Jack" with value "admin".
  • set("Bob", "editor"): Adds another key-value pair.
  • console.log(userRoles): Displays the Map structure with all entries.

Output

Map(2) { 'Jack' => 'admin', 'Bob' => 'editor' }

Example 2: Using set() to Update Existing Entries

If the specified key already exists in the Map, set() updates its value. This makes it a convenient method for modifying data without needing separate logic to check for key existence.

javascript
const settings = new Map();
settings.set("theme", "light");
settings.set("theme", "dark"); // Update the existing key
console.log(settings);

How It Works:

  • settings: A Map object for storing configuration.
  • set("theme", "light"): Initially sets the theme.
  • set("theme", "dark"): Updates the value for the same key.
  • console.log(settings): Displays the updated Map with the new value.

Output

Map(1) { 'theme' => 'dark' }

Retrieving Values from a Map

To access a value in a Map, you use the get() method by providing the key associated with the value you want. If the key exists, get() returns the corresponding value. If it doesn’t exist, it returns undefined.

  • get() – Retrieves the value associated with a given key in the Map.

Example: Using get() to Retrieve a Value

In this example, we’ll create a Map of countries and their capitals, and then retrieve a capital using its country name as the key.

javascript
const capitals = new Map();
capitals.set("France", "Paris");
capitals.set("Japan", "Tokyo");

const capitalOfFrance = capitals.get("France");
console.log(capitalOfFrance);

How It Works:

  • capitals: A Map with country-capital pairs.
  • get("France"): Retrieves the value "Paris" associated with the key "France".
  • console.log(capitalOfFrance): Outputs the capital of France to the console.
  • If the key is not found, get() would return undefined.

Output

Paris

Checking for Keys in a Map

JavaScript Maps provide the has() method to check whether a specific key exists in a Map. This is useful when you need to verify the presence of a key before performing an operation like retrieval or update.

  • has() – Returns true if the Map contains the specified key; otherwise, false.

Example: Using has() to Check Key Existence

In this example, we’ll use a Map of usernames and roles. Before accessing or updating a role, we use has() to verify if the user exists in the Map.

javascript
const userRoles = new Map();
userRoles.set("Jack", "admin");
userRoles.set("Bob", "editor");

console.log(userRoles.has("Jack"));  // true
console.log(userRoles.has("Jane")); // false

How It Works:

  • userRoles: A Map containing user-role pairs.
  • has("Jack"): Returns true because "Jack" exists as a key in the Map.
  • has("Jane"): Returns false since there’s no such key.
  • The has() method is non-destructive; it does not alter the Map.

Output

true
false

Deleting and Clearing Elements in a Map

JavaScript Maps provide methods to remove individual entries or clear the entire collection. Use delete() to remove a specific key-value pair and clear() to remove all entries from the Map.

  • delete() – Removes the element associated with the specified key.
  • clear() – Removes all key-value pairs from the Map.

Example 1: Using delete() to Remove an Entry

The delete() method removes a key-value pair by key. It returns true if the key existed and was removed, or false if the key was not found.

javascript
const inventory = new Map();
inventory.set("apple", 10);
inventory.set("banana", 5);

const wasDeleted = inventory.delete("banana");
console.log(wasDeleted);
console.log(inventory);

How It Works:

  • inventory: A Map representing item stock.
  • delete("banana"): Removes the key "banana" from the Map.
  • wasDeleted: A boolean indicating if deletion was successful.
  • console.log(inventory): Displays the Map after deletion.

Output

true
Map(1) { 'apple' => 10 }

Example 2: Using clear() to Remove All Entries

The clear() method removes all key-value pairs from a Map, leaving it empty.

javascript
const cart = new Map();
cart.set("item1", 2);
cart.set("item2", 4);

cart.clear();
console.log(cart);

How It Works:

  • cart: A Map storing items and their quantities.
  • clear(): Removes all entries from the Map.
  • console.log(cart): Displays an empty Map.

Output

Map(0) {}

Iterating over Map (forEach, entries, keys, values)

JavaScript Map provides several methods to iterate over its contents. You can loop through keys, values, or both entries (key-value pairs). These methods make it easy to process or display the stored data.

  • forEach() – Executes a provided function once for each key-value pair.
  • entries() – Returns an iterator object with [key, value] pairs.
  • keys() – Returns an iterator object with all keys.
  • values() – Returns an iterator object with all values.

Example 1: Using forEach() to Iterate Over Map

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

javascript
const capitals = new Map();
capitals.set("France", "Paris");
capitals.set("Japan", "Tokyo");
capitals.set("USA", "Washington, D.C.");

capitals.forEach((value, key) => {
  console.log(`The capital of ${key} is ${value}`);
});

How It Works:

  • The forEach() callback receives the value and key arguments for each entry.
  • Logs a formatted string with the country and its capital.

Output

The capital of France is Paris
The capital of Japan is Tokyo
The capital of USA is Washington, D.C.

Example 2: Using entries(), keys(), and values()

The entries(), keys(), and values() methods return iterators that can be used with a for...of loop.

javascript
const fruits = new Map([
  ["apple", 10],
  ["banana", 5],
  ["cherry", 20]
]);

console.log("Entries:");
for (const [key, value] of fruits.entries()) {
  console.log(`${key}: ${value}`);
}

console.log("Keys:");
for (const key of fruits.keys()) {
  console.log(key);
}

console.log("Values:");
for (const value of fruits.values()) {
  console.log(value);
}

How It Works:

  • entries() provides an iterator of [key, value] pairs.
  • keys() iterates over the keys only.
  • values() iterates over the values only.

Output

Entries:
apple: 10
banana: 5
cherry: 20

Keys:
apple
banana
cherry

Values:
10
5
20

Getting Map Size (size)

The size property of a JavaScript Map returns the number of key-value pairs currently stored in the Map. It's a read-only property and provides a quick way to determine the Map's length.

Example: Using size to Get the Number of Entries

Here’s how you can use the size property to check how many entries a Map contains.

javascript
const cart = new Map();
cart.set("apple", 3);
cart.set("banana", 2);
cart.set("orange", 5);

console.log("Number of items in the cart:", cart.size);

How It Works:

  • new Map(): Creates a new Map instance.
  • set(): Adds key-value pairs representing items and quantities.
  • size: Returns the total number of entries in the Map.
  • console.log(): Displays the size.

Output

Number of items in the cart: 3

Frequently Asked Questions

What are the main methods of a JavaScript Map?

The core methods include set(), get(), has(), delete(), clear(), and iteration methods like keys(), values(), entries(), and forEach().

How does the set() method work in a Map?

The set() method adds or updates a key-value pair in the Map. If the key already exists, its value is updated.

What is the difference between keys(), values(), and entries()?

keys() returns all keys, values() returns all values, and entries() returns [key, value] pairs as iterators.

How do you check if a key exists in a Map?

Use has(key). It returns true if the Map contains the key, otherwise false.

How do you remove elements from a Map?

Use delete(key) to remove a specific entry, or clear() to remove all entries from the Map.

What's Next?

Up next: JavaScript Sets. Sets store unique values and are ideal when you want to ensure no duplicates.