How to iterate over Elements of a Set in JavaScript?

Are you wondering how to iterate over a set of elements in js or JavaScript? Keep on reading!

In this article, you’ll discover and understand how to iterate over elements of a Set in JavaScript with our comprehensive guide.

Start to improve your coding skills and write more efficient code with the help of this tutorial that offers valuable information concerning JavaScript iterate over set.

What is set() object?

A set is a built-in object in JavaScript that allows you to store different kinds of values, whether they are simple numbers or more complex objects.

It’s like a container that can hold these values without any specific arrangement. The values in a Set can be of any type, including primitive values and object references.

Unlike arrays, sets don’t assign specific positions or indexes to their elements, so when you want to work with the values inside a set, you need to approach it in a slightly different way.

What is “iterable” objects?

An iterable object is like a collection that you can explore gradually, one item at a time.

Certain built-in types such as arrays, strings, maps, and sets possess this characteristic in JavaScript

have this ability to be iterated.

It means that you can effortlessly loop through each element of these objects using a convenient loop called for…of.

It simplifies the process of accessing and working with the individual pieces of data within these iterable objects.

How to iterate over Set elements in JavaScript?

You can iterate over the elements of a Set in JavaScript using either the for…of loop and the forEach method.

The following are the solutions for JavaScript iterate over set.

Solution 1: Use for-of loop

The for-of loop is a convenient and straightforward way to go through iterable objects, such assets.

It allows you to effortlessly loop through each element of the set without having to worry about managing explicit indexes or complicated code.

In addition to that, the for-of loop is a handy loop introduced in ES6 that allows you to easily go through items in arrays, strings, maps, and sets.

For example:

const sampleSet = new Set(["it", "source", "code"]);
for (const sampleelement of sampleSet) {
    console.log(sampleelement);
}

In this example, we create a set with values “it”, “source”, and “code”. Then, using the for-of loop, we go through each element of the set.

The variable “sampleelement ” holds the value of the current element during each iteration of the loop.

Inside the loop, we display the value of “sampleelement ” on the console.

Output:

it
source
code

Here’s another way around that uses for-of loop which you can also use.

const sampleSet = new Set();
  
sampleSet.add("It");
sampleSet.add("Source");
sampleSet.add("Code");
  
for (const value of sampleSet) {
    console.log(value);
}

Output:

It
Source
Code

Solution 2: Use forEach method

One easy way to go through the elements of a set is by using the forEach() method.

It allows you to perform a specific action for each value in the set, following the order in which they were added.

For example:

const sampleset = new Set(["it", "source", "code"]);

sampleset.forEach(element => {
  console.log(element); 
});

Output:

it
source
code

Here’s another example:

const sampleSet = new Set();
  
sampleSet.add("It");
sampleSet.add("Source");
sampleSet.add("Code");
  
sampleSet.forEach(function (value) {
    console.log(value);
});

Output:

It
Source
Code

What is the difference between for-of loop and forEach method?

Both the for-of loop and the forEach method are used to iterate over the elements of an iterable object. However, they have some key differences in terms of their implementation and functionality.

The for-of loop it uses a for…of statement and allows the use of break and continue statements. This provides control over the flow of execution, allowing you to exit the loop early or skip certain iterations if needed.

On the other hand, the forEach method is called directly on the iterable object and requires a callback function as an argument. Unfortunately, it doesn’t offer a way to prematurely exit the loop or skip specific iterations.

Another distinction is that the for-of loop creates a new block scope for each iteration. This means that any variables declared within the loop will have limited visibility outside of that specific iteration.

In contrast, the forEach method does not create such block scopes, and any variables declared within it will have broader visibility.

Conclusion

In conclusion, this article discusses and provides a simple and concise guide on how to iterate over elements of a Set in JavaScript.

It explains the concept of Sets as containers for various values and introduces iterable objects that can be iterated using the for…of the loop.

Moreover, it demonstrates the usage of the for…of loop and the forEach() method to iterate over Set elements.

By following the solutions and techniques provided, you can effectively work with Sets and improve their JavaScript coding skills.

We are hoping that this article provides you with enough information that helps you understand the JavaScript iterate over set. 

You can also check out the following article:

• How to get tomorrow’s date in JavaScript?
• Remove all non-alphanumeric characters in JavaScript
• How to use toobject() method in JavaScript?

Thank you for reading itsourcecoders 😊.

Caren Bautista

Technical Writer at PIES IT Solution

Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.

Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel
 · View all posts by Caren Bautista →