JavaScript Set Methods: A Complete Guide

Understanding JavaScript Set

What is a Set?

A Set is a built-in JavaScript object that lets you store unique values of any type, whether primitive values like strings and numbers, or object references. Unlike arrays, Sets automatically enforce uniqueness--no duplicate values can exist within the same Set. This makes Sets particularly valuable for scenarios where you need to ensure no repetitions occur, such as tracking visited pages, managing unique identifiers, or performing set operations on collections of data.

The Set object is part of the JavaScript standard library and is supported across all modern browsers and Node.js environments. The specification requires Sets to be implemented with access times that are sublinear on the number of elements, which typically translates to O(1) constant-time performance for most operations through hash table implementations.

Sets maintain elements in insertion order, which means when you iterate through a Set, you'll encounter values in the same order they were added. This predictable ordering can be beneficial for rendering lists, maintaining sequences, or implementing algorithms that depend on insertion order.

Why Use Set Over Arrays?

The fundamental difference between Set and Array lies in their approach to uniqueness. Arrays allow duplicate values by default, requiring manual filtering or processing to remove duplicates. Sets handle uniqueness automatically--attempting to add a value that already exists simply updates the Set without creating a duplicate.

Performance is another compelling reason to choose Set for appropriate use cases. The has() method checks if a value exists in the Set using an approach that is, on average, faster than Array.prototype.includes() when the collection size is large. This performance advantage comes from hash table implementations, which provide constant-time lookups regardless of the Set's size.

MDN Web Docs - Set

Constructor Syntax

// Creating an empty Set
const emptySet = new Set();

// Creating a Set from an array (with automatic deduplication)
const numbers = new Set([1, 2, 3, 2, 1, 4]);
console.log([...numbers]); // [1, 2, 3, 4]

// Creating a Set from a string
const charSet = new Set('hello');
console.log([...charSet]); // ['h', 'e', 'l', 'o']

MDN Web Docs - Set

Core Instance Methods and Properties

Adding and Checking Elements

The add() method is the primary way to insert elements into a Set. It returns the Set object itself, enabling method chaining for fluent API usage:

const colors = new Set();
colors.add('red').add('blue').add('green');
console.log(colors.size); // 3

The has() method determines whether a value exists in the Set, returning a boolean. This is Set's most frequently used method and offers constant-time performance regardless of Set size. For membership testing in large collections, has() is significantly faster than Array.prototype.includes().

const fruits = new Set(['apple', 'banana', 'cherry']);
console.log(fruits.has('apple')); // true
console.log(fruits.has('orange')); // false

Removing Elements

The delete() method removes a specific value from the Set, returning a boolean indicating whether the element was present and successfully removed:

const animals = new Set(['cat', 'dog', 'bird', 'fish']);
const removed = animals.delete('cat');
console.log(removed); // true

The clear() method removes all elements from the Set simultaneously:

sessionData.clear();
console.log(sessionData.size); // 0

Size Property

The size property provides the count of elements in the Set:

const data = new Set([1, 2, 3, 4, 5]);
console.log(data.size); // 5

MDN Web Docs - Set

Iteration Methods

values(), keys(), and entries()

The values() method returns a new iterator containing the values of each element. The keys() method is an alias for values()--in Sets, keys and values are the same concept:

const userIds = new Set(['alice', 'bob', 'charlie']);
console.log([...userIds.values()]); // ['alice', 'bob', 'charlie']
console.log([...userIds.keys()]); // ['alice', 'bob', 'charlie']

The entries() method returns arrays of [value, value] pairs for consistency with Map:

const numbers = new Set([1, 2, 3]);
for (const entry of numbers.entries()) {
 console.log(entry); // [1, 1], [2, 2], [3, 3]
}

forEach()

The forEach() method executes a provided function once for each value in the Set:

const products = new Set(['laptop', 'phone', 'tablet']);
products.forEach(value => {
 console.log(`Processing: ${value}`);
});

ECMAScript 2025 Set Methods: Mathematical Operations

union() Method

The union() method returns a new Set containing all elements from both Sets. Mathematically, the union of two sets A and B contains all elements that are in A, in B, or in both. In Venn diagram terms, this is represented by filling both circles completely--the overlapping region is included only once, and any unique elements from either set are preserved:

