JavaScript's Set
is a powerful and versatile data structure designed for storing unique values of any type. This guide dives deep into its features, methods, advantages, and nuances to help you make the most of it.
PermalinkWhat is a Set
?
A Set
in JavaScript is a collection of unique values. Unlike arrays, Set
automatically removes duplicate entries, ensuring all stored elements are distinct. It supports values of any data type, including primitives and objects.
PermalinkKey Features
Ensures Uniqueness: Prevents duplicates automatically.
Efficient Membership Checks:
Set.has()
provides fast lookups.Flexible Data Types: Stores any value type, including objects and other collections.
Order of Insertion: Maintains the order of element insertion.
PermalinkCore Methods and Examples
Permalink1. Adding Values
Use .add()
to insert elements into a Set
.
const mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(1); // Duplicate, will not be added
console.log(mySet); // Output: Set(2) { 1, 2 }
Permalink2. Deleting Values
Use .delete()
to remove a specific value.
mySet.delete(1);
console.log(mySet); // Output: Set(1) { 2 }
Permalink3. Checking Existence
Use .has()
to verify if a value exists in the Set
.
console.log(mySet.has(2)); // Output: true
Permalink4. Clearing All Values
Use .clear()
to remove all elements from the Set
.
mySet.clear();
console.log(mySet); // Output: Set(0) {}
Permalink5. Iterating Over Elements
Iterate through a Set
using a for...of
loop or forEach
.
mySet.add(3).add(4);
for (const value of mySet) {
console.log(value); // Output: 3, 4
}
mySet.forEach(value => console.log(value));
Permalink6. Converting to an Array
Convert a Set
to an array using the spread operator.
const arrayFromSet = [...mySet];
console.log(arrayFromSet); // Output: [3, 4]
PermalinkAdvanced Use Cases
PermalinkRemoving Duplicates from an Array
const numbers = [1, 2, 2, 3, 4, 4];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // Output: [1, 2, 3, 4]
PermalinkFinding Common Elements Between Arrays
Using Set
for intersections is both elegant and efficient.
const setA = new Set([1, 2, 3]);
const setB = new Set([2, 3, 4]);
const intersection = [...setA].filter(x => setB.has(x));
console.log(intersection); // Output: [2, 3]
PermalinkWhy Use Set
for Finding Common Elements b/w Arrays?
Automatic Uniqueness: Ensures clean data.
Faster Membership Check:
Set.has(x)
is typically faster thanarray.includes(x)
due to hash-based lookup.Clean Code: Expresses intent to work with unique values.
PermalinkStoring Objects in a Set
PermalinkObjects as Unique References
Set
can store objects, but it compares them by reference, not content.
const obj1 = { key: 'value' };
const obj2 = { key: 'value' }; // Separate object with identical content
const set = new Set();
set.add(obj1);
set.add(obj2);
console.log(set.size); // Output: 2 (obj1 and obj2 are different references)
PermalinkSame Object Reference
If the same object reference is added multiple times, it only appears once.
const obj = { key: 'value' };
set.add(obj);
set.add(obj);
console.log(set.size); // Output: 1
PermalinkUse Case: Tracking Unique Objects
const users = new Set();
const user = { id: 1, name: 'Alice' };
users.add(user);
users.add(user); // Ignored
console.log(users.size); // Output: 1
PermalinkLimitations
No Content Comparison: Objects with the same properties but different references are treated as distinct.
Memory Management: Objects in a
Set
persist as long as they are referenced. Use.delete()
or.clear()
to free memory.
PermalinkComparing Set.has()
vs. Array.includes()
Performance:
Set.has(value)
is typically O(1), whileArray.includes(value)
is O(n).Efficiency for Large Datasets:
Set
is better for frequent membership checks.
Example:
const largeArray = Array(1000000).fill(0).concat(1);
console.time("Set");
const largeSet = new Set(largeArray);
console.log(largeSet.has(1)); // Output: true
console.timeEnd("Set");
console.time("Array");
console.log(largeArray.includes(1)); // Output: true
console.timeEnd("Array");
PermalinkAdditional Features
Value Equality:
Set
uses the SameValueZero algorithm, treatingNaN
as equal toNaN
.const set = new Set([NaN, NaN]); console.log(set); // Output: Set(1) { NaN }
Safe Modification During Iteration: You can safely add or remove values while iterating over a
Set
.const set = new Set([1, 2, 3]); for (const value of set) { if (value % 2 === 0) set.delete(value); } console.log(set); // Output: Set(1) { 1 }
Size Property: Quickly determine the number of elements with
.size
.console.log(set.size); // Output: 1
PermalinkConclusion
JavaScript's Set
is a highly efficient and versatile data structure for handling unique values, optimizing membership checks, and performing operations like intersections or deduplication. Whether working with primitives or objects, understanding its nuances and limitations ensures you can leverage its full potential in your projects.
Join the DevHub community for more!
Written by
Developer. Founder, DevHub. Mentor.
Developer. Founder, DevHub. Mentor.