Iterate over the Elements of a Set using JavaScript

# Iterate over the Elements of a Set in JavaScript

Use the forEach() method to iterate over the elements of a Set. The forEach method takes a function that gets invoked once for each value in the Set object.

Copied!
const set1 = new Set(['bobby', 'hadz', 'com']);

// ✅ ️ using forEach
set1.forEach(element => {
  console.log(element); // 👉️ bobby, hadz, com
});

We used the Set.forEach() method to iterate over the elements in the Set.

The function we passed to the method gets called with 3 arguments:

• the element value
• the element key
• the Set object

The callback function gets invoked once for each element in the Set, even if it has a value of undefined.

However, the function doesn't get invoked for values that have already been deleted from the Set.

The Set.forEach() method returns undefined, so its output shouldn't be stored in a variable.

# Iterate over the Elements of a Set using a for...of loop

An alternative approach is to use a for...of loop.

The loop assigns the current Set element to a variable on each iteration.

Copied!
const set1 = new Set(['bobby']);

set1.add('hadz');
set1.add('com');

// ✅ using for...of
for (const element of set1) {
  console.log(element); // 👉️ bobby, hadz, com
}

The for...of statement is used to loop over iterable objects like arrays, strings, Map, Set and NodeList objects and generators.

This might be your preferred approach if you have to use the break statement to exit a loop prematurely. The break statement is not supported in the forEach() method.

Copied!
const set1 = new Set(['bobby', 'hadz', 'com']);

let counter = 0;

for (const element of set1) {
  counter += 1;
  console.log(element);

  if (element === 'hadz') {
    break;
  }
}

console.log(counter); // 👉️ 2

We used a for...of loop to iterate over the Set object.

On each iteration, we check if the current element is equal to a specific value.

If the condition is met, we use the break statement to exit the loop.

If you need to exit the loop if a certain condition is met, use the for...of loop instead.

You might also see examples online that call the values() method on the Set object in the for...of loop.

Copied!
const set1 = new Set(['bobby', 'hadz', 'com']);

for (const element of set1.values()) {
  console.log(element); // 👉️ bobby, hadz, com
}

The Set.values() method returns an iterator object that contains the values of the Set object in insertion order.

Copied!
const set1 = new Set(['bobby', 'hadz', 'com']);

// 👇️ [ 'bobby', 'hadz', 'com' ]
console.log(Array.from(set1.values()));

However, calling the values() method explicitly in the for...of loop is not necessary.

Copied!
const set1 = new Set(['bobby', 'hadz', 'com']);

for (const element of set1) {
  console.log(element); // 👉️ bobby, hadz, com
}

The for...of loop iterates only over an object's own properties, as opposed to the for...in loop which also iterates over inherited properties.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• How to merge Sets using JavaScript
• How to Initialize a Set with Values in JavaScript
• Get the Union of Two Arrays or Sets in JavaScript
• How to get the Length of a Set in JavaScript
• Get the Intersection of two Arrays or Sets in JavaScript
• How to Get the First Element of a Set in JavaScript
• How to iterate over a FileList in JavaScript [5 Ways]
• Iterate over all keys stored in localStorage in JavaScript