JavaScript Set Methods

The Sets lesson introduced the essentials. This lesson is the complete toolkit: every method and property a Set has, how to loop in different ways, and how to move data between Sets and arrays.

// Full Reference

// add() Can Be Chained

Because add returns the Set itself, you can call it several times in a row:

const s = new Set().add("a").add("b").add("a").add("c");
console.log(s.size);   // 3

// delete() Tells You What Happened

const online = new Set(["ava", "ben"]);

console.log(online.delete("ben"));   // true   (was there, now removed)
console.log(online.delete("zed"));   // false  (was never there)

// clear(): Empty It

const cart = new Set(["pen", "tape"]);
cart.clear();

console.log(cart.size, cart.has("pen"));

// Toggling a Value

A common pattern for things like "favorite" buttons or selected items:

const favorites = new Set();

function toggle(item) {
  if (favorites.has(item)) {
    favorites.delete(item);
  } else {
    favorites.add(item);
  }
}

toggle("song-12");
toggle("song-40");
toggle("song-12");            // un-favorited
console.log([...favorites]);

// Three Ways to Loop

const planets = new Set(["Mercury", "Venus", "Earth"]);

// 1. for...of (most common)
for (const p of planets) console.log(p);

// 2. forEach
planets.forEach(p => console.log(p));

// 3. an explicit iterator
for (const p of planets.values()) console.log(p);

All three visit values in the order they were first added.

The forEach callback can also be a regular function. It receives the value twice and then the Set, for the same reason explained in the next section:

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

letters.forEach(function (value, sameValue, set) {
  console.log(value, sameValue, set.size);
});

// Why keys() and entries() Look Odd

Sets have no keys, only values. These methods exist so Sets and Maps can be used with the same code. On a Set, keys() is the same as values(), and entries() gives each value twice:

const s = new Set(["x", "y"]);
console.log([...s.entries()]);

// Sets and Arrays: Converting Both Ways

// Array to Set
const set = new Set([3, 1, 3, 2]);

// Set to array (either way works)
const arr1 = [...set];
const arr2 = Array.from(set);

Sets do not have map, filter, or sort. Convert to an array, use the array method, and convert back if needed:

const scores = new Set([72, 95, 88, 61]);

const high = new Set([...scores].filter(s => s >= 80));
const sorted = [...scores].sort((a, b) => a - b);

console.log(high, sorted);

// Changing Values Inside a Set

There is no way to edit a value in place. Delete the old one and add the new one:

const names = new Set(["ava", "ben"]);
names.delete("ben");
names.add("Ben");

// Quick Check

const it = new Set(["x", "y"]).values();
console.log([...it].length, [...it].length);

const s = new Set([1, 2]);
s.clear();
console.log(s.size, s.has(1));

// Try It

▶ Open Playground

1. Click Open Playground. Chain a few more add calls, predict the size, then run it
2. Write the toggle function and toggle several items on and off
3. Log [...set.entries()] for a Set of three numbers
4. Take a Set of words and produce a sorted array of them in uppercase