By the end, you can create a JavaScript Set and use add, has, delete, clear, and size to manage unique values efficiently.
What it is
A Set is a built-in collection that stores unique values. Unlike an array, it does not keep duplicate entries, and unlike an object, it is designed for membership testing rather than key/value storage. Each value appears at most once. Related terms: membership (has), insertion (add), removal (delete), iteration (forEach, for...of), and size.
Why it matters
- Quickly check whether a value exists without scanning an array.
- Remove duplicates from lists, such as user IDs or tags.
- Track visited nodes, active sessions, or selected items.
- Keep code clearer than using arrays with
includesand manual filtering. - Preserve insertion order while enforcing uniqueness.
Syntax or steps
- Create a set:
const s = new Set();ornew Set([1, 2, 3]). - Add a value:
s.add(value). If the value already exists, nothing changes. - Check membership:
s.has(value)returnstrueorfalse. - Delete a value:
s.delete(value)returnstrueif removed, otherwisefalse. - Inspect count:
s.sizeis a property, not a method. - Clear all values:
s.clear().
Example
const visitedPages = new Set();
visitedPages.add("/home");
visitedPages.add("/about");
visitedPages.add("/home"); // duplicate ignored
console.log(visitedPages.has("/about")); // true
console.log(visitedPages.has("/contact")); // false
visitedPages.delete("/home");
console.log(visitedPages.size); // 1
console.log([...visitedPages]); // ["/about"]
Part by part: new Set() creates an empty collection. add inserts a value only if it is not already present. has checks membership. delete removes a value and reports whether it existed. size gives the number of unique values. The spread syntax [...visitedPages] converts the set to an array when array methods are needed.
Common mistakes
- Using
set.contains(). JavaScript usesset.has(). - Calling
set.size().sizeis a property:set.size. - Adding object literals twice, such as
set.add({ id: 1 })andset.add({ id: 1 }). These are different objects, so both are stored. - Expecting
deleteto throw when the value is missing. It returnsfalseinstead.
When to use it
Use a Set when uniqueness and membership checks are the main needs. Use an array when order, indexing, duplicates, or array methods are more important.
| Need | Use | Why |
|---|---|---|
| Check if value exists | Set.has() | Usually faster and clearer than Array.includes(). |
| Store duplicates | Array | A set removes duplicates automatically. |
| Access by index | Array | Sets are not indexed like arrays. |
| Remove duplicates | new Set(array) | Converts a list to unique values. |
Practice
Guided exercise: create a set of three colors, add a duplicate color, check whether "blue" exists, then delete "red". Expected output: true for the check and size 2.
const colors = new Set(["red", "green", "blue"]);
colors.add("red");
console.log(colors.has("blue")); // true
colors.delete("red");
console.log(colors.size); // 2
Challenge: remove duplicates from [1, 2, 2, 3, 3, 3] and return an array. Hint: use Array.from(new Set(numbers)) or [...new Set(numbers)].
Quick check
Question: What does set.add(5) do if 5 is already in the set?
Answer: It does nothing; the set still contains one 5.
Summary
A JavaScript Set is a simple tool for unique values and fast membership checks. Use add, has, delete, size, and clear to manage it, and convert to an array only when indexed access or array methods are needed.