JonathanRayGarcia.com

What is Set and what can we do with it? Let's find out!

A Set in javascript is a collection of data that contains only unique entries. So think of an array that only contains unique values, with no duplicates.

const mySet = new Set();

In the example above, we are creating an empty Set. Before we look further into how to add values to the Set, let's quickly look at how to initialize a new Set with some data.

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

As you can see, to initialize a Set with some data, we pass an array of values to the Set constructor. These values can be any type you'd like, but be careful of more complex types outside of strings and numbers. They don't dedupe as you would expect.

Next we will look at how to add values to a Set.

const mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(3);

By simply calling the .add method on Set, we can add any value to the Set. Now that we have added some values, it's time to look at how to access those values.

• .has - check if a value exists in the current Set
• .size - get the number of values in the current Set
• .forEach - iterate over the values in the current Set

There are additional methods available to access properties of the Set, but for now we will focus on these three.

Let's first look at .has. As the name implies, we are going to check if a value exists in the current Set. .has returns a boolean value, so we can use it in an if statement to check if a value exists in the Set.

const mySet = new Set([1,2,3,4,5]);
console.log(mySet.has(1)); // true
console.log(mySet.has(5)); // true
console.log(mySet.has(6)); // false

Next let's look at .size. This returns the number of values in the current Set. A quick note, .size is a property of the Set and does not need to be called like a function.

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

And finally, let's look at .forEach. This is a method that allows us to iterate over the values in the current Set. It takes a callback function as an argument, which will be called for each value in the Set. This works almost exactly the same as .forEach on arrays except we don't have an index value. Only the current value and the full Set.

const mySet = new Set([1,2,3,4,5]);
mySet.forEach((value, set) => {
console.log(value);
});

Now that we know how to create a Set and access the values in that Set. Let's now look at how to remove items.

• .delete - remove a value from the current Set
• .clear - remove all values from the current Set

The .delete method works similar to the .add method but instead of adding a value we remove a value from the Set.

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

In this example, we started with a new Set initialized with 5 values. We then called .delete on the Set. Once we called .delete, we then check the .has method to verify that the value was removed. We also check the .size property to verify that the size of the Set is now 4.

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

By calling .clear on the Set, we can remove all the values in the Set. And as you can see, once we call .clear, the size of the Set is now 0. This is a great way to reset a Set without having to create a new one. Just be careful, this will remove all values in the Set.

And now for the final thing we will look at, is how Set automatically dedupes values. This is a great way to quickly filter out duplicates.

const mySet = new Set([1,2,3,4,5,1,2,3,4,5]);
console.log(mySet.size); // 5
mySet.forEach((value, set) => {
console.log(value);
});

As you can see, we initialized the Set with 10 values, but only 5 of them are unique. So when we check the size of the Set, you can see that it only contains 5 values. Even though we passed 10 items in. Finally, when we iterate over the Set, we can see that it only contains unique values.

Now that we have gone over the basics of Set, get out there and start setting some data!