• JavaScript Video Tutorials

JavaScript - The Sets Object

A JavaScript Set object is a collection of unique values. Each value can only occur once in a Set. A Set can hold any value of any data type. The sets are introduced to JavaScript in ECMAScript 6 (ES6).

JavaScript Sets are similar to Arrays, but there are some key differences:

  • Sets can only hold unique values, while Arrays can hold duplicate values.

  • Sets are not ordered, while Arrays are ordered.

  • Sets are faster to add and remove items from than Arrays.

JavaScript Sets are often used to store unique values, such as the unique users who have visited a website. They can also be used to remove duplicate values from an Array.

Syntax

Users can follow the syntax below to define a set in JavaScript −

let set1 = new Set([iterable]);

In the above syntax, we used the Set() constructor function with a 'new' keyword to define a set.

Parameters

  • Iterable− It is an optional parameter. The Set() constructor function traverses through the elements of the iterable and creates a new set using those elements.

JavaScript set provides methods and properties to manipulate the elements in the set. Here, we have listed the properties and methods of the Sets object.

JavaScript Set Properties

Following are the properties of Set class −

Sr.No. Name & Description
1

size

This property returns the size of the set.

JavaScript Set Methods

In the following table, we have listed all the properties of Set class −

Sr.No. Name & Description
1

add()

This method insert elements into the set.
2

clear()

This method removes removes all elements of the set.
3

delete()

This method deletes a single element of the set.
4

difference()

This method returns elements in first set but not in the second set.
5

entries()

To get an iterator containing all set entries.
6

forEach()

This method executes a provided function once for each value in this set.
7

has()

This method indicates whether an element with the specified value exists or not.
8

intersection()

This method returns the common elements in both sets.
9

isDisjointFrom()

This method indicates if this set has no elements in common with the given set.
10

isSubsetOf()

This method indicates if all elements of this set are in the given set.
11

isSupersetOf()

This method indicates if all elements of the given set are in this set.
12

keys()

This method is an alias for values() method.
13

symmetricDifference()

This method returns elements which are in either this set or the other set, but not in both.
14

union()

This method returns elements which are in either or both of this set and the other set.
15

values()

This method returns a new Set iterator object that containing values for each element in a Set object.

JavaScript Set Constructor()

Following is the constructor of Set in JavaScript −

Sr.No. Name & Description
1

Set()

Creates and returns the set of unique values from values passed as an argument.

Examples

Example: Accessing set elements

In the example below, we have passed the array containing the duplicate elements as an argument of the Set() constructor function. The num_set contains only unique values.

We used the values() method to get the iterator of the set values. To traverse the iterator, we use the for...of loop. In the loop, we access the element and print it. You can observe that set contains unique values even if the input array contains duplicate elements.

<html>
<body>
   <div>The set elements are: </div>
   <div id = "demo"></div>
   <script>
      const output = document.getElementById("demo")
      const num_set = new Set([10, 20, 20, 20]);
      for (let value of num_set.values()) {
         output.innerHTML += value + "<br> ";
      }    
   </script>
</body>
</html>

Output

It returns the set elements as 10, 20 by avoiding duplicates.

The set elements are:
10
20

Example: Inserting elements into the sets

Users can use the add() method to insert the element into the set. Here, we have created the empty set. After that, we used the add() method 3 times to add the 60, 50, 50 elements into the set.

We inserted the 50 for 2 times, but the set contains only once as it contains unique values.

<html>
<body>
   <div>Set elements after adding element/s to it: </div>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      const num_set = new Set();
      num_set.add(60);
      num_set.add(50);
      num_set.add(50);

      for (let value of num_set.values()) {
         output.innerHTML += value + "<br> ";
      }
   </script>
</body>
</html>

Output

If we execute the above program, it returns 60 and 50 as set elements.

Set elements after adding element/s to it:
60
50

Example: Removing set elements

The delete() method of the set allows you to delete the element from the set. Here, we created the set containing the various numbers and used the delete() method to delete the 200 and 400 from the set.

<html>
<body>
   <div> After deleting elements from the set: </div>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      let num_set = new Set([100, 200, 300, 400, 500]);
      num_set.delete(200);
      num_set.delete(400);
      for (let value of num_set.values()) {
         output.innerHTML += value + "<br> ";
      }
   </script>
</body>
</html>

Output

After deleting elements from the set:
100
300
500

In the output, we can see that 200 and 400 are deleted from the set.

Example: Checking if a set contains a specific value

The example below demonstrates of using the has() method to check whether the set contains the specific value.

Here, we check whether the set contains 100 and print the message in the output accordingly.

<html>
<body>
   <p id = "output">The set contains 100?: </p>
   <script>
      const num_set = new Set([100, 200, 300, 400, 500]);
      document.getElementById("output").innerHTML += num_set.has(100);
   </script>
</body>
</html>

Output

The set contains 100?: true

It returns "true" because the element 100 is present in the set.

Mathematical Operations on Sets

The Set doesn't contain the built-in methods to perform the mathematical set operations like union, intersection, or set difference. So, you need to write the custom JavaScript code to perform the mathematical operations as shown below.

Example: Union of two sets

The union of two sets contains all unique elements of set1 and set2.

In the example below, set1 and set2 contain the car names. We have defined the 'union' set and passed the array as an argument. We used the spread operator to create an array containing the elements of set1 and set2.

<html>
<body>
   <div>The Union of set1 and set2 is: </div>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
		
      const set1 = new Set(["BMW", "Audi", "TATA"]);
      const set2 = new Set(["BMW", "TaTa", "Honda", "Suzuki"]);

      const union = new Set([...set1, ...set2]); // Taking union

      for (let value of union.values()) {
         output.innerHTML += value + "<br> ";
      }
   </script>
</body>
</html>

Output

If we execute the program, it returns all unique elements of set1 and set2.

The Union of set1 and set2 is:
BMW
Audi
TATA
TaTa
Honda
Suzuki

Example: Intersection of two sets

The intersection of two sets contains the unique elements which exist in set1 and set2 both.

Here, we have two sets containing the car names and defined the 'inter' set to store the set elements which exist in both sets.

We traverse through the elements of set1, and inside the loop we use the has() method to check whether the element of the set1 exists in the set2. If yes, we add an element into the 'inter' set.

<html>
<body>
   <div> The intersection of set1 and set2 is: </div>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
	 
      const set1 = new Set(["BMW", "Audi", "TATA"]);
      const set2 = new Set(["BMW", "TATA", "Honda", "Suzuki"]);

      const inter = new Set();
      for (let car of set1) {
         if (set2.has(car)) {
            inter.add(car);
         }
      }

      for (let value of inter.values()) {
         output.innerHTML += value + "<br> ";
      }
   </script>
</body>
</html>

Output

The intersection of set1 and set2 is:
BMW
TATA

The intersection of set1 and set2 will be "BMW" and "TATA".

Example: Difference of two sets

The difference between set1 and set2 contains all elements in the set1 but not in the set2.

We have created the new set named 'diff' and initialized it with the 'set1' elements. After that, we traverse the set2 elements. If any element of the set2 exists in the 'diff' set, we delete it.

<html>
<body>
   <div>The difference of set1 and set2 is: </div>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      const set1 = new Set(["BMW", "Audi", "TATA"]);
      const set2 = new Set(["BMW", "TATA", "Honda", "Suzuki"]);

      const diff = new Set(set1);
      for (let car of set2) {
         diff.delete(car);
      }

      for (let value of diff.values()) {
         output.innerHTML += value + "<br> ";
      }
   </script>
</body>
</html>

Output

The difference of set1 and set2 is:
Audi

The difference between set1 and set2 will be "Audi".

Advertisements