ES2025 Iterator Helpers — Interactive Playground

.map(fn) Transform each value

Lazily applies fn to each yielded value, returning a new iterator.

// .map() — transform each element
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.values()
  .map(x => x * 2);

// Collect results
const result = doubled.toArray();
console.log(result); // [2, 4, 6, 8, 10]

.filter(fn) Keep matching values

Yields only the values for which fn returns truthy.

// .filter() — keep elements that pass the test
const words = ['hello', 'hi', 'world', 'hey', 'wow'];
const hWords = words.values()
  .filter(w => w.startsWith('h'));

console.log(hWords.toArray());
// ["hello", "hi", "hey"]

.take(n) First n values

Yields at most n values, then closes the iterator. Works safely on infinite iterators.

// .take() — grab the first n elements
// Works safely with infinite iterators!
function* naturals() {
  let i = 1;
  while (true) yield i++;
}

const first10 = naturals().take(10).toArray();
console.log(first10);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

.drop(n) Skip first n values

Skips the first n values, then yields the rest.

// .drop() — skip the first n elements
const letters = ['a', 'b', 'c', 'd', 'e', 'f'];
const afterThree = letters.values()
  .drop(3)
  .toArray();

console.log(afterThree); // ["d", "e", "f"]

.flatMap(fn) Map + flatten

Maps each value through fn (which must return an iterable or iterator) and flattens one level.

// .flatMap() — map and flatten one level
const sentences = ['hello world', 'foo bar baz'];
const allWords = sentences.values()
  .flatMap(s => s.split(' '));

console.log(allWords.toArray());
// ["hello", "world", "foo", "bar", "baz"]

.reduce(fn, init) Accumulate into a single value

Consumes the iterator, reducing all values into a single result. Eager operation.

// .reduce() — accumulate a result
const nums = [10, 20, 30, 40, 50];
const sum = nums.values()
  .reduce((acc, n) => acc + n, 0);

console.log('Sum:', sum); // Sum: 150

// Without initial value — uses first element as accumulator
const product = [2, 3, 4].values()
  .reduce((acc, n) => acc * n);

console.log('Product:', product); // Product: 24

.toArray() Collect into an array

Consumes the iterator and returns all yielded values as an Array.

// .toArray() — materialize an iterator into an Array
function* fibonacci() {
  let a = 0, b = 1;
  while (true) { yield a; [a, b] = [b, a + b]; }
}

// First 12 Fibonacci numbers
const fibs = fibonacci().take(12).toArray();
console.log(fibs);
// [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89]

.forEach(fn) Execute side effects

Consumes the iterator, calling fn for each value. Returns undefined.

// .forEach() — perform a side effect for each value
const items = ['apple', 'banana', 'cherry'];
let count = 0;

items.values().forEach(item => {
  count++;
  console.log(`${count}. ${item}`);
});

console.log(`Processed ${count} items.`);

.some(fn) Any match?

Returns true as soon as fn returns truthy for a value. Short-circuits.

// .some() — does any element match?
const scores = [42, 67, 91, 55, 88];
const hasHighScore = scores.values()
  .some(s => s > 90);

console.log('Has score > 90:', hasHighScore); // true

// Short-circuits! Only checks until it finds one.
let checked = 0;
[1, 2, 3, 99, 5].values()
  .some(n => { checked++; return n > 50; });
console.log('Elements checked:', checked); // 4 (stopped at 99)

.every(fn) All match?

Returns true only if fn returns truthy for every value. Short-circuits on first false.

// .every() — do all elements match?
const ages = [18, 25, 30, 16, 45];
const allAdults = ages.values()
  .every(age => age >= 18);

console.log('All adults:', allAdults); // false

// Short-circuits at 16 (index 3)
let checked = 0;
ages.values().every(age => { checked++; return age >= 18; });
console.log('Checked before stopping:', checked); // 4

.find(fn) First match

Returns the first value for which fn returns truthy, or undefined. Short-circuits.

// .find() — locate the first matching element
function* primes() {
  yield 2;
  let n = 3;
  outer: while (true) {
    for (let d = 2; d * d <= n; d++) {
      if (n % d === 0) { n += 2; continue outer; }
    }
    yield n;
    n += 2;
  }
}

// Find the first prime greater than 100
const big = primes().find(p => p > 100);
console.log('First prime > 100:', big); // 101

Lazy Evaluation Demo

Iterator helpers are lazy -- intermediate steps like .map() and .filter() only execute when a value is actually consumed. This demo proves it by logging which elements get processed.

// Lazy evaluation proof
// Source has 1000 elements, but .take(3) means only a few get processed.

const source = Array.from({ length: 1000 }, (_, i) => i + 1);
const log = [];

const result = source.values()
  .map(x => {
    log.push(`  map(${x})`);
    return x * 10;
  })
  .filter(x => {
    log.push(`  filter(${x})`);
    return x % 20 === 0;   // keep multiples of 20
  })
  .take(3)
  .toArray();

console.log('Result:', JSON.stringify(result));
console.log(`\nEvaluation log (${log.length} steps for 1000 source items):`);
log.forEach(l => console.log(l));
console.log(`\nOnly ${log.length} steps instead of 2000! That is lazy evaluation.`);

Eager: Array methods

Click "Run Comparison" to see the difference.

Lazy: Iterator Helpers

Click "Run Comparison" to see the difference.

Pipeline Builder

Chain multiple iterator helpers visually. Add steps, configure arguments, and run the pipeline. Each step executes lazily.

Source data (comma-separated numbers or quoted strings):

Add helpers to the chain:

Pipeline chain:

source.values()

Terminal operation: