JavaScript Map & Set Mastery: Complete Guide to Modern Data Structures

// Empty Map
const map = new Map();

// From array of [key, value] pairs
const userRoles = new Map([
    ['alice', 'admin'],
    ['bob', 'editor'],
    ['charlie', 'viewer']
]);

console.log(userRoles);
// Map(3) { 'alice' => 'admin', 'bob' => 'editor', 'charlie' => 'viewer' }

const map = new Map();

// set() — returns the Map (chainable!)
map.set('name', 'Alice')
   .set('age', 30)
   .set('active', true);

// get()
console.log(map.get('name'));    // 'Alice'
console.log(map.get('missing')); // undefined

// has()
console.log(map.has('age'));     // true
console.log(map.has('email'));   // false

// size
console.log(map.size);           // 3

// delete()
map.delete('active');
console.log(map.size);           // 2

// clear()
map.clear();
console.log(map.size);           // 0

const map = new Map();

// Object as key
const user = { id: 1, name: 'Alice' };
map.set(user, 'premium');

// Function as key
const greet = () => 'Hello';
map.set(greet, 'greeting function');

// Number as key (not converted to string!)
map.set(1, 'one');
map.set('1', 'string one');  // Different key from above!

console.log(map.get(1));     // 'one'
console.log(map.get('1'));   // 'string one'
console.log(map.get(user));  // 'premium'

// DOM elements as keys
const button = document.querySelector('#submit');
map.set(button, { clicks: 0, lastClicked: null });

const map = new Map();
map.set(NaN, 'not a number');
console.log(map.get(NaN)); // 'not a number' ✅ (NaN === NaN in Maps)

const fruits = new Map([
    ['apple', 1.5],
    ['banana', 0.75],
    ['cherry', 3.0]
]);

// forEach()
fruits.forEach((value, key) => {
    console.log(`${key}: $${value}`);
});

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

// keys()
for (const key of fruits.keys()) {
    console.log(key); // 'apple', 'banana', 'cherry'
}

// values()
for (const value of fruits.values()) {
    console.log(value); // 1.5, 0.75, 3.0
}

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

const map = new Map([['a', 1], ['b', 2], ['c', 3]]);

const keys = [...map.keys()];       // ['a', 'b', 'c']
const values = [...map.values()];   // [1, 2, 3]
const entries = [...map.entries()]; // [['a', 1], ['b', 2], ['c', 3]]
const entries2 = [...map];          // Same as above

const map = new Map([['name', 'Alice'], ['age', 30]]);

// Map → JSON
const json = JSON.stringify([...map]);
console.log(json); // '[["name","Alice"],["age",30]]'

// JSON → Map
const restored = new Map(JSON.parse(json));
console.log(restored.get('name')); // 'Alice'

// Map → Object (string keys only)
const obj = Object.fromEntries(map);
console.log(obj); // { name: 'Alice', age: 30 }

// Object → Map
const map2 = new Map(Object.entries(obj));

// Empty Set
const set = new Set();

// From array (duplicates removed automatically!)
const unique = new Set([1, 2, 3, 2, 1, 3]);
console.log(unique); // Set(3) { 1, 2, 3 }

// From string
const chars = new Set('hello');
console.log(chars); // Set(4) { 'h', 'e', 'l', 'o' }

const colors = new Set();

// add() — chainable
colors.add('red')
      .add('green')
      .add('blue')
      .add('red');  // Ignored! Already exists

console.log(colors.size); // 3

// has() — O(1) lookup!
console.log(colors.has('red'));    // true
console.log(colors.has('yellow')); // false

// delete()
colors.delete('green');
console.log(colors.size); // 2

// clear()
colors.clear();
console.log(colors.size); // 0

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

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

// forEach
fruits.forEach(value => console.log(value));

// Convert to Array
const arr = [...fruits];
// or
const arr2 = Array.from(fruits);

const set = new Set();
set.add('c').add('a').add('b');

console.log([...set]); // ['c', 'a', 'b'] (insertion order)

// Simple deduplication
const numbers = [1, 2, 3, 2, 1, 4, 5, 4];
const unique = [...new Set(numbers)];
console.log(unique); // [1, 2, 3, 4, 5]

// Deduplicate objects by property
const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 1, name: 'Alice' }  // Duplicate
];

const uniqueIds = [...new Set(users.map(u => u.id))];
console.log(uniqueIds); // [1, 2]

// Deduplicate and keep objects
const seen = new Set();
const uniqueUsers = users.filter(user => {
    if (seen.has(user.id)) return false;
    seen.add(user.id);
    return true;
});

const setA = new Set([1, 2, 3, 4]);
const setB = new Set([3, 4, 5, 6]);

const union = new Set([...setA, ...setB]);
console.log(union); // Set { 1, 2, 3, 4, 5, 6 }

// ES2025+ (built-in method)
const union2 = setA.union(setB);

const intersection = new Set(
    [...setA].filter(x => setB.has(x))
);
console.log(intersection); // Set { 3, 4 }

// ES2025+
const intersection2 = setA.intersection(setB);

const difference = new Set(
    [...setA].filter(x => !setB.has(x))
);
console.log(difference); // Set { 1, 2 }

// ES2025+
const difference2 = setA.difference(setB);

const symDifference = new Set(
    [...setA].filter(x => !setB.has(x))
    .concat([...setB].filter(x => !setA.has(x)))
);
console.log(symDifference); // Set { 1, 2, 5, 6 }

// ES2025+
const symDifference2 = setA.symmetricDifference(setB);

const weakMap = new WeakMap();

let user = { name: 'Alice' };
weakMap.set(user, 'some metadata');

console.log(weakMap.get(user)); // 'some metadata'

user = null; // The object can now be garbage collected!
// The WeakMap entry is automatically removed

const privateData = new WeakMap();

class Person {
    constructor(name, age) {
        privateData.set(this, { name, age });
    }

    getName() {
        return privateData.get(this).name;
    }

    getAge() {
        return privateData.get(this).age;
    }
}

const alice = new Person('Alice', 30);
console.log(alice.getName()); // 'Alice'
console.log(alice.getAge());  // 30
// No way to access privateData from outside!

const cache = new WeakMap();

function expensiveOperation(obj) {
    if (cache.has(obj)) {
        console.log('Cache hit!');
        return cache.get(obj);
    }

    const result = /* ...expensive calculation... */ obj.value * 2;
    cache.set(obj, result);
    return result;
}

let data = { value: 42 };
expensiveOperation(data); // Computes
expensiveOperation(data); // Cache hit!

data = null; // Cache entry is automatically cleaned up!

const elementData = new WeakMap();

function trackElement(element) {
    elementData.set(element, {
        clicks: 0,
        created: Date.now()
    });
}

function recordClick(element) {
    const data = elementData.get(element);
    if (data) data.clicks++;
}

// When the DOM element is removed, the metadata 
// is automatically garbage collected!

const weakSet = new WeakSet();

let obj = { name: 'Alice' };
weakSet.add(obj);

console.log(weakSet.has(obj)); // true

obj = null; // Object can be garbage collected
// WeakSet entry is automatically removed

const visited = new WeakSet();

function processNode(node) {
    if (visited.has(node)) {
        return; // Already processed — avoid infinite loops!
    }
    visited.add(node);

    // Process the node...
    console.log(`Processing: ${node.name}`);

    if (node.children) {
        node.children.forEach(child => processNode(child));
    }
}

const validRequests = new WeakSet();

class Request {
    constructor(url) {
        this.url = url;
        validRequests.add(this);
    }
}

function processRequest(req) {
    if (!validRequests.has(req)) {
        throw new Error('Invalid request object!');
    }
    // Safe to process...
}

