Published: May 1, 2025
If you write JavaScript, then iterating is something you do a lot of. You're either writing loops to work with arrays, or using functional programming methods such as map, filter and other similar methods to process all sorts of data.
One sticking point with using these methods however, is that they're only available on arrays. If you wanted to use them on an iterable, you'd have to convert it to an array, and then call the method you'd need. This can be wasteful, or in cases where the interable represents contains infinite dataset using generator functions, it isn't possible. However, now that iterator helpers have become Baseline Newly available, this ability is finally available across browsers.
How do iterator helpers work?
Iterator helpers are exposed by defining new methods on the Iterator object's prototype. These methods align with many functional programming methods you're used to using, such as map, filter, reduce, and other similar methods.
For example, you could use an iterator helper on the filter method to filter list items by the contents of their innerText property for a collection of DOM nodes, which you can then use later in a for loop:
const posts = document.querySelectorAll("ul#specific-list > li")
.values()
.filter(item => item.textContent.includes("kiwi"));
// For-of loops can only be used on iterables, which `posts` is!
for (const post of posts) {
console.log(post.textContent);
}
In the preceding code snippet, the iterator helper method for filter is used to iterate over all <li> elements in a specific <ul> element. The filtering criteria is that each element's text content must contain a substring of "kiwi".
Iterator helpers can also be used with generator functions. In this example, a generator function that calculates factorials, but uses the iterator helper to filter out values to ones that are divisible by 8, and log the first five filtered values to the console:
function* factorials (n) {
let result = 1;
for (let i = 1; i <= n; i++) {
result *= i;
yield result;
}
}
const filteredFactorials = factorials(128).filter(x => x % 8 === 0);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
In particular, the preceding code snippet is an example of something that wouldn't be possible with iterator helpers, because the number of factorials is infinite, and not something you can convert to an array otherwise!
Depending on your situation, iterator helpers have a lot of potential— and they're available for each of these iterable methods:
The possibilities for iterator helper use cases are vast, and can provide a significant boost in developer ergonomics. Now that they're Baseline Newly available, you should have increasing confidence over time that you can use them without fear of compatibility issues. For more information, check out the following resources: