How to iterate over Set elements in JavaScript ?

Set() objects are groups of distinct values. A set is a collection of unique elements i.e. no element can appear more than once in a set. Because sets in ES6 are ordered, the items of a set can be iterated in the order of insertion. Object and primitive values can both be stored in sets.

We can iterate over the set elements using the following methods in JavaScript:

Approach 1: Using for…of loop

The for…of loop iterates over the iterable objects (like Array, Map, Set, arguments object, …, etc), invoking a custom iteration hook with statements to be executed for the value of each distinct property.

Syntax:

for (const value of mySet) {
    ...
}

Example: This example shows the iteration of set elements using the for…of loop in Javascript.

Javascript

const mySet = new Set();

mySet.add("Virat");
mySet.add("Rohit");
mySet.add("Rahul");

for (const value of mySet) {
    console.log(value);
}

Output

Virat
Rohit
Rahul

Approach 2: Using forEach() Method

The arr.forEach() method calls the provided function once for each element of the array. The provided function may perform any kind of operation on the elements of the given array. 

Syntax:

set.forEach(function (parameter) {
      ...
});

Example: Here we use forEach method to iterate our set elements.

Javascript

const Data = new Set();

Data.add("Delhi");
Data.add("Noida");
Data.add("Gurgaon");

Data.forEach(function (value) {
    console.log(value);
});

Output

Delhi
Noida
Gurgaon

Approach 3: Using Array.from() and for loop Methods

In this approach, we will use an array.from() method to convert the set into an array and then we iterate using the for loop.

Example: This example shows the implementation of above-explained approach.

Javascript

// Initialize a Set object
// using Set() constructor
let myset = new Set()

// Insert new elements in the
// set using add() method
myset.add(3);
myset.add(2);
myset.add(9);
myset.add(6);

// Print the values stored in set
console.log(myset);

const myArray = Array.from(myset);
for (let i = 0; i < myArray.length; i++) {
    console.log(myArray[i]);
}

Output

Set(4) { 3, 2, 9, 6 }
3
2
9
6

Approach 4: Using Lodash _.forEach() method

In this example, we are using the Lodash _.forEach() method for iteration of set.

Example: This example shows the implementation of above-explained approach.

Javascript

// Requiring the lodash library
const _ = require("lodash");
const Data = new Set();

Data.add("Delhi");
Data.add("Noida");
Data.add("Gurgaon");

// Use of _.forEach() method
_.forEach(Data, function (value) {
    console.log(value);
});

Output:

Delhi
Noida
Gurgaon