Functional patterns in JavaScript

This chapter follows Higher-order functions and callbacks.

These patterns show up in libraries and interview questions; in application code, reach for them when they simplify APIs or performance—not to avoid readable loops.

Immediately invoked function expressions (IIFE)

An IIFE runs a function once at load time, creating a private scope for var and early modules.

1
const module = (function () {
2
  let secret = 0;
3
  return {
4
    inc() {
5
      return ++secret;
6
    },
7
  };
8
})();

Before ES modules, IIFEs avoided global pollution and loop-capture bugs with var. Today, prefer import/export; IIFEs remain useful for legacy bundles and tiny script snippets.

Currying

Currying turns a function of several arguments into a chain of functions each taking one argument (or a fixed smaller chunk). It helps partial application and uniform unary APIs.

1
const add = (a) => (b) => a + b;
2
add(2)(3); // 5
3

4
function curry(fn) {
5
  return function curried(...args) {
6
    if (args.length >= fn.length) {
7
      return fn.apply(this, args);
8
    }
9
    return (...next) => curried(...args, ...next);
10
  };
11
}

Manual currying is verbose; lodash curry or hand-written wrappers are common when arity is stable.

Compose and pipe

Compose applies functions right-to-left; pipe goes left-to-right—same as mathematical composition versus reading order.

1
const compose =
2
  (...fns) =>
3
  (x) =>
4
    fns.reduceRight((v, f) => f(v), x);
5

6
const pipe =
7
  (...fns) =>
8
  (x) =>
9
    fns.reduce((v, f) => f(v), x);
10

11
const trimAndLower = pipe(
12
  (s) => s.trim(),
13
  (s) => s.toLowerCase(),
14
);

Use compose/pipe for pure data transforms; avoid deep stacks when debugging stack traces matters.

Memoize

Memoization caches results keyed by arguments so repeated calls with the same inputs skip work.

1
function memoize(fn) {
2
  const cache = new Map();
3
  return (...args) => {
4
    const key = JSON.stringify(args);
5
    if (cache.has(key)) return cache.get(key);
6
    const result = fn(...args);
7
    cache.set(key, result);
8
    return result;
9
  };
10
}

Production memoizers use stronger keys (e.g. first argument identity), LRU eviction, and cache busting for unbounded argument spaces. React’s useMemo applies the same idea to render-derived values.

That completes the Functions and Scope series. For object models and this in prototypes, see Objects in JavaScript.