Scott McDaniel

Senior Frontend Developer & Sometimes Full Stack Developer

LinkedIn

JavaScript

Quick reference for JavaScript syntax, methods, and common patterns.

🔍

Data Structures

JavaScript data structures: Map, Set, WeakMap, and WeakSet with examples and comparisons.

Map & Set

Map - Key-Value Collections

Map provides better key-value storage than plain objects

// Creating and using Map
const map = new Map();

// Set values
map.set('name', 'John');
map.set(42, 'answer');
map.set({ key: 'obj' }, 'object value');

// Get values
map.get('name');           // 'John'
map.get(42);              // 'answer'

// Check if key exists
map.has('name');          // true
map.has('age');           // false

// Delete key
map.delete('name');        // true

// Size
map.size;                 // 2

// Clear all
map.clear();

// Iteration
const userMap = new Map([
  ['name', 'John'],
  ['age', 30],
  ['city', 'NYC']
]);

// For...of loop
for (const [key, value] of userMap) {
  console.log(`${key}: ${value}`);
}

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

Map vs Object

Why Map is often better than plain objects for key-value storage

// Object limitations
const obj = {};
obj[5] = 'five';
obj['5'] = 'five string';  // Overwrites previous value
obj[{}] = 'object key';    // Converts to '[object Object]'

// Map advantages
const map = new Map();
map.set(5, 'five');
map.set('5', 'five string');  // Different keys
map.set({}, 'object key');    // Works with any key type

// Object keys are always strings
Object.keys(obj);             // ['5'] - only one key

// Map preserves key types
map.keys();                   // MapIterator {5, '5', {}}

Set - Unique Value Collections

Set stores unique values and automatically removes duplicates

// Creating and using Set
const set = new Set();

// Add values
set.add(1);
set.add('hello');
set.add({ name: 'John' });

// Check if value exists
set.has(1);                 // true
set.has('hello');           // true
set.has({ name: 'John' }); // false (different object reference)

// Delete value
set.delete(1);              // true

// Size
set.size;                   // 2

// Clear all
set.clear();

// Remove duplicates from array
const numbers = [1, 2, 2, 3, 3, 4];
const uniqueNumbers = [...new Set(numbers)]; // [1, 2, 3, 4]

// Iteration
const fruitSet = new Set(['apple', 'banana', 'apple', 'orange']);

// For...of loop
for (const fruit of fruitSet) {
  console.log(fruit); // apple, banana, orange (no duplicates)
}

// ForEach
fruitSet.forEach(fruit => {
  console.log(fruit);
});

Set vs Array

Performance benefits of Set for membership testing

// Array with duplicates
const arr = [1, 2, 2, 3, 3, 4];

// Check if value exists (O(n) - linear search)
arr.includes(2);            // true
arr.indexOf(2);             // 1 (first occurrence)

// Set with unique values
const set = new Set([1, 2, 2, 3, 3, 4]);

// Check if value exists (O(1) - constant time)
set.has(2);                 // true

// Performance comparison
const largeArray = Array.from({ length: 10000 }, (_, i) => i);
const largeSet = new Set(largeArray);

// Array search (slower)
console.time('array');
largeArray.includes(9999);  // O(n)
console.timeEnd('array');

// Set search (faster)
console.time('set');
largeSet.has(9999);         // O(1)
console.timeEnd('set');

WeakMap & WeakSet

Weak collections for memory management and avoiding memory leaks

// WeakMap - keys are weakly referenced
const weakMap = new WeakMap();
let obj1 = { name: 'John' };
let obj2 = { name: 'Jane' };

weakMap.set(obj1, 'data1');
weakMap.set(obj2, 'data2');

weakMap.get(obj1);          // 'data1'

// When obj1 is garbage collected, its entry is removed
obj1 = null;
// weakMap now only contains obj2 entry

// WeakSet - values are weakly referenced
const weakSet = new WeakSet();
let user1 = { id: 1 };
let user2 = { id: 2 };

weakSet.add(user1);
weakSet.add(user2);

weakSet.has(user1);         // true

// When user1 is garbage collected, it's removed from set
user1 = null;
// weakSet now only contains user2

// Note: WeakMap/WeakSet keys/values must be objects
// weakMap.set('string', 'value'); // Error
// weakSet.add('string');          // Error