Iterate over the Elements of a Set using JavaScript

avatar
Borislav Hadzhiev

Last updated: Mar 3, 2024
3 min

banner

# 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.

index.js
const set1 = new Set(['bobby', 'hadz', 'com']); // โœ… ๏ธ using forEach set1.forEach(element => { console.log(element); // ๐Ÿ‘‰๏ธ bobby, hadz, com });

iterate over elements of set

The code for this article is available on GitHub

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
Note that there are no keys in a Set object and the parameter is added to be consistent with the forEach methods of Map objects and arrays.

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.

index.js
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 }

iterate over elements of set using for of loop

The code for this article is available on GitHub

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.

index.js
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.

As previously noted, the break statement is not available in the function we pass to the Set.forEach() method.

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.

index.js
const set1 = new Set(['bobby', 'hadz', 'com']); for (const element of set1.values()) { console.log(element); // ๐Ÿ‘‰๏ธ bobby, hadz, com }
The code for this article is available on GitHub

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

index.js
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.

index.js
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:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev