Map in JavaScript

🗺️ Introduction to Map

A Map is a built-in JavaScript collection that stores data as key-value pairs. Unlike plain objects, a Map allows keys of any data type, such as strings, numbers, booleans, objects, and even functions.

✨ Features of Map

  • Stores key-value pairs.
  • Keys can be any data type.
  • Maintains insertion order.
  • Iterable using for...of.
  • Provides useful methods for managing entries.

🔤 Creating a Map

Creating an Empty Map

const user = new Map();

Creating a Map with Initial Values

const user = new Map([
  ["name", "Alice"],
  ["age", 25],
  ["country", "India"]
]);

➕ Adding Entries

Use the set() method to add or update entries.

Using set()

const user = new Map();

user.set("name", "Alice");
user.set("age", 25);
user.set("country", "India");

📖 Getting Values

Use the get() method to retrieve a value.

Using get()

console.log(user.get("name"));
console.log(user.get("age"));

🔍 Checking for a Key

Use has() to check whether a key exists.

Using has()

console.log(user.has("name"));
console.log(user.has("email"));

🗑️ Removing Entries

Use delete() to remove an entry.

Using delete()

user.delete("country");

console.log(user);

❌ Clearing a Map

Use clear() to remove every entry.

Using clear()

user.clear();

console.log(user);

📏 Getting the Size

The size property returns the number of entries.

Using size

console.log(user.size);

🔑 Getting All Keys

keys()

for (const key of user.keys()) {
  console.log(key);
}

📦 Getting All Values

values()

for (const value of user.values()) {
  console.log(value);
}

📋 Getting All Entries

entries()

for (const [key, value] of user.entries()) {
  console.log(key, value);
}

🔄 Iterating Over a Map

Using for...of

for (const [key, value] of user) {
  console.log(key, value);
}

Using forEach()

user.forEach((value, key) => {
  console.log(key, value);
});

🧩 Using Objects as Keys

Unlike plain objects, a Map allows objects to be used as keys.

Object Keys

const person = { id: 1 };

const map = new Map();

map.set(person, "Developer");

console.log(map.get(person));

🔄 Converting Between Objects and Maps

Object → Map

const person = {
  name: "Alice",
  age: 25
};

const map = new Map(Object.entries(person));

Map → Object

const person = Object.fromEntries(user);

console.log(person);

🔄 Converting Between Arrays and Maps

Array → Map

const data = [
  ["name", "Alice"],
  ["age", 25]
];

const map = new Map(data);

Map → Array

const array = [...user];

console.log(array);

⚠️ Comparing Object Keys

Note

Object keys are compared by reference, not by their contents.

Reference Comparison

const a = {};
const b = {};

const map = new Map();

map.set(a, "First");

console.log(map.get(a));
console.log(map.get(b));

🆚 Map vs Object

  • Map supports keys of any type.
  • Object only supports string and symbol keys.
  • Map maintains insertion order.
  • Map has a built-in size property.
  • Map is directly iterable.

🧠 When to Use

  • Store dynamic key-value pairs.
  • Use objects or functions as keys.
  • Need guaranteed insertion order.
  • Frequently add or remove entries.

📚 More to Explore

>>"Use a Map when your data is naturally represented as flexible key-value pairs." 🚀