DEV Community

Cover image for What are JavaScript Sets?
Dani Schuhman
Dani Schuhman

Posted on

What are JavaScript Sets?

Photo by Ricardo Gomez Angel on Unsplash

JavaScript sets

JavaScript sets were introduced in ES6.

Set objects are collections of values. There can never be any duplicates inside of them, which can make them pretty useful depending on the situation.

In order to create a Set, we use the Set.() constructor, which will create a new Set object.

const colors = new Set([ 'Red', 'Green', 'Blue', 'Purple', 'Purple', 'Red', 'Red', 'Blue', 'Magenta']);

console.log(colors)
// Returns 
Set(5) {'Red', 'Green', 'Blue', 'Purple', 'Magenta'}
Enter fullscreen mode Exit fullscreen mode

A Set can hold mixed data types, just like an array. It is also iterable, like an array. However, there are two big differences between a Set and an array.

  • A Sets elements are unique.
  • The order of elements in a Set is irrelevant.

When creating a Set, if we pass in a string as the value, it is an iterable. Whatever is passed in, will become a set of unique characters, with the duplicates removed. Using the string Hello, if we pass it into a new Set constructor, the second l will be removed, and we'll be returned a set that consists of only {'H', 'e', 'l', 'o'}.

console.log(new Set('Hello'))
// Returns 
Set(4) {'H', 'e', 'l', 'o'}
Enter fullscreen mode Exit fullscreen mode

Working with Sets

There are several methods, and properties that can be used with Sets in order to manipulate the data.

The .add() method can add a new element onto our Set. But just as all values are unique in a set, if you try to add a value twice, the second one will be ignored.

colors.add('Yellow')
Set(6) {'Red', 'Green', 'Blue', 'Purple', 'Magenta', …}
Enter fullscreen mode Exit fullscreen mode

The .has() method can check to see if a set contains a specific element. It's similar to the .includes() method in arrays.

colors.has('Yellow')
// Returns 
true
Enter fullscreen mode Exit fullscreen mode

Unlike arrays, as the order doesn't matter in Set's, we can't pass in an index. Doing so will return undefined.

console.log(colors[0])
// Returns
undefined
Enter fullscreen mode Exit fullscreen mode

The .size property is similar to the .length property in arrays, and will return the size of our Set object.

colors.size
// Returns 
6
Enter fullscreen mode Exit fullscreen mode

We can delete elements from a set using the .delete() method.

colors.delete('Yellow')
// Returns
true 
colors
Set(5) {'Red', 'Green', 'Blue', 'Purple', 'Magenta'}
Enter fullscreen mode Exit fullscreen mode

Another method that can be used on a Set is the .clear() method, which will delete all of the elements of the set.

colors.clear()
colors 
// Returns
Set(0) {size: 0}
Enter fullscreen mode Exit fullscreen mode

We can also iterate over the items in a set, using both the .forEach() method, or a for/of loop.

for (let item of colors) console.log(item)
// Returns 
Red
Green
Blue
Purple
Magenta
Enter fullscreen mode Exit fullscreen mode

Converting between a Set and an Array.

If we wanted to convert an array into a Set, it's very simple. We can use the regular Set constructor on an array, and it will transform it.

let arr = ['Hello', 'how', 'are', 'you?']

let newSet = new Set(arr)
console.log(newSet)
// Returns 
Set(4) {'Hello', 'how', 'are', 'you?'}
Enter fullscreen mode Exit fullscreen mode

If we wanted to convert a Set into an Array, we can use the spread operator.

console.log([...newSet])
// Returns 
(4) ['Hello', 'how', 'are', 'you?']
Enter fullscreen mode Exit fullscreen mode

Sets also have the keys and values methods. keys is an alias for values, so both methods do the same thing pretty much. Using either of them will return a new iterator object, that yields the values for each element in the Set in the order they appear.

let iceCreamFlavors = new Set();
iceCreamFlavors.add('vanilla'); // vanilla
iceCreamFlavors.add('chocolate'); // chocolate
iceCreamFlavors.add('mint chocolate chip'); // mint chocolate chip

let setItr = iceCreamFlavors.values();

console.log(setItr.next().value);
console.log(setItr.next().value);
console.log(setItr.next().value);

Enter fullscreen mode Exit fullscreen mode

Conclusion

Sets are very easy to interact with thanks to how straightforward their methods are, and because of that can be a very useful tool. I hope that this introduction to them has helped explain just how helpful they can be.

Discussion (0)