JavaScript Sets

A Set is a collection where every value appears only once. Try to add a duplicate and the Set simply ignores it. Whenever the question is "which different values are there?" or "have I seen this before?", a Set is the right tool.

// Creating a Set

const empty  = new Set();
const colors = new Set(["red", "green", "red", "blue", "green"]);

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

Five values went in, but only three unique ones were kept. Notice it is size, not length.

A Set can hold values of any type: strings, numbers, booleans, null, objects, even arrays. When you add a variable, the Set stores the variable's value:

const a = "a";
const letters = new Set();
letters.add(a);
letters.add("a");   // the same value: ignored

console.log(letters.size);

// Adding, Checking, Removing

const tags = new Set();

tags.add("js");
tags.add("css");
tags.add("js");          // already there: ignored

console.log(tags.has("css"));   // true
console.log(tags.has("php"));   // false

tags.delete("css");
console.log(tags.size);         // 1

// The Classic Use: Removing Duplicates

Turning an array into a Set and back again is the shortest way to remove duplicates:

const votes = ["pizza", "tacos", "pizza", "sushi", "tacos", "pizza"];

const choices = [...new Set(votes)];
console.log(choices);

// Why Not Just Use an Array?

You could check an array with includes before every push. But includes has to scan the array from the start each time, which gets slow as the list grows. has on a Set answers almost instantly, no matter how big the Set is.

// Array: slower as it grows, and duplicates are your job
if (!seenList.includes(id)) seenList.push(id);

// Set: fast, and duplicates are impossible
seenSet.add(id);

// Looping Through a Set

const langs = new Set(["JS", "Python", "Rust"]);

for (const lang of langs) {
  console.log(lang);
}

// What Counts as "the Same"?

Primitives are compared by value. Objects are compared by identity, just like ===:

const s = new Set();

s.add(5);
s.add("5");           // different type: both kept
s.add({ id: 1 });
s.add({ id: 1 });      // a different object: both kept
s.add(NaN);
s.add(NaN);          // Sets treat NaN as equal to itself: one kept

console.log(s.size);

// Sets Are Objects

const letters = new Set(["a", "b"]);

console.log(typeof letters);
console.log(letters instanceof Set);

Like arrays, typeof just says "object". Use instanceof Set to check for a Set. Also, size is read-only: letters.size = 10 is silently ignored. The only way to change the size is to add or delete values.

// Real Example: Counting Unique Visitors

const visits = ["ava", "ben", "ava", "cal", "ben", "ava"];
const unique = new Set(visits);

console.log(`${visits.length} visits from ${unique.size} people`);

// Quick Check

const s = new Set(["a", "b", "a"]);
s.add("b");
console.log(s.size);

const s = new Set([10, 20, 30]);
console.log(s[0], [...s][0]);

// Try It

▶ Open Playground

1. Click Open Playground and run it. Log nums itself too
2. Remove duplicate letters from a word using [...new Set("mississippi")]
3. Add the same object to a Set twice (through one variable), then add a look-alike object. Check the size each time
4. Keep a Set of words you have "seen" while looping through a sentence, and print only first appearances