Mastering Currying, Partial Application, and Composition in JavaScript

TL;DR: Currying transforms a function with multiple arguments into a sequence of unary functions. Partial application fixes a number of arguments, returning a new function awaiting the rest. Composition chains functions so the output of one becomes the input of the next. Together, they lead to highly modular, reusable code.

1. What Is Currying?

Currying takes a function that accepts multiple arguments and turns it into a series of functions that each take one argument. Instead of calling f(a, b, c), you call f(a)(b)(c).

Analogy: Imagine an assembly line where each station adds one specific part. Currying splits the work so each function “station” handles exactly one piece.

// Uncurried
function add(x, y, z) {
  return x + y + z
}
console.log(add(1, 2, 3)) // → 6

// Curried
function curriedAdd(x) {
  return function (y) {
    return function (z) {
      return x + y + z
    }
  }
}
console.log(curriedAdd(1)(2)(3)) // → 6

• curriedAdd returns a function after each argument.
• You can supply arguments one at a time.
• This is especially powerful for building small, reusable functions.

2. Visualizing Currying

1. Initial Call: curriedAdd(1) creates a closure capturing x = 1.
2. Next Stage: Calling the returned function with 2 captures y = 2.
3. Final Stage: Calling the last function with 3 computes 1 + 2 + 3.

[ curriedAdd(1) ] ──► returns fn(y) {…} with { x: 1 }
       ↓(2)
[ fn(2) ] ──► returns fn(z) {…} with { x: 1, y: 2 }
       ↓(3)
[ fn(3) ] ──► computes 1 + 2 + 3 → 6

3. What Is Partial Application?

Partial application lets you fix a few arguments of a function and return a new function that takes the remaining arguments.

function multiply(a, b, c) {
  return a * b * c
}

function partial(fn, ...fixedArgs) {
  return function (...remainingArgs) {
    return fn(...fixedArgs, ...remainingArgs)
  }
}

const doubleAndTriple = partial(multiply, 2, 3)
console.log(doubleAndTriple(4)) // → 24 (2 * 3 * 4)

• partial takes multiply and pre-fills a = 2, b = 3.
• The returned function only needs one more argument, c.
• Great for specializing generic utilities.

4. Visualizing Partial Application

[ partial(multiply, 2, 3) ]
          ↓ returns
[ fn(c) ] ──► calls multiply(2, 3, c)
          ↓(4)
[ result ] ──► multiply(2, 3, 4) → 24

5. Function Composition

Composition lets you build complex operations by piping the result of one function into another.

const compose = (f, g) => (x) => f(g(x))

// Helpers
const trim = (s) => s.trim()
const wrapInDiv = (s) => `<div>${s}</div>`
const toUpperCase = (s) => s.toUpperCase()

// Compose multiple functions
const processText = compose(wrapInDiv, compose(toUpperCase, trim))

console.log(processText('  hello world  '))
// → "<div>HELLO WORLD</div>"

• compose(f, g) returns a new function x => f(g(x)).
• You can nest compositions to chain many steps.
• Keeps each function focused on a single responsibility.

6. Pitfalls & Best Practices

7. When and Why to Use

• Currying: When you need to incrementally supply arguments or integrate with APIs that expect unary functions (e.g., Array.map).
• Partial Application: To create specialized utilities without rewriting boilerplate.
• Composition: To declaratively define data flows and transformations, improving readability.

By mastering these techniques, you’ll write JavaScript that’s more modular, testable, and expressive—unlocking the true power of functional programming on the web.