Memoization & laziness

Cache work, delay work

Memoization and laziness both ask the same practical question: can this work wait, or can we reuse a result we already computed? Memoization stores a pure function's result by its inputs. Laziness postpones a computation until code actually asks for the value.

This lesson builds on pure functions, closures, Map & Set, WeakMap & WeakSet, generators, and iterator helpers. If you just studied composition, memoization is the next constraint: a composed helper stays easy to reason about only when caching does not hide changing state.

Start with the smallest honest version: one argument, a Map, and a wrapper function. On a hit, return the stored value. On a miss, call the original function, store the result, and return it. The wrapper closes over the cache, so the cache survives between calls.

Fibonacci is a useful demo because raw recursion repeats the same subproblems. We will prove the improvement with a call counter instead of a stopwatch. For fib(6), raw recursion calls the body 25 times; the memoized version calls it 7 times, one for each key from 0 through 6. A second fib(6) call adds no real work.

1function memoize(fn) {Run2  const cache = new Map();3  return function memoized(arg) {4    if (cache.has(arg)) return cache.get(arg);5    const result = fn(arg);6    cache.set(arg, result);7    return result;8  };9}10 11let calls = 0;12let fib;13fib = memoize((n) => {14  calls++;15  return n < 2 ? n : fib(n - 1) + fib(n - 2);16});17 18console.log(fib(4));19console.log(calls);20console.log(fib(4));21console.log(calls);

The cache key is part of the algorithm. With one primitive argument, the argument itself is a good key. With multiple arguments, string concatenation can collide, so nested maps are safer. With objects, decide whether identity matters or whether you need a stable structural representation.

1function memoize(fn) {2  const cache = new Map();3  return (key) => {4    if (cache.has(key)) return cache.get(key);5    const result = fn(key);6    cache.set(key, result);7    return result;8  };9}10 11let calls = 0;12const shout = memoize((name) => {13  calls++;14  return name.toUpperCase();15});16 17console.log(shout("ada"));18console.log(shout("ada"));19console.log(calls);

JSON.stringify can be useful when your inputs are small, acyclic, and already normalized. It is not a universal equality function. It drops some values, throws on cycles, and preserves property insertion order. Nested Maps avoid those problems when identity is the correct meaning for object arguments.

A normal Map strongly references its keys and values. If a long-running page keeps adding keys, the cache itself can become the memory leak. Use a WeakMap when the key is an object and the cached value should disappear when that object is no longer reachable elsewhere.

When keys are not object lifetimes, cap the cache. The tiny panel below uses a least-recently-used style rule: a hit moves the key to the end, and adding a third key to a two-entry cache deletes the oldest key.

1function memoizeWithLimit(fn, limit = 2) {2  const cache = new Map();3  return (arg) => {4    if (cache.has(arg)) {5      const value = cache.get(arg);6      cache.delete(arg);7      cache.set(arg, value);8      return value;9    }10    const value = fn(arg);11    cache.set(arg, value);12    if (cache.size > limit) {13      const oldest = cache.keys().next().value;14      cache.delete(oldest);15    }16    return value;17  };18}19 20let calls = 0;21const square = memoizeWithLimit((n) => {22  calls++;23  return n * n;24});25 26console.log(square(2));27console.log(square(3));28console.log(square(2));29console.log(square(4));30console.log(square(3));31console.log(calls);

If two components ask for the same resource at the same time, caching only the fulfilled value is too late. Cache the in-flight promise. Both callers await the same work. If the promise rejects, delete that key so a retry can make a fresh request instead of replaying a permanently failed promise.

1function memoizeAsync(fn) {2  const cache = new Map();3  return (key) => {4    if (cache.has(key)) return cache.get(key);5    const promise = fn(key).catch((error) => {6      cache.delete(key);7      throw error;8    });9    cache.set(key, promise);10    return promise;11  };12}13 14let calls = 0;15const loadUser = memoizeAsync(async (id) => {16  calls++;17  if (id === "bad") throw new Error("not found");18  return { id, name: "Ada" };19});20 21(async () => {22  const [first, second] = await Promise.all([loadUser("42"), loadUser("42")]);23  console.log(first === second);24  console.log(calls);25  try { await loadUser("bad"); } catch {}26  try { await loadUser("bad"); } catch {}27  console.log(calls);28})();

A thunk is a function you call later: () => expensiveValue(). A lazy getter hides that thunk behind a property read. A common production trick is a getter that replaces itself with a data property after the first read. For local object fields, nullish assignment ??= is the compact version of “initialize only if missing.”

1const profile = {Run2  get permissions() {3    console.log("compute permissions");4    const value = ["read", "write"];5    Object.defineProperty(this, "permissions", {6      value,7      enumerable: true,8      configurable: true,9    });10    return value;11  },12};13 14console.log("before");15console.log(profile.permissions.join("+"));16console.log(profile.permissions.join("+"));17 18const state = {};19state.config ??= (() => {20  console.log("init config");21  return { theme: "dark" };22})();23state.config ??= { theme: "light" };24console.log(state.config.theme);

Arrays are eager: map and filter visit the whole array before slice keeps the first few results. Generators are pull-based. With iterator helpers in Node 22 and current Chrome, Iterator.from(source).map(...).filter(...).take(3) reads like an array pipeline but computes only enough values to satisfy take.

1function* naturals() {2  let n = 1;3  while (true) {4    produced++;5    yield n++;6  }7}8 9let produced = 0;10let mapped = 0;11let tested = 0;12 13const firstEvenSquares = Iterator.from(naturals())14  .map((n) => {15    mapped++;16    return n * n;17  })18  .filter((square) => {19    tested++;20    return square % 2 === 0;21  })22  .take(3)23  .toArray();24 25console.log(firstEvenSquares.join(","));26console.log(produced + "/" + mapped + "/" + tested);

1let produced = 0;2let mapped = 0;3let tested = 0;4 5const firstEvenSquares = Array.from({ length: 1000 }, (_, index) => {6  produced++;7  return index + 1;8})9  .map((n) => {10    mapped++;11    return n * n;12  })13  .filter((square) => {14    tested++;15    return square % 2 === 0;16  })17  .slice(0, 3);18 19console.log(firstEvenSquares.join(","));20console.log(produced + "/" + mapped + "/" + tested);

The lazy counter line is the proof. To get three even squares, the source only has to produce numbers 1 through 6. The eager comparison produces, maps, and tests all 1000 entries before slicing the same visible values.

Use memoization for expensive pure derivations: normalized search indexes, parsed routes, formatted labels, compiled regular expressions, derived permission sets, and idempotent resource loads. Use laziness for optional panels, rarely opened settings, infinite or large streams, and progressive data processing.

A cache is part of your state model. Name it, size it, and delete from it when the business event says the old value is no longer true.

Common misconceptions

• “Memoization is just optimization.” It changes when code runs. With an impure function, that changes behavior.
• “The cache key is an implementation detail.” The key defines what “same input” means.
• “WeakMap is a smaller Map.” It is a different lifetime tool: object keys only, no iteration, no size.
• “Lazy code is automatically faster.” It is faster only when avoided work is larger than the overhead and complexity.
• “Generators are arrays with different syntax.” They pause and resume; they do not hold all future values.

Key takeaways

• Memoize only when “same inputs” is true and the cache key encodes that truth.
• Use call counters, cache sizes, and visible outputs to prove behavior; avoid timing claims in examples.
• Map, nested Maps, WeakMap, and size-capped caches solve different lifetime problems.
• Async memoizers should cache the promise and evict rejected promises.
• Lazy values and lazy sequences compute when pulled, which can avoid most of the work.

Next, the curriculum moves toward advanced recursion. The same discipline applies there: prove what runs, keep state explicit, and choose abstractions that make the call graph easier to reason about.