const req = new Request('/api/users');
processRequest(req);              // ✅ Works
processRequest({ url: '/hack' }); // ❌ Throws Error

function wordFrequency(text) {
    const words = text.toLowerCase().match(/\b\w+\b/g) || [];
    const freq = new Map();

    for (const word of words) {
        freq.set(word, (freq.get(word) || 0) + 1);
    }

    // Sort by frequency (descending)
    return new Map(
        [...freq.entries()].sort((a, b) => b[1] - a[1])
    );
}

const result = wordFrequency('the cat sat on the mat the cat');
console.log(result);
// Map { 'the' => 3, 'cat' => 2, 'sat' => 1, 'on' => 1, 'mat' => 1 }

class LRUCache {
    constructor(capacity) {
        this.capacity = capacity;
        this.cache = new Map();
    }

    get(key) {
        if (!this.cache.has(key)) return -1;

        // Move to end (most recently used)
        const value = this.cache.get(key);
        this.cache.delete(key);
        this.cache.set(key, value);
        return value;
    }

    put(key, value) {
        if (this.cache.has(key)) {
            this.cache.delete(key);
        } else if (this.cache.size >= this.capacity) {
            // Delete oldest (first entry)
            const oldest = this.cache.keys().next().value;
            this.cache.delete(oldest);
        }
        this.cache.set(key, value);
    }
}

const cache = new LRUCache(3);
cache.put('a', 1);
cache.put('b', 2);
cache.put('c', 3);
cache.put('d', 4); // Evicts 'a'
console.log(cache.get('b')); // 2 (moves 'b' to end)

class BiMap {
    constructor() {
        this.forward = new Map();
        this.reverse = new Map();
    }

    set(key, value) {
        this.forward.set(key, value);
        this.reverse.set(value, key);
    }

    getByKey(key) {
        return this.forward.get(key);
    }

    getByValue(value) {
        return this.reverse.get(value);
    }
}

const countryCode = new BiMap();
countryCode.set('US', 'United States');
countryCode.set('IN', 'India');

console.log(countryCode.getByKey('IN'));           // 'India'
console.log(countryCode.getByValue('United States')); // 'US'

function collectTags(posts) {
    const allTags = new Set();

    posts.forEach(post => {
        post.tags.forEach(tag => allTags.add(tag));
    });

    return [...allTags].sort();
}

const posts = [
    { title: 'Post 1', tags: ['javascript', 'react'] },
    { title: 'Post 2', tags: ['javascript', 'node'] },
    { title: 'Post 3', tags: ['react', 'nextjs'] }
];

console.log(collectTags(posts));
// ['javascript', 'nextjs', 'node', 'react']

class PermissionManager {
    constructor() {
        this.permissions = new Map(); // userId → Set of permissions
    }

    grant(userId, permission) {
        if (!this.permissions.has(userId)) {
            this.permissions.set(userId, new Set());
        }
        this.permissions.get(userId).add(permission);
    }

    revoke(userId, permission) {
        this.permissions.get(userId)?.delete(permission);
    }

    check(userId, permission) {
        return this.permissions.get(userId)?.has(permission) ?? false;
    }

    listPermissions(userId) {
        return [...(this.permissions.get(userId) || [])];
    }
}

const pm = new PermissionManager();
pm.grant('alice', 'read');
pm.grant('alice', 'write');
pm.grant('alice', 'read'); // Duplicate ignored

console.log(pm.check('alice', 'write')); // true
console.log(pm.listPermissions('alice')); // ['read', 'write']

// Benchmark: Checking membership in 1,000,000 items
const arr = Array.from({ length: 1_000_000 }, (_, i) => i);
const set = new Set(arr);

console.time('Array.includes');
arr.includes(999_999);
console.timeEnd('Array.includes'); // ~2ms

console.time('Set.has');
set.has(999_999);
console.timeEnd('Set.has');        // ~0.001ms (1000x faster!)