Why Set? It's a data structure that allows you to store unique values of any type. It's similar to an array but doesn't allow duplicate values. It's a great way to hold unique values of any kind. Sometimes you want to store unique values in an array, but you don't want to loop through the Array to check if the value already exists. That's where Set comes in handy.
In a previous article, we discussed Javascript Map. Set is similar to Map, but it only stores the keys, not the values. It's a great way to keep unique values of any type. It's overwhelming to use Map in so many cases. That's why let's talk about Set.
What is JavaScript Set?
Set objects are collections of values. A value in the Set may only occur once; it is unique in the Set's collection. You can iterate through the elements of a set in insertion order. The insertion order corresponds to the order in which each piece was inserted into the Set by the add() method successfully (that is, there wasn't an identical element already in the Set when Set called add()).
The specification requires sets to be implemented "that, on average, provide access times that are sublinear on the number of elements in the collection." Therefore, it could be represented internally as a hash table (with O(1) lookup), a search tree (with O(log(N)) lookup), or any other data structure, as long as the complexity is better than O(N).
How to create a Set?
There are two ways to create a Set. The first way is to use the Set constructor. The second way is to use the Set object literal.
Set constructor
The Set constructor creates a new Set object. You can pass an iterable object as an argument to the constructor. The iterable object's elements will be added to the new Set.
const set = new Set([1, 2, 3, 4, 5])
Set object literal
The Set object literal creates a new Set object. You can pass an iterable object as an argument to the object literal. The iterable object's elements will be added to the new Set.
const set = {1, 2, 3, 4, 5};
Set Methods & Property
| Method | Description |
|---|---|
| add() | Adds a new element with a specified value to the Set object. |
| clear() | Removes all elements from the Set object. |
| delete() | Removes the element associated with the value and returns the value that Set.prototype.has(value) would have previously returned. Set.prototype.has(value) will return false afterward. |
| entries() | Returns a new Iterator object that contains an array of [value, value] for each element in the Set object, in insertion order. |
| forEach() | Executes a provided function once per each value in the Set object, in insertion order. |
| has() | Returns a boolean asserting whether an element is present with the given value in the Set object. |
| keys() | Returns a new Iterator object that contains the values for each element in the Set object in insertion order. |
| values() | Returns a new Iterator object that contains the values for each element in the Set object in insertion order. |
| Property | Description |
|---|---|
| size | Returns the number of values in the Set object. |
Set Examples
Add a value to Set
const set = new Set([1, 2, 3, 4, 5])
set.add(6)
console.log(Set) // Set { 1, 2, 3, 4, 5, 6 }
Delete a value from Set
const set = new Set([1, 2, 3, 4, 5])
set.delete(3)
console.log(set) // Set { 1, 2, 4, 5 }
Check if a value exists in Set
const set = new Set([1, 2, 3, 4, 5])
console.log(set.has(3)) // true
Iterate through Set
const set = new Set([1, 2, 3, 4, 5])
for (const item of Set) {
console.log(item)
}
// 1
// 2
// 3
// 4
// 5
Convert Set to Array
const set = new Set([1, 2, 3, 4, 5])
const array = Array.from(set)
console.log(array) // [1, 2, 3, 4, 5]
Convert Array to Set
const Array = [1, 2, 3, 4, 5]
const set = new Set(array)
console.log(Set) // Set { 1, 2, 3, 4, 5 }
Get the size of Set
const set = new Set([1, 2, 3, 4, 5])
console.log(set.size) // 5
Clear Set
const set = new Set([1, 2, 3, 4, 5])
set.clear()
console.log(set) // Set {}
Merge Set
const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([6, 7, 8, 9, 10])
const set3 = new Set([...set1, ...set2])
console.log(set3) // Set { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 }
Get the intersection of two Sets
const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5, 6, 7, 8])
const set3 = new Set([...set1].filter((x) => set2.has(x)))
console.log(set3) // Set { 4, 5 }
Get the difference between two Sets
const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5, 6, 7, 8])
const set3 = new Set([...set1].filter((x) => !set2.has(x)))
console.log(set3) // Set { 1, 2, 3 }
Check if Set is a subset of another Set
const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5])
console.log([...set2].every((x) => set1.has(x))) // true
Check if Set is a superset of another Set
const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5])
console.log([...set1].every((x) => set2.has(x))) // false
Check if two Sets are disjoint
const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([6, 7, 8, 9, 10])
console.log([...set1].every((x) => !set2.has(x))) // true
Check if two Sets are equal
const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([1, 2, 3, 4, 5])
console.log(set1.size === set2.size && [...set1].every((x) => set2.has(x))) // true
Browser Support
 Chrome |
 Firefox |
 Edge |
 Safari |
 Opera |
|---|---|---|---|---|
| 49+ | 44+ | 12+ | 10.1+ | 36+ |
Set vs. Array
| Set | Array |
|---|---|
| Unique value, disallow duplicate value | Allow duplicate value |
| Set is a collection of values in no particular order | Array is a collection of values in a particular order |
| Set is iterable | Array is iterable |
| Set is slower than an array in initialization because it uses a hash process. | Array is faster in terms of initialization |
| Performance is better when checking for the existence of an element | Performance is better when accessing an element |
{/* This article is originally published on blog.imam.dev. */}
Top comments (0)