const setA = new Set(['a', 'b', 'c']);
const setB = new Set(['c', 'd', 'e']);
const unionSet = setA.union(setB);
console.log([...unionSet]); // ['a', 'b', 'c', 'd', 'e']

MDN Web Docs - Set.prototype.union()

intersection() Method

The intersection() method returns a new Set containing only elements that exist in both Sets. This operation computes the set of elements that A and B have in common--elements that are in A AND in B. In Venn diagram terms, intersection is the overlapping region where both circles intersect:

const techSkills = new Set(['javascript', 'python', 'java', 'react']);
const requiredSkills = new Set(['python', 'java', 'sql']);
const commonSkills = techSkills.intersection(requiredSkills);
console.log([...commonSkills]); // ['python', 'java']

difference() Method

The difference() method returns a new Set containing elements that exist in the original Set but not in the provided Set. This operation computes A minus B (A \ B)--elements that are in A but NOT in B. In Venn diagram terms, this is the part of circle A that does not overlap with circle B. Unlike union and intersection, difference is not commutative--A.difference(B) gives different results than B.difference(A):

const allUsers = new Set(['alice', 'bob', 'charlie', 'diana']);
const activeUsers = new Set(['bob', 'diana', 'eve']);
const inactiveUsers = allUsers.difference(activeUsers);
console.log([...inactiveUsers]); // ['alice', 'charlie']

MDN Web Docs - Set.prototype.difference()

symmetricDifference() Method

The symmetricDifference() method returns elements that exist in either Set but not in both. This is equivalent to the XOR (exclusive OR) operation on sets--elements that are in exactly one of the sets, but not in both. Symmetric difference can also be computed as (A.difference(B)).union(B.difference(A)) or equivalently (A.union(B)).difference(A.intersection(B)):

const groupA = new Set([1, 2, 3, 4]);
const groupB = new Set([3, 4, 5, 6]);
const uniqueToEither = groupA.symmetricDifference(groupB);
console.log([...uniqueToEither]); // [1, 2, 5, 6]

2ality - ECMAScript 2025 Set Methods

Comparison Methods: isSubsetOf, isSupersetOf, isDisjointFrom

isSubsetOf()

Returns true if all elements of the Set are also in the provided Set. A set A is a subset of B (written A ⊆ B) if every element of A exists in B. This relationship means that whenever A contains an element, B must also contain it. By mathematical convention, the empty set is a subset of all sets, and any set is a subset of itself:

const primaryColors = new Set(['red', 'blue', 'yellow']);
const allColors = new Set(['red', 'blue', 'yellow', 'green', 'orange']);
console.log(primaryColors.isSubsetOf(allColors)); // true
console.log(allColors.isSubsetOf(primaryColors)); // false

isSupersetOf()

Returns true if the Set contains all elements of the provided Set. This is the inverse relationship of isSubsetOf--if A.isSupersetOf(B) returns true, then B.isSubsetOf(A) is also true. A set is always a superset of itself and a superset of the empty set:

const allColors = new Set(['red', 'blue', 'yellow', 'green', 'orange']);
const primaryColors = new Set(['red', 'blue', 'yellow']);
console.log(allColors.isSupersetOf(primaryColors)); // true

isDisjointFrom()

Returns true if the Set and provided Set have no elements in common. Two sets are disjoint if their intersection is empty--this means no element exists in both sets. By mathematical convention, the empty set is disjoint from everything, and a set is never disjoint from itself (unless it is empty):

const evenNumbers = new Set([0, 2, 4, 6, 8]);
const oddNumbers = new Set([1, 3, 5, 7, 9]);
console.log(evenNumbers.isDisjointFrom(oddNumbers)); // true

2ality - ECMAScript 2025 Set Methods

Value Equality and SameValueZero

Set uses the SameValueZero algorithm for determining value equality. This is similar to strict equality (===) with one important difference: NaN is considered equal to itself. For primitive values, SameValueZero uses strict equality, meaning '5' (string) and 5 (number) are different values. For object values, equality is based on object identity--two different objects with identical properties are not considered equal within a Set:

