JavaScript Sets: A Comprehensive Guide

As a JavaScript developer, you may have come across the term “sets” when working with data structures. Sets are essential to any programming language, and JavaScript is no exception. In this article, we’ll dive deep into the world of JavaScript sets, including what they are, how to use them, and some best practices to follow.

What are Sets?

In JavaScript, a set is an object that allows you to store unique values of any type. This means that you can’t have duplicates in a set. The values can be of any type, including primitive types like strings and numbers, and even objects and functions.

You can create a set using the built-in Set() constructor, like so:

const mySet = new Set();

This creates an empty set. You can also pass an iterable object to the constructor to initialize the set with some values, like this:

const mySet = new Set([1, 2, 3]);

In this case, mySet will contain the values 1, 2, and 3.

Adding and Removing Values

You can add values to a set using the add() method, like this:

const mySet = new Set();
mySet.add(1);
mySet.add("two");
mySet.add({ name: "John" });

In this example, we’re adding a number, a string, and an object to the set. Note that we’re using different types of values, as sets can store values of any type.

To remove a value from a set, you can use the delete() method, like this:

mySet.delete("two");

This will remove the string “two” from the set. If the value isn’t in the set, nothing happens.

Checking for the Existence of Values

You can check if a value exists in a set using the has() method, like this:

Set.has(1); // true
mySet.has("two"); // false

This will return true if the value exists in the set, and false otherwise.

Getting the Size of a Set

You can get the number of values in a set using the size property, like this:

mySet.size; // 2

This will return the number of values in the set.

Iterating Over a Set

You can iterate over the values in a set using the forEach() method or the for…of loop, like this:

mySet.forEach(value => console.log(value));
// Output:
// 1
// { name: "John" }

for (const value of mySet) {
  console.log(value);
}
// Output:
// 1
// { name: "John" }

This will output each value in the set.

Using Sets to Remove Duplicates

One of the most common use cases for sets is to remove duplicates from an array. You can do this by creating a new set from the array, which will remove any duplicates, and then converting the set back to an array, like this:

const myArray = [1, 2, 2, 3, 3, 3];
const uniqueValues = [...new Set(myArray)];
console.log(uniqueValues); // [1, 2, 3]

In this example, we’re creating a new set from the array myArray, which removes any duplicates. We’re then using the spread operator (...) to convert the set back to an array, which gives us an array with only the unique values.

Using Sets for Set Operations

Sets also provide a convenient way to perform set operations, such as union, intersection, and difference. To perform these operations, you’ll need to create two or more sets and then use the built-in methods to combine or compare them.

Union

The union of two sets contains all the unique values from both sets. You can create the union of two sets using the union() method, like this:

const set1 = new Set([1, 2, 3]);
const set2 = new Set([3, 4, 5]);

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

In this example, we’re creating two sets (set1 and set2) with some values, and then creating a new set (unionSet) that contains all the values from both sets.

Intersection

The intersection of two sets contains only the values that exist in both sets. You can create the intersection of two sets using the intersection() method, like this:

const set1 = new Set([1, 2, 3]);
const set2 = new Set([3, 4, 5]);

const intersectionSet = new Set([...set1].filter(value => set2.has(value)));
console.log(intersectionSet); // Set { 3 }

In this example, we’re creating two sets (set1 and set2) with some values, and then creating a new set (intersectionSet) that contains only the values that exist in both sets.

Difference

The difference of two sets contains only the values that exist in the first set but not in the second set. You can create the difference of two sets using the difference() method, like this:

const set1 = new Set([1, 2, 3]);
const set2 = new Set([3, 4, 5]);

const differenceSet = new Set([...set1].filter(value => !set2.has(value)));
console.log(differenceSet); // Set { 1, 2 }

In this example, we’re creating two sets (set1 and set2) with some values, and then creating a new set (differenceSet) that contains only the values that exist in set1 but not in set2.

Best Practices for Using Sets

Now that you have a good understanding of how to use sets in JavaScript, here are some best practices to follow:

Use Sets for Unique Values

Sets are ideal for storing unique values. If you need to store values that may have duplicates, you should use an array or another data structure.

Use the has() Method to Check for Existence

When checking if a value exists in a set, use the has() method instead of looping over the set using forEach() or for...of. The has() method is much faster and more efficient.

Use Sets for Set Operations

Sets provide a convenient way to perform set operations, such as union, intersection, and difference. If you need to perform these operations, consider using sets instead of looping over arrays.

Be Mindful of Memory Usage

Sets can use up a lot of memory if you’re storing a large number of values. Be mindful of memory usage and consider using other data structures if memory is a concern.

Use WeakSet for Non-Primitive Values

If you need to store non-primitive values in a set, consider using a WeakSet instead of a regular Set. WeakSet is

designed to hold only objects and provides a way to store weak references to objects, which means that if an object is no longer used anywhere else in your code, it will be automatically removed from the WeakSet.

Conclusion

Sets are an essential part of any programming language, and JavaScript is no exception. They provide a way to store unique values of any type and can be used for a variety of purposes, including removing duplicates from arrays and performing set operations.

In this article, we’ve covered the basics of using sets in JavaScript, including creating and initializing sets, adding and removing values, checking for the existence of values, getting the size of a set, and iterating over a set. We’ve also covered some best practices to follow when using sets, such as using them for unique values and set operations, being mindful of memory usage, and using WeakSet for non-primitive values.

With this knowledge, you should be well-equipped to use sets in your JavaScript projects and take advantage of their many benefits. Happy coding!

📕 Related articles about Javascript

• JavaScript Data Types
• JavaScript Type Conversion: Understanding the Ins and Outs
• Javascript Class Inheritance
• How to Use Javascript for Web Animations
• JavaScript Date Formats: A Comprehensive Guide
• JavaScript Arithmetic