Best JavaScript Sets in 2024: Everything You Need to Know

Share this content:

JavaScript Sets are a game changer in 2024! Imagine a way to store unique values effortlessly, without worrying about duplicates. With JavaScript Sets, you can achieve cleaner, more efficient code. This powerful tool from ES6 is still as relevant as ever, helping developers manage data with ease.

What Are JavaScript Sets?

A Set is a JavaScript collection of unique values, which can only store one of each value. Sets are ideal when you want to guarantee no duplicates in your data, for example, filtering out unique items from a dataset, deleting or tracking unique user ids.

How Do JavaScript Sets Work?

Sets in JavaScript work by allowing you to add values in a way that automatically prevents duplicates. Once added, values can be checked for their existence, removed, or iterated over—just like arrays, but with the added benefit of uniqueness.

Let’s dive deeper into how Sets operate and how you can harness their full potential in 2024!

1. Why Use JavaScript Sets in 2024?

Sets are a JavaScript data structure that is among the most used tools of the modern programmer toolbelt to take care of data that needs to be unique. So what is the issue, why is 2024 such a major year for them?

Advantages of Using Sets:

Unique Values: Sets ensure that no duplicate elements are stored, which simplifies data management.
Efficient Data Checking: Sets make it easy to check whether an item exists in a collection.
Fast Operations: Sets are optimized for quickly adding, deleting, and checking elements.

In scenarios where duplicates are unwanted or unnecessary, using a Set can reduce both complexity and errors in your code.

2. Creating a Set in JavaScript

Creating a Set in JavaScript is simple and efficient. Unlike arrays, which allow duplicates, a Set only accepts unique values.

Example of Creating a Set:

const mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(2);  // Duplicate values are ignored
console.log(mySet);  // Output: Set(2) {1, 2}

In the above example, even though we try to add 2 twice, the Set only keeps one instance. This is one of the core benefits of using a Set—automatic uniqueness!

Adding Multiple Values to a Set:

You can also initialize a Set with multiple values at once:

Sets = new Set([1, 2, 3, 4, 5]); 
console. console.log(Sets); // Set(5) {1, 2, 3, 4, 5}

This allows you to fill Set with known values easily which is a very neat and organised set of unique collections.

3. Key Methods of JavaScript Sets

There are a few methods in-built in Sets that can be used to modify data and also access it in various ways. These are a few of the core techniques that you should know in 2024:

3.1 `add()`: Adding Items

You can add new values to a Set using the add() method. Remember, duplicate values will be ignored.

Sets.add(6);
console.log(Sets);  // Output: Set(6) {1, 2, 3, 4, 5, 6}

3.2 `delete()`: Removing Items

To remove a specific value from a Set, use the delete() method.

Sets.delete(3);
console.log(Sets);  // Output: Set(5) {1, 2, 4, 5, 6}

3.3 `has()`: Checking for Values

The has() method checks if a value exists in the Set.

console.log(Sets.has(2));  // Output: true
console.log(Sets.has(7));  // Output: false

3.4 `clear()`: Removing All Items

If you need to remove all elements from a Set, use clear().

Sets.clear();
console.log(Sets);  // Output: Set(0) {}

4. Iterating Over a Set

Just like arrays, Sets can be iterated over using loops. This allows you to access each unique value stored in the Set.

Example of Iterating with `for...of`:

const Sets = new Set([1, 2, 3, 4, 5]);
for (const value of Sets) {
    console.log(value);
}

The for...of loop makes it easy to iterate over each element in the Set, outputting them one by one.

Using `forEach()` with Sets:

You can also use the forEach() method to iterate over the Set.

Sets.forEach(value => console.log(value));

Both of these methods allow you to go through each item in the Set, which obviously makes it really easy to use them to do stuff with each one.

5. Common Use Cases of JavaScript Sets

JavaScript Sets are a flexible data structure and can be applied for different scenarios. The following use cases are expected to be most common in 2024;

5.1 Filtering Unique Values

One of the most popular uses of Sets is filtering unique values from an array.

const number = [1, 2, 3, 3, 4, 5, 5];
const uniqueNumber = [...new Set(numbers)];
console.log(uniqueNumber);  // Output: [1, 2, 3, 4, 5]

Filtering unique values from an array is one of the most popular use cases of Sets.

5.2 Storing Unique User IDs

If you’re building an application that manages users, Sets can ensure that each user has a unique ID

const userIds = new Set();
userIds.add('user1');
userIds.add('user2');
console.log(userIds.has('user1'));  // Output: true

5.3 Data Caching and Lookup

Example of Set Set is a perfect example for when you want to check if we already have an item before doing anything with it, like a caching.

What is different between Sets and arrays?

Although Sets & Arrays both store collections of data, their role is different. Arrays are convenient if an ordered list is needed and duplicates are accepted, while Sets are appropriate and intended for a collection of unique items.

When to Use a Set:

When you need to store only unique values.
When you require fast lookups to check if an item exists.
When duplicates could cause errors or unnecessary complexity.

When to Use an Array:

When the order of items is important.
When you need to allow duplicate values.
When you frequently need to access items by their index.

Conclusion: Master JavaScript Sets in 2024

In 2024, JavaScript Sets remain a powerful tool for handling collections of unique values. Whether you’re filtering duplicates, managing user IDs, or improving your code’s efficiency, Sets offer a simple yet effective solution.