const numbers = new Set();
numbers.add(NaN);
console.log(numbers.has(NaN)); // true

// Object references are compared by identity
const obj1 = { id: 1 };
const obj2 = { id: 1 };
numbers.add(obj1);
console.log(numbers.has(obj1)); // true
console.log(numbers.has(obj2)); // false

Performance Considerations

When Set Outperforms Array

The has() method's constant-time complexity makes Sets dramatically faster than array-based membership testing for large collections. Sets typically use hash tables internally, providing O(1) average-case lookups regardless of collection size. Our AI automation services leverage these performance optimizations when building intelligent systems that process large datasets efficiently:

// Set.has() is O(1), Array.includes() is O(n)
const largeSet = new Set(Array.from({ length: 10000 }, (_, i) => i));
const largeArray = [...largeSet];

largeSet.has(5000); // Constant time
largeArray.includes(5000); // Linear scan

Memory Considerations

Sets have higher memory overhead per element compared to arrays. Consider this when working with very large datasets:

• Use Set for: frequent membership testing, ensuring uniqueness, mathematical operations
• Consider Array for: small collections, memory-constrained environments, sequential access patterns

For modern web applications, understanding these trade-offs helps developers make informed decisions about data structures. Our web development services team regularly applies these patterns when building scalable JavaScript applications.

MDN Web Docs - Set

Common Use Cases

Deduplication

The most straightforward use case for Set is removing duplicates:

const userInput = ['apple', 'banana', 'apple', 'cherry', 'banana'];
const uniqueFruits = [...new Set(userInput)];
console.log(uniqueFruits); // ['apple', 'banana', 'cherry']

Membership Testing and Caching

Sets excel at scenarios requiring frequent membership checks:

class Cache {
 constructor() {
 this.items = new Set();
 }
 has(key) { return this.items.has(key); }
 add(key) { this.items.add(key); return this; }
}

const visitedPages = new Set();
function visitPage(pageUrl) {
 if (!visitedPages.has(pageUrl)) {
 visitedPages.add(pageUrl);
 }
}

Mathematical Set Operations

The new ECMAScript 2025 methods enable elegant mathematical set operations:

const usersWithAccess = new Set(['alice', 'bob', 'charlie']);
const usersOnline = new Set(['bob', 'diana', 'eve']);

const commonUsers = usersWithAccess.intersection(usersOnline);
const uniqueUsers = usersWithAccess.difference(usersOnline);

TypeScript Integration

In TypeScript, Set supports generic type parameters:

const ids: Set<number> = new Set([1, 2, 3, 4, 5]);
ids.add(6);
// ids.add('string'); // TypeScript error

function findIntersection<T>(setA: Set<T>, setB: Set<T>): Set<T> {
 return setA.intersection(setB);
}

The SetReadOperations interface for the new methods:

interface SetReadOperations<T> {
 readonly size: number;
 has(value: T): boolean;
 keys(): Iterator<T>;
}

TypeScript's type safety combined with JavaScript Set methods creates robust, type-safe applications. When building enterprise-grade applications, these patterns help maintain code quality and reduce runtime errors.

Best Practices

Choosing the Right Data Structure

• Use Set for unique values and frequent membership testing
• Use Map for key-value pairs with efficient key lookups
• Use Array for ordered collections, index access, or when you need duplicate values

Immutability Patterns

// Create new Set instead of mutating
const original = new Set([1, 2, 3]);
const updated = new Set([...original, 4]);

// New methods return new Sets (immutable operations)
const setA = new Set([1, 2, 3]);
const setB = new Set([2, 3, 4]);
const union = setA.union(setB); // Original sets unchanged

Error Handling

function safeUnion(setA, setB) {
 if (!(setA instanceof Set)) {
 throw new TypeError('First argument must be a Set');
 }
 return setA.union(setB);
}

Mastering JavaScript data structures like Set is essential for writing efficient code. Our web development services include code optimization and performance tuning to help applications run smoothly.

Sources

1. MDN Web Docs: Set
2. MDN Web Docs: Set.prototype.difference()
3. MDN Web Docs: Set.prototype.union()
4. 2ality: ECMAScript 2025 Set Methods