In a previous article, I covered - a data type very similar to objects, but with some key differences. Javascript has other data types too, and one you may not know much about is . A in Javascript is a unique list of values, similar to the . Javascript Maps Set Set set data type in Python In this guide, we'll be looking at how sets work. What are Javascript Sets? Javascript sets are a useful way of creating a unique list, which can be mutated, but contains duplicates. A in Javascript is a great way to check if a value exists in a specified list of other values. Javascript sets are useful because they are typically faster than something like - so they provide an efficient and optimized way of checking if a value exists in a set of other values. no Set Array.includes To create a new set, we use the constructor: new Set() let mySet = new Set(); Basic Set Operations It is one thing to initialize a new set, but how do we actually use it? has a number of operations, many of which will be familiar if you read my guide on maps. Let's take a look Set Adding elements to a Set The method is used to add elements to a set: Set.add() let mySet = new Set();
mySet.add(5);
console.log(mySet); // Set(1) {5} Sets can contain any data type - so you can add objects, numbers, strings, or anything else which you desire. If you try to add the same value twice, it will only appear in the set once: let mySet = new Set();
mySet.add(5);
mySet.add(5);
console.log(mySet); // Set(1) {5} Deleting elements from a Set To delete a single element from a set in Javascript, you can use the method: Set.delete() let mySet = new Set();
mySet.add(5);
mySet.delete(5);
console.log(mySet); // Set(0) {} You can also use the method to clear all items from a set: Set.clear() let mySet = new Set();
mySet.add(5);
mySet.add(10);
mySet.clear();
console.log(mySet); // Set(0) {} Deleting objects from a Set Interestingly, objects are still created with separate references, so you can't delete an object from a set using the method. Trying to do so still results in the object item appearing in the set: Set.delete() let mySet = new Set();
mySet.add({o: 4});
mySet.delete({o: 4});
console.log(mySet); // Set(1) {{o: 4}} Instead, if you want to delete an object from a set, you have to loop through the set using or something similar. After finding the element you want to delete, simply delete it as normal: forEach let mySet = new Set();
mySet.add({o: 4});
mySet.forEach((x) => { 
    if(x.o == 4) {
        mySet.delete(x)
    }
});
console.log(mySet); // Set(0) {} Set keys and entries Sets in Javascript also have and methods. All sets are essentially a kind of array, so using simply returns an iterable set of keys from that set, as shown below: Set.keys() Set.entries() Set.keys() let mySet = new Set();
mySet.add(5);
mySet.add(10);
console.log(mySet.keys()); // SetIterator {5, 10} is quite strange, since as I sort of mentioned, sets don't really have keys. In Javascript, typically an method returns the key value pairs from a data structure in an array format, like . Since sets don't have keys, just returns the same value for both key and value. The main reason this method exists is to provide consistency with the data type: Set.entries() entries() [key, value] Set.entries() Map let mySet = new Set();
mySet.add(5);
mySet.add(10);
let setEntries = mySet.entries();

for(let x of setEntries) {
    console.log(x);
    // Returns [ 5, 5 ], [ 10, 10 ]
} Checking Set Membership The main use case for sets in Javascript is checking membership. This is slightly faster than using something like . To check set membership, you can use the method. It returns , if the set contains the item, and if it does not: Array.includes() Set.has() true false let mySet = new Set();
mySet.add(5);
mySet.add(10);
mySet.add(20);
console.log(mySet.has(10)); // true Again, this will not work with objects exactly, since an object has a different reference when checked using . As such, to check if an object is within a set, you must loop through it and check some value within the object: has let mySet = new Set();
mySet.add({o: 4});
mySet.forEach((x) => { 
    if(x.o == 4) {
        // the object is in the set
    }
}); Checking the size of a set While arrays have , sets have . To check the size or length of a set, we can't use , like we normally would. Instead, the size of a set is found using : .length .size .length .size let mySet = new Set();
mySet.add(5);
mySet.add(10);
mySet.add(20);
console.log(mySet.size); // Returns 3 Iterating over a Set Sets themselves are able to be looped through with a simple for loop: let mySet = new Set();
mySet.add(5);
mySet.add(10);
mySet.add(20);
for(let x of mySet) {
    console.log(x); // Returns 5, 10, 20
} However, sets also come with the method attached, so you can use that too. Typically loops are faster, though: forEach() for let mySet = new Set();
mySet.add(5);
mySet.add(10);
mySet.add(20);
mySet.forEach(() => {
    console.log(x); // Returns 5, 10, 20
} As well as this, sets come with an iterator method attached too. You can access it like shown in the code below, and then use to iterate through each item in a set. You may not have seen this notation before, but many data structures and prototypes contain an iterator method. Here, we access it via . next() mySet[Symbol.iterator]() let mySet = new Set();
mySet.add(5);
mySet.add(10);
let setIterator = mySet[Symbol.iterator]();

console.log(setIterator.next()); // Returns { value: 5, done: false }
console.log(setIterator.next()); // Returns { value: 10, done: true } Conclusion Sets are a super cool and little-used data structure in Javascript, which give us a efficient way to check an item for its membership in another set of items. They are a little like arrays, but with a very specific purpose. If you've enjoyed this, you might also like my . Javascript Handbook I hope you enjoyed this guide to sets, and have a great day. Also Published Here

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Super

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Javascript Sets: An Essential Guide

Javascript Sets: An Essential Guide

Too Long; Didn't Read

Company Mentioned

Johnny Simpson

STORY’S CREDIBILITY

Code License

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Javascript Sets: An Essential Guide

Too Long; Didn't Read

Company Mentioned

Johnny Simpson

STORY’S CREDIBILITY

Code License

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES