Map and Set

🗺️ Collections: Map and Set – Your Treasure Chests for Data!

Imagine you have two special treasure chests. One chest (called Map) has labeled drawers where each drawer has a name tag AND something inside. The other chest (called Set) is a magic box that only keeps unique treasures – it automatically throws out any duplicates!

Let’s explore these magical containers!

📍 The Map Object – Your Labeled Drawer System

What is a Map?

Think of a Map like a drawer organizer with name tags. Each drawer has:

• A label (we call it a “key”) – like “socks drawer”
• Stuff inside (we call it a “value”) – the actual socks!

Unlike a regular object, a Map can use anything as a label – even other objects!

// Creating a Map - like getting a new organizer!
const myTreasures = new Map();

// Adding items with labels
myTreasures.set("gold", 100);
myTreasures.set("gems", 50);
myTreasures.set("magic wands", 3);

Why Use Map Instead of Regular Objects?

• Any key type! Objects only allow string keys. Maps allow anything!
• Easy counting! Use .size to count items instantly
• Built-in order! Items stay in the order you added them

// Maps can use anything as keys!
const playerScores = new Map();
const player1 = { name: "Alex" };
const player2 = { name: "Sam" };

playerScores.set(player1, 100);
playerScores.set(player2, 85);

🛠️ Map Methods – Your Toolbox

Maps come with super helpful tools! Here are the main ones:

.set(key, value) – Add or Update a Drawer

const snackCounts = new Map();
snackCounts.set("cookies", 5);   // Add new
snackCounts.set("cookies", 10);  // Update!

.get(key) – Peek Inside a Drawer

const howManyCookies = snackCounts.get("cookies");
// Returns: 10

.has(key) – Check if Drawer Exists

snackCounts.has("cookies");  // true
snackCounts.has("carrots");  // false

.delete(key) – Remove a Drawer

snackCounts.delete("cookies");
// Bye bye cookies drawer!

.clear() – Empty Everything!

snackCounts.clear();
// All drawers gone!

.size – Count All Drawers

const petFood = new Map([
  ["cat", "fish"],
  ["dog", "bones"],
  ["rabbit", "carrots"]
]);
console.log(petFood.size); // 3

🔄 Map Iteration – Looking at Everything

Need to see all your treasures? Maps give you three ways to peek!

Loop Through Everything with for…of

const fruitColors = new Map([
  ["apple", "red"],
  ["banana", "yellow"],
  ["grape", "purple"]
]);

// Method 1: entries() - key AND value
for (const [fruit, color] of fruitColors) {
  console.log(`${fruit} is ${color}`);
}

// Method 2: keys() - just the labels
for (const fruit of fruitColors.keys()) {
  console.log(fruit); // apple, banana, grape
}

// Method 3: values() - just the contents
for (const color of fruitColors.values()) {
  console.log(color); // red, yellow, purple
}

forEach – Do Something with Each Item

fruitColors.forEach((color, fruit) => {
  console.log(`I love ${color} ${fruit}s!`);
});

⚖️ Map vs Object – Which Should You Choose?

graph TD
    A["Need to store key-value pairs?"] --> B{What type of keys?}
    B -->|Only strings| C["Object works fine!"]
    B -->|Any type| D["Use Map!"]
    A --> E{Need to count items often?}
    E -->|Yes| F["Use Map - has .size"]
    E -->|No| G["Object is okay"]
    A --> H{Need preserved order?}
    H -->|Yes| I["Use Map!"]
    H -->|No| J["Object might work"]

Quick Rule: Use Map when keys aren’t strings or when you need easy iteration!

🎯 The Set Object – Your Magic Duplicate Filter

Now meet Set – the treasure chest that hates copies! Throw in 10 identical coins, and it keeps only 1.

// Creating a Set
const myPets = new Set();

// Adding items
myPets.add("dog");
myPets.add("cat");
myPets.add("dog"); // Already have a dog!
myPets.add("fish");

console.log(myPets.size); // 3 (not 4!)

Real-World Example

// Track unique visitors
const visitors = new Set();
visitors.add("user123");
visitors.add("user456");
visitors.add("user123"); // Same person!

console.log(visitors.size); // 2 unique visitors!

🛠️ Set Methods – Your Uniqueness Toolkit

.add(value) – Toss In a Treasure

const colors = new Set();
colors.add("blue");
colors.add("red");
colors.add("blue"); // Ignored - already have it!

.has(value) – Check If It’s Inside

colors.has("blue"); // true
colors.has("pink"); // false

.delete(value) – Remove One Item

colors.delete("red");
// Red is gone!

.clear() – Empty the Whole Chest

colors.clear();
// All colors gone!

.size – Count Unique Items

const numbers = new Set([1, 2, 2, 3, 3, 3]);
console.log(numbers.size); // 3 (only unique!)

🔄 Set Iteration – Viewing Your Unique Collection

Sets are iterable just like Maps!

const fruits = new Set(["apple", "banana", "cherry"]);

// for...of loop
for (const fruit of fruits) {
  console.log(fruit);
}

// forEach
fruits.forEach(fruit => {
  console.log(`I love ${fruit}!`);
});

// Convert to Array
const fruitArray = [...fruits];
console.log(fruitArray);
// ["apple", "banana", "cherry"]

Getting Keys and Values

// In Sets, keys and values are the same thing!
for (const item of fruits.keys()) {
  console.log(item);
}

for (const item of fruits.values()) {
  console.log(item); // Same result!
}

✨ Removing Duplicates with Set – The Magic Trick!

Here’s the superpower everyone loves about Sets!

Remove Duplicates from Array

// Messy array with duplicates
const messy = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4];

// One-line magic! ✨
const clean = [...new Set(messy)];
console.log(clean); // [1, 2, 3, 4]

How It Works

graph TD
    A["Array with duplicates"] --> B["Create Set from Array"]
    B --> C["Set removes duplicates automatically"]
    C --> D["Spread back into Array"]
    D --> E["Clean unique array!"]

More Examples

// Remove duplicate words
const words = ["hi", "hello", "hi", "hey", "hello"];
const uniqueWords = [...new Set(words)];
// ["hi", "hello", "hey"]

// Remove duplicate letters
const letters = "mississippi".split("");
const uniqueLetters = [...new Set(letters)].join("");
// "misp"

Real-World Use Cases

// Get unique tags from posts
const allTags = ["js", "web", "js", "css", "web"];
const uniqueTags = [...new Set(allTags)];

// Find unique visitors
const visits = ["user1", "user2", "user1", "user3"];
const uniqueVisitors = new Set(visits).size; // 3

🎮 Quick Comparison: Map vs Set

🚀 Summary – Your New Superpowers!

Map – The Labeled Drawer System

• Stores key-value pairs
• Keys can be any type
• Use .set(), .get(), .has(), .delete()
• Perfect for lookups and dictionaries

Set – The Duplicate Destroyer

• Stores unique values only
• Automatically removes duplicates
• Use .add(), .has(), .delete()
• Perfect for tracking unique items

The Ultimate Trick

// Clean any array in one line!
const unique = [...new Set(arrayWithDuplicates)];

Now you have two powerful treasure chests in your JavaScript toolkit! 🎉