Closures and Higher-Order Functions in JavaScript

Closures and Higher-Order Functions in JavaScript

A higher-order function is a function that takes a function as an argument, returns a function, or both. Closures are what make them work.

How HOFs Use Closures

When a HOF takes a callback, the callback closes over variables from where it was defined. When a HOF returns a function, the returned function closes over the HOF's local variables.

map, filter, reduce

const multiplier = 3;
const result = [1, 2, 3].map((n) => n * multiplier);
// [3, 6, 9]
``
The `map` callback closes over `multiplier`. Without closures, the callback could not access outer variables.

### Custom HOF: `compose`

```js
function compose(f, g) {
  return (x) => f(g(x));
}
const addOne = (n) => n + 1;
const double = (n) => n * 2;
const addOneThenDouble = compose(double, addOne);
addOneThenDouble(5); // 12 (addOne(5) = 6, double(6) = 12)
``
`compose` returns a function that closes over `f` and `g`. Each call to the returned function invokes `f(g(x))`.

### Custom HOF: `partial`

```js
function partial(fn, ...presetArgs) {
  return (...laterArgs) => fn(...presetArgs, ...laterArgs);
}
const add = (a, b, c) => a + b + c;
const add5 = partial(add, 5);
add5(3, 2); // 10
``
`partial` returns a function that closes over `fn` and `presetArgs`.

### Custom HOF: `curry`

```js
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) return fn(...args);
    return (...next) => curried(...args, ...next);
  };
}
const sum = curry((a, b, c) => a + b + c);
sum(1)(2)(3); // 6
``
`curry` returns a chain of functions, each closing over the accumulated arguments.

### HOFs and the Event Loop

```js
function withTimeout(fn, delay) {
  return (...args) => setTimeout(() => fn(...args), delay);
}
const delayedLog = withTimeout(console.log, 1000);
delayedLog("hello"); // logs "hello" after 1 second
``
The returned function closes over `fn` and `delay`. When called, it schedules `fn` via `setTimeout`.

### The Takeaway

Higher-order functions rely on closures: callbacks close over outer variables, and returned functions close over the HOF's local variables. `map`/`filter`/`reduce` callbacks, `compose`, `partial`, `curry`, and `withTimeout` all use closures. Understanding this makes functional programming in JS click.