Functional Patterns

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Pure function

A function whose answer depends only on its inputs and which changes nothing outside itself.

Side effect

Anything a function does besides returning a value, like changing a global variable, the page or storage.

Immutability

Never changing a value after it is made; you build a new value with the change instead.

Shallow copy

A copy of the outer object or array only; objects inside it are still shared with the original.

Composition

Joining small functions so the output of one is the input of the next.

pipe / compose

Helpers that compose functions: pipe runs them left to right, compose right to left.

Currying

Turning f(a, b, c) into f(a)(b)(c): one argument per call.

Partial application

Fixing some of a function's arguments now, getting back a function that takes the rest.

Closure

A function together with the variables it remembers from where it was created.

1. 1

   Add a step to the pipeline

   In the second example, write const exclaim = (s) => s + "!"; and add it at the end of toSlug's pipe. Predict the first line, then run it. What happens if you put it first instead?

2. 2

   Feel the shallow freeze

   In the first example, wrap the inner array too: sizes: Object.freeze([1, 2]). Predict: does settings.sizes.push(3) still work? Run it and read the error.

3. 3

   Break the curry helper

   Give volume a default parameter: (l, w, h = 1) => l * w * h. fn.length now counts only parameters before the first default. Predict what volume(2) returns, then check.

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   A pure function gives the same output for the same input and has no side effects (a side effect is anything a function does besides returning a value: changing a variable outside itself, writing to the page, logging, saving to storage). (a, b) => a + b is pure. A function that pushes into a global array is not. Pure functions are easy to test (call it, check the answer), easy to cache (Topic 15.3) and safe to run in any order. Real programs need side effects, so the pattern is to keep them at the edges (event handlers, the render step) and keep the logic in the middle pure.

2. 2

   Immutability means not changing a value after it's made; you make a new value instead. Strings and numbers are already immutable. Objects and arrays are not: arr.push(x) changes the array that every variable pointing to it sees (Phase 6 showed that objects are shared by reference). The immutable way is to copy with changes: { ...obj, done: true }, [...arr, item], arr.filter(...), arr.map(...), and the ES2023 copy methods toSorted, toReversed, toSpliced and with(index, value). A big win: comparing oldState === newState instantly tells you whether anything changed, which is how React and many state libraries decide what to redraw.

3. 3

   Spread copies are shallow: { ...user } makes a new outer object but nested objects are still shared. To change something deep, copy each level on the path ({ ...user, address: { ...user.address, city: "Pune" } }), or make a full deep copy with structuredClone(value) (a browser and Node function, not part of ECMAScript itself). Object.freeze(obj) stops changes to an object's own properties; it is also shallow, and in sloppy (non-strict) code a blocked write fails silently, while in strict mode and modules it throws a TypeError.

4. 4

   Composition joins small functions into a bigger one, where the output of one becomes the input of the next. pipe(f, g, h)(x) means h(g(f(x))): read left to right, like the assembly line. compose(f, g, h)(x) is the same idea read right to left, f(g(h(x))), as in maths. Both are a one-line reduce (Phase 5). Composition only works smoothly when each function takes one input and returns one output, which is where currying helps.

5. 5

   Currying turns a function of several arguments into a chain of one-argument functions: add(a, b, c) becomes add(a)(b)(c). Each call returns a new function that remembers the arguments so far through a closure (Phase 3: a function keeps access to the variables of the place it was created). A general curry(fn) helper uses fn.length (the number of declared parameters) to know when it has collected enough arguments and can call the real function.

6. 6

   Partial application fixes some arguments now and leaves the rest for later, giving a more specific function: const hello = greet.bind(null, "Hello"), or an arrow name => greet("Hi", name). Currying is one way to get it, but partial application doesn't need one-argument-at-a-time calls. Put the argument that changes least first (the config, the rate, the greeting) and the data last, so the partly applied function slots straight into map, filter or a pipe.

• ↔

  Immutable updates make change detection and undo trivial, but deep nested updates get verbose; flattening state (storing items by id) or a helper library (such as Immer) keeps them readable.

• ↔

  Point-free pipelines of tiny functions read beautifully when they're short, but long chains of curried helpers can be harder for a team to read and debug than a plain loop.

• I can tell a pure function from one with side effects.

• I can update nested objects and arrays without mutating them.

• I know spread and Object.freeze are shallow, and when to use structuredClone.

• I can write pipe, compose and curry from memory.

• I can use partial application to make a specialised function for map or filter.