Choosing generators against arrays for big streams

Understanding Choosing generators against arrays for big streams

An array is a container of values that already exist; a generator is a paused function that produces a value when something asks for one. That difference shows up the moment a pipeline has several stages: nums.map(square).filter(test).slice(0, 3) over a million numbers allocates a second million-element array, then a third, calls square a million times, and discards almost all of that work. The generator version of the same three stages calls square nine times and allocates nothing larger than the three-element result, because each number travels through square, the filter and the consumer before the next number is created.

The mental model worth carrying is two numbers: how many values are alive at once, and how many values the consumer actually needs. An array pipeline pins the first at N per stage and the second at N, no matter what the consumer does with the result. A generator pipeline pins the first at one value per stage and lets the consumer decide the second, which is why break, find and some become cheap, and why a sequence with no end (log lines still being written, pages of an API you have not requested yet) can be expressed at all.

The price is per-item overhead and lost capabilities. Every step through a generator chain is a function resume plus a fresh { value, done } object, so for a few hundred items an array chain is faster and much easier to inspect in a debugger, since you can log the whole thing. You also give up length, items[i], sort, and reuse: a generator object is consumed once and is then permanently done. Choose a generator when the data is large, unbounded, or arriving from IO and you read it once in order; choose an array when it is small, needs sorting or random access, or gets walked more than once.

const N = 1_000_000;
let arraySquarings = 0;
let genSquarings = 0;

function firstThreeWithArrays() {
  return Array.from({ length: N }, (_, i) => i)
    .map(n => { arraySquarings++; return n * n; })
    .filter(sq => sq % 7 === 1)
    .slice(0, 3);
}

function* count(limit) {
  for (let i = 0; i < limit; i++) yield i;
}

function* square(nums) {
  for (const n of nums) {
    genSquarings++;
    yield n * n;
  }
}

function* where(values, test) {
  for (const v of values) if (test(v)) yield v;
}

function firstThree(values) {
  const out = [];
  for (const v of values) {
    out.push(v);
    if (out.length === 3) break;
  }
  return out;
}

const lazy = firstThree(where(square(count(N)), sq => sq % 7 === 1));

console.log('arrays:    ', firstThreeWithArrays().join(', '), 'after', arraySquarings, 'squarings');
console.log('generators:', lazy.join(', '), 'after', genSquarings, 'squarings');

Worked examples

function* twoLines() {
  yield 'first';
  yield 'second';
}

const stream = twoLines();
console.log([...stream].length);
console.log([...stream].length);

const rows = ['first', 'second'];
console.log(rows.length, rows[1]);
console.log(twoLines().length, twoLines()[1]);

function* naturals(limit) {
  for (let i = 0; i < limit; i++) yield i;
}

function average(values) {
  let sum = 0;
  let count = 0;
  for (const v of values) {
    sum += v;
    count++;
  }
  return sum / count;
}

console.log(average(naturals(2_000_000)));

const materialized = [...naturals(2_000_000)];
console.log(materialized.length, average(materialized));

function* readWords() {
  yield 'pear';
  yield 'fig';
  yield 'apple';
  yield 'plum';
}

let longest = '';
for (const w of readWords()) {
  if (w.length > longest.length) longest = w;
}
console.log(longest);

const words = [...readWords()];
words.sort();
console.log(words.join(' '), words.length, words[0]);

Important notes

Common mistakes

Try it yourself