JavaScript Sets: A Comprehensive Guide

JavaScript Sets are a special type of collection that allows you to store unique values of any type, whether it be primitive values or object references. Unlike arrays, Sets automatically eliminate duplicate entries, making them useful for various tasks like data deduplication and ensuring unique items.

What is a Set?

A Set is a built-in object in JavaScript that lets you store unique values. It does not allow duplicate values, and its elements are ordered based on the order of insertion.

Creating a Set

To create a Set, you use the Set constructor. Here’s a basic example:

const mySet = new Set();

You can also initialize a Set with an array of values:

const numbers = [1, 2, 3, 4, 5];
const numberSet = new Set(numbers);

CRUD Operations on Sets

1. Create (Add Values)

To add values to a Set, use the add method. This method will add a value to the Set if it is not already present.

const mySet = new Set();
mySet.add(1);   // Set: {1}
mySet.add(2);   // Set: {1, 2}
mySet.add(3);   // Set: {1, 2, 3}

2. Read (Access Values)

You can check if a Set contains a specific value using the has method. To iterate over the values, you can use methods like forEach, for...of, or the spread operator.

Check if a value exists:

console.log(mySet.has(2)); // true
console.log(mySet.has(4)); // false

Iterate over values:

// For Each Loop
mySet.forEach(value => {
  console.log(value);
});
 
// For Of Loop
for (const value of mySet) {
  console.log(value);
}
 
// Using Spread Operator
const valuesArray = [...mySet];
console.log(valuesArray); // [1, 2, 3]

3. Update (Modify Values)

Sets do not provide a direct way to update values since they only store unique values. However, you can remove an old value and add a new one if you need to change an existing value.

// Example: Updating value 2 to 10
mySet.delete(2); // Remove old value
mySet.add(10);   // Add new value
console.log(mySet); // Set: {1, 3, 10}

4. Delete (Remove Values)

To remove values from a Set, use the delete method. You can also clear all values using the clear method.

Remove a specific value:

mySet.delete(1);
console.log(mySet); // Set: {3, 10}

Clear all values:

mySet.clear();
console.log(mySet); // Set: {}

Set Methods and Properties

add(value): Adds a new value to the Set.

mySet.add(7);

delete(value): Removes the specified value from the Set.

mySet.delete(3);

has(value): Checks if the Set contains the specified value.

console.log(mySet.has(7)); // true

clear(): Removes all elements from the Set.

mySet.clear();

size: Returns the number of values in the Set.

console.log(mySet.size); // 3

entries(): Returns an iterator of [value, value] pairs.

for (const entry of mySet.entries()) {
  console.log(entry);
}

keys(): Returns an iterator of values (same as entries' values).

for (const key of mySet.keys()) {
  console.log(key);
}

values(): Returns an iterator of values (same as keys).

for (const value of mySet.values()) {
  console.log(value);
}

forEach(callback): Executes a callback function once for each value in the Set.

mySet.forEach(value => {
  console.log(value);
});

Use Cases for Sets

Removing Duplicates: Convert an array to a Set to remove duplicate values and then back to an array if needed.

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(numbers)];

Storing Unique Values: Use Sets to ensure that a collection contains no duplicates.
Efficient Lookups: Sets provide efficient O(1) average time complexity for lookups, additions, and deletions.

Conclusion

JavaScript Sets offer a powerful and efficient way to manage unique collections of values. By understanding how to create, manipulate, and iterate over Sets, including performing CRUD operations, you can handle unique data more effectively in your JavaScript applications.

Flatten Objects JavaScript Map