JavaScript Set Explained with example.

Javascript sets are an essential thing in the data structure. Recently the javascript ES6 has introduced two new data structures, they are Set and WeakSet. In this article, we will learn about javascript sets with their example.

What is Javascript set?

Javascript set is a group of unique values or elements. Each element takes place once in a set.

How to Create a Javascript set?

To create a set in javascript we have to use new Set() constructor.

const set1 = new Set(); // this is empty set.

The above example is the basic example to create a set in javascript. Now if we console the set it will return the empty set.

 const set1 = new Set() console.log(set1) // set{}

Now we will create a set with some values.

 const set1 = new Set(\[1,2,3,4,5\]) console.log(set1)
 

For this code, the output will be the values inside the set.

output: Set(5) 5```

But when some duplicate values in this set will pass the duplicate values will be excluded.

const myArray = [2,3,4,2,3,6]
const set1 = new Set(myArray)
 
console.log(myArray)
 
console.log(set1)

output:
[ 2, 3, 4, 2, 3, 6 ]
Set(4) { 2, 3, 4, 6 }

In this example, the array is having some duplicate values. When we pass the array through the set it returns only four values and excludes the duplicate number.

Access Elements:

We can access the set elements using values() method. We can also find if there are any elements inside the set using has() method.

// using values
const set1 = new Set([1,2,3,4,5])
 
console.log(set1.values())

output: [Set Iterator] 5

Now we will check if there is an element in the Set using has().

 
const set1 = new Set([1,2,3,4,5])
 
 console.log(set1.has(2))
 console.log(set1.has(6))

output: true false

Here the has() method checks if there are “2” elements in the set for that reason it returns true. Then it checks the “6” elements in that same set but there is no “6” in the set. that’s why it returns false.

Adding New Elements:

We also can add any element in a Set using add() method.

const set = new Set([4,5])
 
 
console.log(set.values())
 
set.add(1)
console.log(set.values())
 
 
set.add(6)
console.log(set.values())
 

In the above example, we have used add() method to add values inside the set. First, we console the set values. Then we add “1” inside the set element using add() method. It prints all the elements with the added elements.

Related: Introduction to JavaScript Hoisting

output:
[Set Iterator] { 4, 5 }
[Set Iterator] { 4, 5, 1 }
[Set Iterator] { 4, 5, 1, 6 }

Removing Elements:

In a set, we can add any element as well as we can remove any element. For this we use delete() method to remove any specific element from a set.

const set = new Set([4,5,1,2])
console.log(set.values())
 
set.delete(4);
console.log(set)

output:
[Set Iterator] { 4, 5, 1, 2 }
Set(3) { 5, 1, 2 }

As we know that the delete() method only deletes the specific element so for this example it only removes the “4” element from the set.

If we want to remove all the elements from a set we can use clare() method.

const set = new Set([4,5,1,2])
console.log(set.values())
 
set.clear();
console.log(set)

output:
[Set Iterator] { 4, 5, 1, 2 }
Set(0) {}

There are no elements inside the set because of clear() method.

Iterate Sets:

We can also iterate through sets using for..of loops and forEach loops method like an array element. The elements will be in insertion order.

const set = new Set([4,5,1,2])
console.log(set.values())
 
 
for (let i of set){
    console.log(i)
}

output:
[Set Iterator] { 4, 5, 1, 2 }
4
5
1
2

Summing up

I hope this tutorial on JavaScript Set was helpful for you, if you’re having any trouble understanding, you may comment down below and we’ll try to solve your queries.

To know more about JavaScript Set method you may refer to this tutorial.