Add elements to a Set using Javascript

In JavaScript, a Set is an object that is used to store a collection of unique elements of different types, such as numbers, strings, booleans, and object references, etc.

const mySet = new Set();

Adding Elements to a JavaScript Set

We can add elements to a JavaScript set in the following ways:

• Using Simple add() Method
• Using Method Chaining with add()

Using add() Method

The add() method of the Set object accepts a value as a parameter and adds it to the elements of the current Set object, and returns the resultant Set. Since the Set does not allow duplicates, if the specified value already exists in the Set, it will be ignored.

Syntax

Following is the syntax of the add() method of the Set class:

set.add(value);

In the above syntax, the value is the new element that needs to be added to the Set.

Example: Adding a Single Element

In the following example, we are adding a single element to a set object:

//create a set
const numberSet = new Set();
console.log("Set before adding element: ", numberSet);
const value = 20;
console.log("The given value: ", value);

//using the add() method
numberSet.add(value);
console.log("Set after adding element: ", numberSet);

The above program produces the following output:

Set before adding element: Set {} 
The given value: 20 
Set after adding element: Set { 20 }

Example: Adding Multiple Elements

In this example, we are adding multiple elements to a set object. Here, we use the forEach() method to iterate over the array (using a forEach loop), add each element to an empty Set using the add() method:

//create a set
const numberSet = new Set();
const arr = [10, 20, 30, 40, 50];
console.log("Set before adding element: ", numberSet);
console.log("An array elements are: ", arr);

//using the forEach() method
arr.forEach((item) => numberSet.add(item));
console.log("Set after adding element: ", numberSet);

Following is the output of the above program:

Set before adding element: Set {} 
An array elements are: [ 10, 20, 30, 40, 50 ] 
Set after adding element: Set { 10, 20, 30, 40, 50 }

Using Method Chaining on the add() method

In JavaScript, we can call multiple methods on a single object in a single statement; this is known as Method Chaining. For this to work, all the methods should return the same object.

Since the add() method of the Set class adds the given value to the current Set object and returns the result as another Set object, we can add multiple values using method chaining as shown below:

set.add(value1).add(value2).add(value3)...;

Example

The following example adds two elements using method chaining on the add() method:

//create a set
const numberSet = new Set();
console.log("Set before adding element: ", numberSet);
const value1 = 10;
const value2 = 20;
console.log("The given values are: ", value1, value2);

//using the .add().add() method chaining
numberSet.add(value1).add(value2);
console.log("Set after adding element: ", numberSet);

Following is the output of the above program:

Set before adding element: Set {} 
The given values are: 10 20 
Set after adding element: Set { 10, 20 }

Example: Adding Duplicate Element

If you try to add a duplicate element to a Set, it will not throw an error. Since a Set only accepts unique elements, it will ignore the duplicate value and adds it only once:

//create a set
const numberSet = new Set();
console.log("Set before adding element: ", numberSet);
const value1 = 10;
const value2 = 10;
console.log("The given values are: ", value1, value2);

//using the add() method
numberSet.add(value1).add(value2);
console.log("Set after adding element: ", numberSet);

The above program displays the following output:

Set before adding element: Set {} 	
The given values are: 10 10 
Set after adding element: Set { 10 }