Iterator methods | Frontend Practical Guide

Overview

Iterator helpers add map(), filter(), take(), drop(), reduce(), and related methods directly to iterators. They enable lazy pipelines without converting everything to arrays first.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`javascript.builtins.Iterator.Iterator`	122	122	131	18.4	122	18.4
Built-in object
`Iterator.drop` The drop() method of Iterator instances returns a new iterator helper object that skips the given number of elements at the start of this iterator.	122	122	131	18.4	122	18.4
`Iterator.every` The every() method of Iterator instances is similar to Array.prototype.every(): it returns false if it finds an element that does not satisfy the provided testing function. Otherwise, if the iterator is exhausted without finding such an element, it returns true.	122	122	131	18.4	122	18.4
`Iterator.filter` The filter() method of Iterator instances returns a new iterator helper object that yields only those elements of the iterator for which the provided callback function returns true.	122	122	131	18.4	122	18.4
`Iterator.find` The find() method of Iterator instances is similar to Array.prototype.find(): it returns the first element produced by the iterator that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.	122	122	131	18.4	122	18.4
`Iterator.flatMap` The flatMap() method of Iterator instances returns a new iterator helper object that takes each element in the original iterator, runs it through a mapping function, and yields elements returned by the mapping function (which are contained in another iterator or iterable).	122	122	131	18.4	122	18.4
`Iterator.forEach` The forEach() method of Iterator instances is similar to Array.prototype.forEach(): it executes a provided function once for each element produced by the iterator.	122	122	131	18.4	122	18.4
`Iterator.from` The Iterator.from() static method creates a new Iterator object from an iterator or iterable object.	122	122	131	18.4	122	18.4
`Iterator.map` The map() method of Iterator instances returns a new iterator helper object that yields elements of the iterator, each transformed by a mapping function.	122	122	131	18.4	122	18.4
`Iterator.reduce` The reduce() method of Iterator instances is similar to Array.prototype.reduce: it executes a user-supplied "reducer" callback function on each element produced by the iterator, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements is a single value.	122	122	131	18.4	122	18.4
`Iterator.some` The some() method of Iterator instances is similar to Array.prototype.some(): it returns true if it finds an element that satisfies the provided testing function. Otherwise, if the iterator is exhausted without finding such an element, it returns false.	122	122	131	18.4	122	18.4
`Iterator.take` The take() method of Iterator instances returns a new iterator helper object that yields the given number of elements in this iterator and then terminates.	122	122	131	18.4	122	18.4
`Iterator.toArray` The toArray() method of Iterator instances creates a new Array instance populated with the elements yielded from the iterator.	122	122	131	18.4	122	18.4

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT

function* naturals() {
  let n = 1;
  while (true) yield n++;
}

// The first 5 even numbers from 1 to 100
const result = naturals()
  .filter(n => n % 2 === 0)
  .take(5)
  .toArray();
// [2, 4, 6, 8, 10]

Live demo

limitedread with take

nonegenerator from first. 5. Elementonly getout..

PreviewFullscreen

Filter and map. -n

itere-ta to directlyfilterring and mapping apply..

PreviewFullscreen

skip with drop

first. 3. Element,. Element read..

PreviewFullscreen

Use cases

Streaming transformations
Process generated or streamed data incrementally instead of materializing every intermediate array.
Composable pipelines
Chain small iterator operations to keep data processing readable and memory efficient.

Cautions

Iterator results are consumed as you iterate, so do not assume you can reuse the same pipeline repeatedly.
This feature is newer than classic array methods, so compatibility checks still matter.

Overview

Browser support

Syntax

Live demo

limitedread with take

Filter and map. -n

skip with drop

Use cases

Streaming transformations

Composable pipelines

Cautions

Accessibility

Related links