Functional Techniques and Collection Design

Why it matters

Arrays and Objects introduced map/filter/reduce as individual tools. Used together — composed into pipelines, paired with immutable updates, backed by the right collection type — they become a coherent style for transforming data that’s easier to test and reason about than an equivalent imperative loop.

Higher-order functions and composition

A higher-order function takes a function as an argument, returns one, or both — map and filter already qualify. Composition chains small, single-purpose functions into a pipeline, each one handling one transformation:

const trim = (s) => s.trim();
const toLowerCase = (s) => s.toLowerCase();
const removeExtraSpaces = (s) => s.replace(/\s+/g, ' ');

function pipe(...fns) {
  return (input) => fns.reduce((value, fn) => fn(value), input);
}

const normalize = pipe(trim, toLowerCase, removeExtraSpaces);
console.log(normalize('  Hello   World  ')); // "hello world"

Each function in the pipeline is small, independently testable, and reusable elsewhere — the reduce-based pipe helper is itself a higher-order function, taking functions in and returning a new one.

Immutability as a design choice

Recall from Arrays and Objects that spread produces a shallow copy. Choosing to always produce a new value instead of mutating — even where mutation would technically work — is a deliberate design decision, not just a syntax preference:

// Mutating — works, but anything else holding a reference to cart sees the change too
function addItemMutating(cart, item) {
  cart.items.push(item);
  return cart;
}

// Immutable — always produces a new structure; the original is untouched
function addItemImmutable(cart, item) {
  return { ...cart, items: [...cart.items, item] };
}

The immutable version is safe to call without worrying about who else might be holding a reference to the original — directly relevant to predictable state in a UI, and to the pure-function discipline from Functions and Scope.

Choosing a collection type

Map preserves insertion order and reports its size directly (map.size, versus Object.keys(obj).length); WeakMap/WeakSet hold their keys weakly — a key that becomes otherwise unreachable can still be garbage collected, even while referenced by the WeakMap, which is exactly why they can’t be iterated or have their size checked (doing so would need to expose information about garbage collection timing).

Iterables and generators

An object is iterable if it implements the well-known Symbol.iterator method — this is what lets for...of and spread work on it, beyond the built-in arrays/strings/Map/Set:

function range(start, end) {
  return {
    [Symbol.iterator]: function* () {
      for (let i = start; i < end; i++) {
        yield i;
      }
    },
  };
}

for (const n of range(1, 4)) {
  console.log(n); // 1, 2, 3
}
console.log([...range(1, 4)]); // [1, 2, 3] — spread works too, since it's iterable

A generator function (function*) is the easiest way to implement the iterator protocol by hand: calling it doesn’t run its body immediately — it returns an iterator, and each yield pauses execution, handing back one value at a time, resuming exactly where it left off on the next request.

Check your understanding

Practice: warm-up

Predict the result, then check:

const double = (n) => n * 2;
const addOne = (n) => n + 1;

function pipe(...fns) {
  return (input) => fns.reduce((value, fn) => fn(value), input);
}

const transform = pipe(double, addOne);
console.log(transform(5));

11

Practice: apply it

Write a generator function take(iterable, count) that yields only the first count values from any iterable, then stops — even if the source iterable is infinite.

function* take(iterable, count) {
  let taken = 0;
  for (const value of iterable) {
    if (taken >= count) return;
    yield value;
    taken++;
  }
}

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

console.log([...take(naturalNumbers(), 5)]); // [1, 2, 3, 4, 5]

Summary

• A higher-order function takes or returns a function; composing several small ones into a pipeline (pipe) keeps each transformation independently testable and reusable.
• Choosing immutable updates over mutation, even where mutation would work, avoids surprising anything else holding a reference to the original value — structuredClone deep-copies plain data, but has real limits (no functions, no DOM nodes).
• Map/Set fit general or non-string-keyed lookups better than a plain object; WeakMap/WeakSet hold their keys weakly, letting an object be garbage collected even while referenced by them — useful for attaching data to an object without extending its lifetime.
• Symbol.iterator is what makes an object work with for...of and spread; a generator function (function*) is the easiest way to implement it, pausing at each yield and resuming only when the next value is actually requested.