Functions as Arguments and Return Values in JavaScript

Functions as Arguments and Return Values in JavaScript

Because functions are first-class citizens, you can pass them as arguments and return them from other functions. This is the core of higher-order functions.

Passing Functions as Arguments (Callbacks)

function process(value, fn) {
  return fn(value);
}
process(5, (x) => x * 2);       // 10
process("hello", (s) => s.toUpperCase()); // "HELLO"
process([1, 2, 3], (arr) => arr.reduce((a, b) => a + b, 0)); // 6
``
`process` is a higher-order function: it takes a function `fn` as an argument and calls it with `value`.

### Real-World Callbacks

```js
// setTimeout
setTimeout(() => console.log("later"), 1000);

// map, filter, reduce
[1, 2, 3].map((n) => n * 2);       // [2, 4, 6]
[1, 2, 3].filter((n) => n > 1);    // [2, 3]
[1, 2, 3].reduce((a, b) => a + b); // 6

// event listeners
button.addEventListener("click", () => console.log("clicked"));

// fetch
fetch("/api").then((res) => res.json()).then((data) => console.log(data));
``
### Returning Functions (Function Factories)

```js
function multiplier(factor) {
  return (n) => n * factor;
}
const double = multiplier(2);
const triple = multiplier(3);
double(5);  // 10
triple(5);  // 15
``
`multiplier` is a higher-order function: it returns a new function. The returned function closes over `factor`.

### Both: Taking and Returning Functions

```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
``
`compose` takes two functions and returns a new function that chains them.

### Why This Is Powerful

- **Callbacks**: pass behavior into APIs without the API knowing what the behavior is.
- **Strategy pattern**: pass different functions for different behaviors.
- **Functional composition**: chain small functions into complex pipelines.
- **Partial application**: preset some arguments and return a function for the rest.
- **Decorators**: wrap a function with extra behavior.

### The Takeaway

Passing functions as arguments (callbacks) and returning functions (factories) is the core of higher-order functions. `setTimeout`, `map`/`filter`/`reduce`, event listeners, `fetch.then`, `compose`, `partial`, and `curry` all rely on this. This is what makes JavaScript a functional-friendly language.