DEV Community

Cover image for Everything you need to know about JavaScript Set
Tapas Adhikary
Tapas Adhikary

Posted on • Originally published at blog.greenroots.info

Everything you need to know about JavaScript Set

#javascript #beginners #webdev #codenewbie

If you like what I write, you may want to subscribe to my newsletter. Feel free to @ me on twitter for any discussion.

JavaScript objects and arrays are the most used data structures act as collections of data. Until ES6 there were limited options with developers. But with ES6 we have got two new flexible and easy to use data structures, Map and Set.

In this article, we will learn about Set and we are going to make some salad(πŸ₯—) too!

Set

A Set is a collection of unique(distinct) elements where each of the elements can be of any type. The Set is also an ordered collection of elements. It means the retrieval order of the elements will be the same as that of the insertion order.

The JavaScript Set behaves the same way as the mathematical set.

Create a Set,

const set = new Set();
console.log(set);
Enter fullscreen mode Exit fullscreen mode

Output,

Set(0) {}
Enter fullscreen mode Exit fullscreen mode

Initialize a Set and create,

const fruteSet = new Set(['πŸ‰', '🍎', '🍈', '🍏']);
console.log(fruteSet);
Enter fullscreen mode Exit fullscreen mode

Output,

Set(4) {"πŸ‰", "🍎", "🍈", "🍏"}
Enter fullscreen mode Exit fullscreen mode

Set methods - Let's make some Salad πŸ₯—!

Set has methods to add an element to it, delete elements from it, check if an element exists in it, and to clear it completely. Let us see it by making some salad!

Add vegetables

Use the add(element) method to add an element to the Set.

// Create a set - saladSet
const saladSet = new Set();

// Add some vegetables to it
saladSet.add('πŸ…'); // tomato
saladSet.add('πŸ₯‘'); // avacado
saladSet.add('πŸ₯•'); // carrot
saladSet.add('πŸ₯’'); // cucumber

console.log(saladSet);
Enter fullscreen mode Exit fullscreen mode

Alright, we have added the vegetables. The output so far,

Set(4) {"πŸ…", "πŸ₯‘", "πŸ₯•", "πŸ₯’"}
Enter fullscreen mode Exit fullscreen mode

Add another Cucumber - Can we?

I love cucumber! How about adding one more of it. Can I? Oh no, I can't. The Set is a collection of unique elements.

saladSet.add('πŸ₯’');
console.log(saladSet);
Enter fullscreen mode Exit fullscreen mode

Output is still as before, nothing got added to the saladSet.

Set(4) {"πŸ…", "πŸ₯‘", "πŸ₯•", "πŸ₯’"}
Enter fullscreen mode Exit fullscreen mode

Does it have a Carrot(πŸ₯•) or a Broccoli(πŸ₯¦)?

Use the has(element) method to search an element in a Set.

// The salad has a πŸ₯•, so returns true
console.log('Does the Salad has Carrot?', saladSet.has('πŸ₯•'));

// The salad doesn't have a πŸ₯¦, so returns false
console.log('Does the Salad has Broccoli?', saladSet.has('πŸ₯¦'));
Enter fullscreen mode Exit fullscreen mode

Lets remove the Avacado(πŸ₯‘)

User the delete(element) method to remove an element from a Set.

saladSet.delete('πŸ₯‘');
console.log('I do not like πŸ₯‘, remove from the salad:', saladSet);
Enter fullscreen mode Exit fullscreen mode

Now our salad set is,

I do not like πŸ₯‘, remove from the salad: Set(3) {"πŸ…", "πŸ₯•", "πŸ₯’"}
Enter fullscreen mode Exit fullscreen mode

Let's clean up, finish the salad!

Use the clear() method to remove all the elements from a Set.

saladSet.clear();
console.log('Finished it:', saladSet);
Enter fullscreen mode Exit fullscreen mode

Output,

Finished it: Set(0) {}
Enter fullscreen mode Exit fullscreen mode

Iteration with Set

The Set has a method called, values() which returns a SetIterator to get all the values.

// Create a Set
const houseNos = new Set([360, 567, 101]);

// Get the SetIterator using the `values()` method
console.log(houseNos.values());
Enter fullscreen mode Exit fullscreen mode

Output,

SetIterator {360, 567, 101}
Enter fullscreen mode Exit fullscreen mode

We can use forEach or for-of loop on this to retrieve the values.

Interesting fact: JavaScript emphasizes to make Set compatible with Map. That's why we find two Set methods, keys() and entries() like Map.

As Set doesn't have a key, the keys() method returns a SetIterator to retrieve values.

console.log(houseNos.keys());
Enter fullscreen mode Exit fullscreen mode

Output,

SetIterator {360, 567, 101}
Enter fullscreen mode Exit fullscreen mode

Try entries() now. For Map it returns the iterator to retrieve key-value pairs. There is no key for the Set. Hence the entries() method returns a SetIterator to retrieve the value-value pairs.

console.log(houseNos.entries());
Enter fullscreen mode Exit fullscreen mode

Output,

SetIterator {360 => 360, 567 => 567, 101 => 101}
Enter fullscreen mode Exit fullscreen mode

Let's Enumerate

We can enumerate over a Set using forEach and for-of loop.

houseNos.forEach((value) => {
   console.log(value);
});
Enter fullscreen mode Exit fullscreen mode

Output,

360
567
101
Enter fullscreen mode Exit fullscreen mode

With for-of,

for(const value of houseNos) {
   console.log(value);
 }
Enter fullscreen mode Exit fullscreen mode

Set and object

