A function is a callable piece of JavaScript that performs work when followed by parentheses, such as `square(2)`. It can accept inputs, return a computed value, or perform an action. Functional programming treats functions as the main building blocks for transforming data and organizing program behavior. section 2.3 section 1.2
Functions make repeated behavior reusable. A hardcoded instruction that writes “Hello World” to one page element must be rewritten to change the message, formatting, or target. Giving those change points names as parameters turns the instruction into a function that can be called with different values. section 1.2
function printMessage(elementId, format, message) {
document.querySelector(`#${elementId}`).innerHTML =
`<${format}>${message}</${format}>`;
}
printMessage('msg', 'h1','Hello World');
`printMessage` accepts an element id, HTML format, and message, then uses those inputs to produce a configurable DOM update. section 1.2
A function that returns a value can feed another function. For example, an array callback receives each number and returns its square; `map` collects those returned values into a new result. Arrow syntax offers a short form for small functions: `num => Math.pow(num, 2)`. section 1.2 section 2.3
JavaScript functions are especially useful in a functional style because they can be treated as values:
- Assign a function to a variable, including an anonymous function or arrow expression. section 2.3
- Store a function as an object method. section 2.3
- Pass a function into another function to choose or customize an operation. section 2.3
- Return a function from another function, enabling calls such as `add(3)(3)`. section 2.3
Passing an operation
`applyOperation(a, b, opt)` does not decide how to combine `a` and `b`; it calls `opt(a, b)`. Passing a multiplication function makes `applyOperation(2, 3, multiplier)` return `6`. This separates the reusable control flow from the particular operation. section 2.3
In functional programming, a useful function generally produces a value rather than only changing external state. A counter-based `increment()` reads and modifies a variable outside itself, so later calls can depend on changes elsewhere. By contrast, `counter => counter + 1` receives its input explicitly and returns a result without altering an external counter. section 1.2 section 2.3
Small functions can be combined into a larger operation. An average function can delegate to `total`, `size`, and `divide`; a display workflow can separate finding a student, formatting data, and appending it to the page. Splitting behavior this way supports modularity and lets each part have a focused job. section 1.2 section 2.3
Listing 4.1. Building a manual function pipeline with trim and normalize
// trim :: String -> String
const trim = (str) => str.replace(/^\s*|\s*$/g, '');
// normalize :: String -> String
const normalize = (str) => str.replace(/\-/g, '');
normalize(trim(' 444-44-4444 ')); //-> '444444444' #1
The pipeline applies `trim` first and passes its returned string to `normalize`, illustrating how compatible single-input functions can be chained. section 4.2
The number of declared inputs is a function’s arity. Functions with one input, called unary functions, are presented as simpler and more flexible for composition because they tend to have one responsibility. When related results must travel together, a tuple can package them as one returned value. section 4.2
