The newest JavaScript

Iterator helpers

An array has .map and .filter, but they build a whole new array before the next question can be asked. An iterator helper works a step at a time: scores.values().map(double).take(2).toArray() doubles the first two scores and stops there — the rest of the input is never visited.

Generators, Map, Set and String all hand out iterators, so the same chain works on every one of them. Nothing runs until a result is asked for: .toArray(), .reduce(), .forEach(), or a for…of loop.

Array methods are eager: each one finishes before the next begins, and each builds a full array. An iterator helper is lazy, which is why a chain with a filter and a take can skip most of the input. The two styles look alike, and the difference is when the work happens.

Set methods are set algebra

A Set has held unique values for years; now it does the real operations: a.intersection(b) for what both hold, a.union(b) for everything, a.difference(b) for what only the first holds, a.symmetricDifference(b) for what exactly one holds, and a.isSubsetOf(b) for the question in its name.

Each of these used to be a filter with a has inside, or a loop with a second set to collect into. The method says the idea instead of the steps, and the browser does it without building intermediates you never look at.

These methods return a new set rather than changing either operand, so a chain of them reads like an expression. They also accept any iterable, not only another set, which is why a plain array can be passed to union without a conversion.

The small conveniences

Object.groupBy(items, fn) folds an array into an object keyed by what the function returns — the same shape as the reduce you may have written, without the accumulator lines. The result's keys are the group names, and the values are arrays of the items that landed in each.

Promise.try(fn) starts a chain with a function that may throw before it returns anything: the error arrives in the same .catch as a rejected promise would, sync or async. Array.fromAsync(source) collects values from an async source without a loop of awaits.

Lazy means nothing has happened yet

An iterator helper chain is a description of work, not the work itself. scores.values().map(double) returns an iterator; nothing is doubled until something asks for a value. .toArray(), .reduce() and for…of are the asking — the terminal operations.

That is what lets .take(2) save the rest of the input: only two values are ever pulled through the chain. An iterator is also consumed once. After it has been walked to the end, asking again gives nothing, so build a fresh chain rather than storing a half-used one.

Sets compare by identity, groupBy by key

A Set uses SameValueZero: primitives are compared by value, so two "Ada" strings are one member, while two separately created objects are always two members even when their fields match. That is the same identity rule === follows, and it is why sets of objects are more limited than they first appear.

Object.groupBy uses the returned value as a property key, and property keys are strings — so a number 40 becomes "40". Map.groupBy keeps the key as it was, numbers included, and is the right choice when the key is not naturally text.

A worked chain, value by value

Take scores holding 42, 17, 88, 5 and 63, and a chain that keeps the values over 20, doubles each survivor, and takes the first two. Nothing happens when the chain is built. .toArray() asks for the first value: the filter pulls 42, keeps it, the map doubles it to 84, and the take passes it on. The second request pulls 17, which the filter drops, then 88, which becomes 176 and fills the take.

The third request is never made, so 5 and 63 are never read from the array. The work stops at the last value the result needs, and an array method chain would have processed all five before the take could discard the rest.

The same work, said shorter

const scores = [42, 17, 88, 5, 63];

const doubled = scores.values().map((n) => n * 2).toArray();

const teamA = new Set(['Ada', 'Grace', 'Alan']);
const teamB = new Set(['Grace', 'Linus', 'Ada']);
const shared = teamA.intersection(teamB);

const grouped = Object.groupBy(scores, (n) => (n >= 40 ? 'pass' : 'fail'));
console.log(doubled, shared, grouped);

Try these next

• Add .take(2) to an iterator chain and confirm the rest of the array is never visited.
• Group the same numbers with Map.groupBy and compare the key types with Object.groupBy.
• Store an iterator, consume it with toArray(), then try to consume it again.