JavaScript Tutorial

This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

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
﻿AI﻿
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
﻿AI﻿
This method insert elements into the set.
2
﻿AI﻿
This method removes removes all elements of the set.
3
﻿AI﻿
This method deletes a single element of the set.
4
﻿AI﻿
This method returns elements in first set but not in the second set.
5
﻿AI﻿
To get an iterator containing all set entries.
6
﻿AI﻿
This method executes a provided function once for each value in this set.
7
﻿AI﻿
This method indicates whether an element with the specified value exists or not.
8
﻿AI﻿
This method returns the common elements in both sets.
9
﻿AI﻿
This method indicates if this set has no elements in common with the given set.
10
﻿AI﻿
This method indicates if all elements of this set are in the given set.
11
﻿AI﻿
This method indicates if all elements of the given set are in this set.
12
﻿AI﻿
This method is an alias for values() method.
13
﻿AI﻿
This method returns elements which are in either this set or the other set, but not in both.
14
﻿AI﻿
This method returns elements which are in either or both of this set and the other set.
15
﻿AI﻿
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".
﻿
﻿
﻿

Sr.No.	Name & Description
1	AI This method insert elements into the set.
2	AI This method removes removes all elements of the set.
3	AI This method deletes a single element of the set.
4	AI This method returns elements in first set but not in the second set.
5	AI To get an iterator containing all set entries.
6	AI This method executes a provided function once for each value in this set.
7	AI This method indicates whether an element with the specified value exists or not.
8	AI This method returns the common elements in both sets.
9	AI This method indicates if this set has no elements in common with the given set.
10	AI This method indicates if all elements of this set are in the given set.
11	AI This method indicates if all elements of the given set are in this set.
12	AI This method is an alias for values() method.
13	AI This method returns elements which are in either this set or the other set, but not in both.
14	AI This method returns elements which are in either or both of this set and the other set.
15	AI This method returns a new Set iterator object that containing values for each element in a Set object.

Javascript Basics

JavaScript Operators

JavaScript Control Flow

JavaScript Functions

JavaScript Objects

Object Oriented JavaScript

JavaScript Versions

JavaScript Cookies

JavaScript Browser BOM

JavaScript Web APIs

JavaScript Events

JavaScript Tutorial

Sets Object

Syntax

Parameters

JavaScript Set Properties

JavaScript Set Methods

JavaScript Set Constructor()

Examples

Example: Accessing set elements

Output

Example: Inserting elements into the sets

Output

Example: Removing set elements

Output

Example: Checking if a set contains a specific value

Output

Mathematical Operations on Sets

Example: Union of two sets

Output

Example: Intersection of two sets

Output

Example: Difference of two sets

Output