Functions as Values: Storing in Objects and Arrays in JavaScript

Functions as Values: Storing in Objects and Arrays in JavaScript

Because functions are first-class citizens, you can store them in objects and arrays. This enables strategy patterns, dispatch tables, and functional pipelines.

Functions in Objects (Methods)

const calc = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b,
  divide: (a, b) => a / b,
};
calc.add(2, 3);       // 5
calc.multiply(4, 5);  // 20
``
This is the strategy pattern: different functions for different operations, all in one object.

### Functions in Arrays (Pipelines)

```js
const pipeline = [
  (x) => x + 1,
  (x) => x * 2,
  (x) => x - 3,
];
const result = pipeline.reduce((acc, fn) => fn(acc), 5);
// 5 -> 6 -> 12 -> 9
``
An array of functions can be reduced into a pipeline. This is functional composition.

### Dispatch Tables

```js
const operations = {
  "+": (a, b) => a + b,
  "-": (a, b) => a - b,
  "*": (a, b) => a * b,
  "/": (a, b) => a / b,
};
function calculate(a, op, b) {
  const fn = operations[op];
  if (!fn) throw new Error(`Unknown operator: ${op}`);
  return fn(a, b);
}
calculate(10, "+", 5); // 15
calculate(10, "*", 3); // 30
``
A dispatch table maps keys to functions. This is cleaner than a `switch` statement and easy to extend.

### Event Handlers as Object Properties

```js
const handlers = {
  onClick: (event) => console.log("clicked", event.target),
  onSubmit: (event) => console.log("submitted", event.target),
  onKeydown: (event) => console.log("key", event.key),
};
button.addEventListener("click", handlers.onClick);
form.addEventListener("submit", handlers.onSubmit);
``
Storing handlers in an object makes it easy to remove them later:

```js
button.removeEventListener("click", handlers.onClick);
``
### Function Arrays for Middleware

```js
const middleware = [
  (ctx, next) => { ctx.user = authenticate(ctx.token); next(); },
  (ctx, next) => { ctx.data = fetch(ctx.url); next(); },
  (ctx, next) => { ctx.result = transform(ctx.data); next(); },
];
function run(ctx) {
  let i = 0;
  function next() {
    if (i < middleware.length) middleware[i++](ctx, next);
  }
  next();
}
``
Middleware is an array of functions executed in order, each calling `next` to continue.

### The Takeaway

Functions can be stored in objects (strategy pattern, methods, dispatch tables) and arrays (pipelines, middleware). This enables flexible, extensible code without switch statements or deep nesting. Use dispatch tables for keyed operations, arrays for pipelines, and object properties for organized handlers.