Set & Map

JavaScript's modern collection types — Set for unique values, Map for key-value pairs with any key type.

What it is, in plain English: A Set is a collection of unique values — it automatically removes duplicates. A Map is a collection of key-value pairs where keys can be any type (not just strings like in plain objects). Both were added in ES2015 and are the right tool when you need uniqueness (Set) or a dictionary with non-string keys (Map).

Two modern collections: Set and Map

You already know arrays (ordered lists) and objects (key-value pairs with string keys). JavaScript has two more collection types that solve specific problems those don't handle well: Set for unique values, Map for flexible key-value storage.

Set — a collection where every value is unique

A Set is like an array, but it automatically refuses duplicates. If you add the same value twice, it only keeps one copy.

// Create a Set from an array — duplicates are removed automatically
const fruits = new Set(["apple", "banana", "apple", "cherry", "banana"]);
console.log(fruits);        // Set { "apple", "banana", "cherry" }
console.log(fruits.size);   // 3 — only 3 unique values

// Add values one at a time
fruits.add("date");
fruits.add("apple");   // already exists — ignored silently
console.log(fruits.size);  // 4

// Check membership — very fast (O(1)), unlike Array.includes()
console.log(fruits.has("banana"));  // true
console.log(fruits.has("mango"));   // false

// Remove a value
fruits.delete("banana");
console.log(fruits.has("banana"));  // false

// Loop over a Set
for (const fruit of fruits) {
  console.log(fruit);   // apple, cherry, date
}

// Convert back to an array with spread:
const uniqueArray = [...fruits];
console.log(uniqueArray);  // ["apple", "cherry", "date"]

The most common Set use case: deduplicating an array

const tags = ["javascript", "css", "javascript", "html", "css", "javascript"];
const uniqueTags = [...new Set(tags)];
console.log(uniqueTags);  // ["javascript", "css", "html"]

// Also fast membership check — better than Array.includes() for large lists:
const allowedRoles = new Set(["admin", "editor", "viewer"]);
const userRole = "admin";
if (allowedRoles.has(userRole)) {
  console.log("Access granted");
}

Map — key-value pairs with any key type

Objects store key-value pairs, but keys must be strings (or symbols). A Map allows any value as a key — numbers, objects, booleans, anything.

// Create a Map
const capitals = new Map([
  ["France", "Paris"],
  ["Japan",  "Tokyo"],
  ["India",  "New Delhi"],
]);

// Get, set, has, delete
console.log(capitals.get("Japan"));   // "Tokyo"
capitals.set("Brazil", "Brasília");
console.log(capitals.has("France"));  // true
capitals.delete("France");
console.log(capitals.size);           // 3

// Loop over entries — always in insertion order
for (const [country, capital] of capitals) {
  console.log(`${country}: ${capital}`);
}

// Get all keys / all values:
console.log([...capitals.keys()]);    // ["Japan", "India", "Brazil"]
console.log([...capitals.values()]);  // ["Tokyo", "New Delhi", "Brasília"]

When to use Map vs plain object

Plain object {}

Map

Key types

Strings and Symbols only

Any value (objects, numbers, functions...)

Order

Mostly insertion order (not guaranteed for all engines)

Always insertion order

Size

Object.keys(obj).length

map.size (direct, fast)

Best for

Static structure (user object, config, data shape)

Dynamic key-value store, counting, caching

// Map is better for dynamic counting:
const wordCount = new Map();
const words = ["the", "cat", "sat", "on", "the", "mat", "the"];
for (const word of words) {
  wordCount.set(word, (wordCount.get(word) ?? 0) + 1);
}
console.log(wordCount.get("the"));  // 3
console.log([...wordCount.entries()].sort((a,b) => b[1]-a[1]));
// [["the",3],["cat",1],["sat",1],["on",1],["mat",1]] — sorted by count

Try It Yourself

// SET — a collection of UNIQUE values
const colours = new Set(["red", "green", "blue", "red", "green"]);
console.log(colours);        // Set { "red", "green", "blue" } — duplicates removed
console.log(colours.size);   // 3

// Add and check membership
colours.add("yellow");
console.log(colours.has("red"));    // true
console.log(colours.has("pink"));   // false

// Remove a value
colours.delete("green");
console.log([...colours]);   // ["red", "blue", "yellow"]

// Most common use: deduplicate an array
const nums = [1, 2, 2, 3, 3, 3, 4];
const unique = [...new Set(nums)];
console.log(unique);         // [1, 2, 3, 4]

// MAP — key-value pairs where keys can be ANYTHING
const userRoles = new Map();
userRoles.set("alice@example.com", "admin");
userRoles.set("bob@example.com",   "viewer");
userRoles.set("carol@example.com", "editor");

console.log(userRoles.get("alice@example.com")); // "admin"
console.log(userRoles.has("dave@example.com"));  // false
console.log(userRoles.size);                      // 3

// Loop over a Map
for (const [email, role] of userRoles) {
  console.log(`${email}: ${role}`);
}

// Keys can be objects, not just strings:
const cache = new Map();
const reqObj = { url: "/api/users" };
cache.set(reqObj, { data: [1, 2, 3], timestamp: Date.now() });
console.log(cache.get(reqObj).data); // [1, 2, 3]

Set operations, Map patterns, WeakSet, and WeakMap

Set operations (union, intersection, difference)

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

// Union — all items from either set:
const union = new Set([...setA, ...setB]);
console.log([...union]);  // [1, 2, 3, 4, 5, 6]

// Intersection — items in BOTH sets:
const intersection = new Set([...setA].filter(x => setB.has(x)));
console.log([...intersection]);  // [3, 4]

// Difference — items in A but NOT in B:
const difference = new Set([...setA].filter(x => !setB.has(x)));
console.log([...difference]);   // [1, 2]

// Subset check:
const isSubset = [...setA].every(x => setB.has(x));
console.log(isSubset);   // false

Map as a cache / memoisation store

// Memoised Fibonacci — Map as cache:
function makeFib() {
  const cache = new Map([[0, 0], [1, 1]]);
  return function fib(n) {
    if (cache.has(n)) return cache.get(n);
    const result = fib(n - 1) + fib(n - 2);
    cache.set(n, result);
    return result;
  };
}
const fib = makeFib();
console.log(fib(40));  // 102334155 — fast with cache

WeakSet and WeakMap — garbage-collection-friendly

// WeakSet: like Set but holds WEAK references to objects
// — the object can be garbage collected even if it's in the WeakSet
const seen = new WeakSet();

function processOnce(obj) {
  if (seen.has(obj)) { console.log("Already processed"); return; }
  seen.add(obj);
  console.log("Processing:", obj.name);
}

const req = { name: "request-1" };
processOnce(req);  // "Processing: request-1"
processOnce(req);  // "Already processed"
// When req is no longer referenced elsewhere, it can be GC'd

// WeakMap: Map with weak object keys
const metadata = new WeakMap();

function tag(element, data) {
  metadata.set(element, data);  // element is the key — must be an object
}

const btn = document.createElement("button");
tag(btn, { clicks: 0, label: "Submit" });
console.log(metadata.get(btn)); // { clicks: 0, label: "Submit" }
// When btn is removed from the DOM and no longer referenced, the entry is GC'd

Converting between Map and Object

// Object → Map:
const obj = { a: 1, b: 2, c: 3 };
const map = new Map(Object.entries(obj));

// Map → Object:
const back = Object.fromEntries(map);
console.log(back);  // { a: 1, b: 2, c: 3 }

// JSON doesn't serialise Map or Set directly:
JSON.stringify(new Map([["a", 1]]));  // "{}" — loses all data!
// Fix: convert first
JSON.stringify([...map.entries()]);   // '[["a",1],["b",2],["c",3]]'

Hash table internals, iteration order, and the spec

Implementation: hash tables with SameValueZero

Map and Set use a hash table internally (ECMA-262 §24.1, §24.2). Key equality uses SameValueZero — identical to === except +0 === -0 and NaN === NaN. This is why NaN works as a Set/Map key even though NaN !== NaN:

const s = new Set([NaN, NaN, NaN]);
console.log(s.size);       // 1 — NaN treated as equal to itself
s.has(NaN);                // true

const m = new Map();
m.set(NaN, "not a number");
m.get(NaN);                // "not a number"

Iteration order guarantee

The spec (§24.1.3.5 for Set, §24.2.3.8 for Map) guarantees iteration in insertion order. This is stronger than plain objects, where integer indices are enumerated first in ascending numeric order before string keys. Set and Map always iterate in the exact order items were added.

WeakRef and FinalizationRegistry (ES2021)

// WeakRef — a weak reference that doesn't prevent GC:
let obj = { data: "heavy" };
const ref = new WeakRef(obj);

// Later (maybe after GC):
const deref = ref.deref();
if (deref) {
  console.log(deref.data);  // "heavy" — still alive
} else {
  console.log("Object was collected");
}

// FinalizationRegistry — callback when an object is GC'd:
const registry = new FinalizationRegistry((heldValue) => {
  console.log(`Object holding "${heldValue}" was collected`);
});

let target = { name: "Alice" };
registry.register(target, "Alice's object");
target = null;  // eligible for GC; callback fires eventually

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.