Working with Sets in JavaScript

Written by

Walter G.

Published on

February 18 2020

Modified on

August 02 2021

Filed under

javascript

ECMAScript 6 introduced the new Set type into its toolset. What are Set's? Essentially they are an ordered list of values that have no duplicates. This makes Set's super useful when attempting to clean data and also makes them high performance data structures, as search algorithms can bypass the duplication logic.

Follow along as I cover how to create Sets, add values to them, delete values and a neat way to de-dupe arrays super fast.

Creating Sets

Sets can be created simply by using the Set() constructor and by instantiating it as a new object.

let set1 = new Set();

Adding values

Adding values to a Set is as simple as calling the add() method and passing in the desired value.

set1.add(123);
set1.add('123');

Sets do not coerce values to any specific type. In the example above, JavaScript will treat the values 123 and '123' as two separate unique items.

If you were to try and add the same value to the Set, such as with the following:

set1.add(123);
set1.add(123);

To maintain the uniqueness principle of Sets, JavaScript would only include the value once in your set.

Checking with has()

You can check if a Set contains a certain value by using the has() method, which expects 1 argument, the value that you are checking for.

let set1 = new Set();
set1.add(1);
set1.add(2);


console.log(set1.has(2)); // returns true

Instantiate with an array

If you are looking for a quick way to remove duplicate values from an array, you can also call the Set() constructor with an array as an argument.

let set2 = new Set([1, 2, 3, 4, 4, 5, 5, 6]);

To maintain the uniqueness principle, JavaScript will strip all duplicate values from the array.

The Set() constructor will actually actually accept any iterable object as an argument.

Removing items

Sets() have a built-in delete() method that can be used to remove individual items from the Set.

let set1 = new Set();
set1.add(1);
set1.add(2);


set1.delete(2);

If you wish to clear the entire Set() of values, you can use the clear() method.

Working with forEach

The forEach method is used to iterate through Arrays in JavaScript. And it has also been included as a built-in method for iterating through Sets in ES6.

The forEach method takes in 1 argument, which will be a callback function with 3 parameters. And it is different from the array version. The 3 parameters are as follows: 

1. The value from the next position in the Set
2. The same value as the first argument
3. The Set from which the value is read

There is a weird quirk to notice with the parameter list. And that is that #1 and #2 from above, are the exact same value.

While that may seem like an accident, it isn't. When using forEach with arrays, the second argument refers to the index of the array item.

Set's however, do not have keys or index. In order to maintain consistency with the other implementations of forEach, the standards team kept the function the same. From a technical standpoint, you can consider the value and key to be identical in Sets.

let set1 = new Set([1, 2, 3]);


set1.forEach(function(value, key, ownset){


});

Converting a Set to an Array

ES6 makes converting a Set back to an Array a one-liner implementation.

let set1 = new Set([1, 2, 3, 3, 3, 4]);


let newArray = [...set1];

In this example, the Set will be initialized with the unique set of values from the passed in array and then re-converted back into an array.

This can be very useful when you quickly need to dedupe a set of data.

The biggest benefit of working with Sets is their overall performance compared to other forms of data structures.

Because the Set is always a unique list of values, there are various optimizations that the browser can perform when working with them.

Comment down below how you use Sets in your day to day coding.

Comments

No messages posted yet

Add comment