Chapter 13: JavaScript Maps – Flexible Key-Value Storage in ES6

Chapter 13: JavaScript Map – Advanced Data Structures in ES6

ES6 introduced Map as a new data structure to store key-value pairs. While similar to objects, Maps come with added features like guaranteed insertion order and the ability to use objects, arrays, or functions as keys.

🧱 Creating a Map

const newMap = new Map();
console.log(newMap);  // Map(0) {}
  

➕ Adding Items to a Map

let userMap = new Map();
userMap.set('data', { name: 'Umar', age: 32 });

console.log(userMap);
// Map(1) { 'data' => { name: 'Umar', age: 32 } }

// Using an object as a key
let obj = {};
userMap.set(obj, { role: 'admin' });
console.log(userMap);
  

🔍 Getting Map Values

console.log(userMap.get('data'));
// { name: 'Umar', age: 32 }
  

✅ Checking Key Existence

console.log(userMap.has('data')); // true
console.log(userMap.has('email')); // false
  

❌ Deleting Elements

userMap.delete('data');  // true
console.log(userMap);    // Remaining entries

userMap.clear();         // Removes all entries
console.log(userMap);    // Map(0) {}
  

📏 Map Size

console.log(userMap.size); // Number of key/value pairs
  

🔁 Looping Through Maps (for…of)

let userMap = new Map([
  ['name', 'Umar'],
  ['age', '32']
]);

for (let [key, value] of userMap) {
  console.log(`${key} - ${value}`);
}
  

🔁 Looping Using forEach()

userMap.forEach((value, key) => {
  console.log(`${key} - ${value}`);
});
  

🔑 Iterating Over Keys

for (let key of userMap.keys()) {
  console.log(key);
}
  

🔓 Iterating Over Values

for (let value of userMap.values()) {
  console.log(value);
}
  

🔁 Getting Both Keys and Values (entries())

for (let [key, value] of userMap.entries()) {
  console.log(`${key}: ${value}`);
}
  

📊 Map vs Object Comparison

📘 Assignments: Practice JavaScript Maps

1. Create a Map with 3 key-value pairs: name, age, and country. Print each entry.
2. Use an object as a key in a Map and retrieve the value using get().
3. Check if a certain key exists in a Map using has().
4. Delete a specific key from the Map using delete(). Then, use clear().
5. Iterate through the Map keys, values, and entries. Log each with proper formatting.

📌 Summary

• Map stores key-value pairs with guaranteed order and flexibility.
• Use set() to add items, get() to access, and has() to check existence.
• delete() removes specific entries; clear() wipes the entire map.
• Loop using for...of, forEach(), or entries().
• Maps are more dynamic and powerful than plain objects for structured data.