A Set can have elements of any type, even objects.

// Create a person object
const person = {
   'name': 'Alex',
   'age': 32
 };

// Let us create a set and add the object to it
const pSet = new Set();
pSet.add(person);
console.log(pSet);
Enter fullscreen mode Exit fullscreen mode

Output,

image.png

No surprise. The Set contains one element that is an object. Let us now, change a property of the object and add it to the set again.

// Change the name of the person
person.name = 'Bob';

// Add the person object to the set again
pSet.add(person);
console.log(pSet);
Enter fullscreen mode Exit fullscreen mode

What do you think about the output? Two person objects or the one? Here is the output,

image.png

Set is the collection of unique elements. By changing the property of the object, we haven't changed the object itself. Hence Set will not allow duplicate elements.

Set and Array

An array, like a Set, allows adding and removing elements to it. But Set is different than array and it is not meant to replace array. Using Set as an add-on to array actually give more muscles.

The major difference between an array and Set is, array allows duplicate elements where Set is for distinct elements. Some of the Set operations(delete) are also faster than array operations(shift, splice).

The Set data structure is not a replacement of the array. Set along with array can solve interesting problems.

Convert Set to an array

In many situations, you may want to convert a Set to an array. In fact, it is very easy!

const arr = [...houseNos];
console.log(arr);
Enter fullscreen mode Exit fullscreen mode

Output,

image.png

Unique values from an array using Set

The most common usage of the Set data structure is to get unique values from an array.

// Create a mixedFruit array with few duplicate fruits
const mixedFruit = ['πŸ‰', '🍎', 'πŸ‰', '🍈', '🍏', '🍎', '🍈',];

// Pass the array to create a set of unique fruits
const mixedFruitSet = new Set(mixedFruit);

console.log(mixedFruitSet);
Enter fullscreen mode Exit fullscreen mode

Output,

Set(4) {"πŸ‰", "🍎", "🍈", "🍏"}
Enter fullscreen mode Exit fullscreen mode

Set Operations

It is very easy to perform the basic set operations like, union, intersection, diference, superset, subset etc with Set and array together. Let us take these two sets to perform these oprtations,

const first = new Set([1, 2, 3]);
const second = new Set([3, 4, 5]);
Enter fullscreen mode Exit fullscreen mode

Union

Alt Text

Union of the sets A and B, denoted A βˆͺ B, is the set of all items that is a member of A, or B, or both. For example. the union of {1, 2, 3} and {3, 4, 5} is the set {1, 2, 3, 4, 5}.

// Union
const union = new Set([...first, ...second]);
console.log('Union:', union);
Enter fullscreen mode Exit fullscreen mode

Output,

Union: Set(5)Β {1, 2, 3, 4, 5}
Enter fullscreen mode Exit fullscreen mode

Intersection

Alt Text

Intersection of the sets A and B, denoted A ∩ B, is the set of all objects that are members of both A and B. For example, the intersection of {1, 2, 3} and {3, 4, 5} is the set {3}.

// Intersection
const intersection = new Set([...first].filter(elem => second.has(elem)));
console.log('Intersection:', intersection);
Enter fullscreen mode Exit fullscreen mode

Output,

Intersection: Set(1)Β {3}
Enter fullscreen mode Exit fullscreen mode

Difference

image.png

Set difference of U and A, denoted U \ A, is the set of all members of U that are not members of A. The set difference {1, 2, 3} \ {3, 4, 5} is {1, 2}, while conversely, the set difference {3, 4, 5} \ {1, 2, 3} is {4, 5}.

// Difference
const difference = new Set([...first].filter(elem => !second.has(elem)));
Enter fullscreen mode Exit fullscreen mode

Output,

Difference: Set(2)Β {1, 2}
Enter fullscreen mode Exit fullscreen mode

Superset

Alt Text

A set A is a subset of a set B if all elements of A are also elements of B; B is then a superset of A.

// Is a superset?
const isSuperset = (set, subset) => {
  for (let elem of subset) {
     if (!set.has(elem)) {
         return false;
     }
  }
  return true;
}
console.log('Is Superset?', isSuperset(first, second));
Enter fullscreen mode Exit fullscreen mode

Output,

Is Superset? false
Enter fullscreen mode Exit fullscreen mode

Here is some more information about Set vs Array:

Conclusion

Set is a great data structure to use as an add-on with JavaScript arrays. It doesn't have a huge advantage over array though. Use it when you need to maintain a distinct set of data to perform set operations like, union, intersection, difference etc.

Here is the GitHub repository to find all the source code used in this article(and in the previous article on Map). If you like, please show your support by giving it a star(🌟).

GitHub logo atapas / js-collections-map-set

Repository to have example code to demonstrate JavaScript Map and Set data structures.

js-collections-map-set

Repository for example code to demonstrate JavaScript Map and Set data structures.

Set vs Array

set vs array

Set + Array = Better Together!

set and array

View on GitHub

Know more about the Set data structure from here,

You may also like,


If it was useful to you, please Like/Share so that, it reaches others as well. You can read my other articles from the GreenRoots Blog.

Feel free to @ me or follow me on twitter @tapasadhikary.

Top comments (0)

Read next

perisicnikola37 profile image

JavaScript SECRETS: Become a coding wizard!

Nikola Periőić -

itschrislojniewski profile image

Next js for E-Learning Platforms

Chris Lojniewski -

bazeng profile image

How To Configure Multiple Git Accounts with SSH on Your Local Machine

Samuel K.M -

jayaramviswanathr profile image

Choosing Your Tech Stack: A Developer's Journey

Viswanath R -