Functional Programming in JavaScript: Patterns & Practices

What is functional programming javascript?\n\nFunctional programming javascript emphasizes a style where functions are the primary building blocks, data is immutable, and side effects are minimized. This approach helps you compose simple functions into powerful pipelines. In JavaScript, because functions are first-class values, you can treat them as data, pass them around, and build abstractions that scale.\n\njavascript\n// pure function\nconst add = (a, b) => a + b;\n\n// immutability example\nconst user = { name: "Ana", age: 30 };\nconst updated = { ...user, age: 31 }; // does not mutate\n\n\njavascript\n// without side effects\nfunction increment(a) { return a + 1; }\n

Core concepts: Pure functions, immutability, and referential transparency

In functional programming, your code should be composed of pure functions, work with immutable data, and favor referential transparency (same input gives same output, no hidden state changes). JavaScript makes it convenient to treat functions as values, allowing higher-order functions and clean abstractions.\n\njavascript\n// Pure function: no side effects\nconst multiply = (x, y) => x * y;\n\n// Immutability example with spread syntax\nconst a = { v: 1 };\nconst b = { ...a, v: 2 }; // a remains unchanged\n

Higher-order functions and function composition\nHigher-order functions take other functions as arguments or return functions. Composition merges simple ideas into powerful pipelines.\n\njavascript\nconst map = fn => arr => arr.map(fn);\nconst double = n => n * 2;\nconst addOne = n => n + 1;\n\nconst process = map(double) |> map(addOne); // using a hypothetical pipe for clarity\n// If you don\'t have |> you can use a simple compose\nconst compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);\nconst pipeline = compose(addOne, double);\nconsole.log(pipeline(3)); // 7\n\n\njavascript\n// Real example with pipeline\nconst toUpper = s => s.toUpperCase();\nconst exclaim = s => s + '!';\nconst greet = name => `Hello, ${name}`;\nconst pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);\nconst sayHello = pipe(greet, s => `${s} ${toUpper("world")} ${exclaim("" )}`);\n// Output: depends on defined pipeline; focus on pattern rather than syntax here\n

Currying and partial application\nCurrying transforms a function with multiple arguments into a sequence of functions each taking a single argument. This enables powerful partial application.\n\njavascript\nconst add = a => b => a + b;\nconst add5 = add(5);\nconsole.log(add5(3)); // 8\n\n// Partial application with data pipelines\nconst sumThree = a => b => c => a + b + c;\nconst sumWith5 = sumThree(5);\nconsole.log(sumWith5(2)(3)); // 10\n

Data transformations with pipelines\nPipelines connect small steps into a data transformation flow, reducing explicit intermediate state and side effects.\n\njavascript\nconst pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);\n\nconst nums = [1, 2, 3, 4];\nconst result = pipe(\n arr => arr.map(n => n * 2),\n arr => arr.filter(n => n > 4),\n arr => arr.reduce((s, n) => s + n, 0)\n)(nums);\nconsole.log(result); // 14 (2,4,6,8 -> 20; adjust expectations accordingly)\n

Real-world patterns and libraries\nIn practical code, you mix FP concepts with pragmatic JS. This section shows a tiny Maybe-like helper to handle nulls gracefully, plus simple data transformations.\n\njavascript\n// A mini Maybe for safe chaining\nconst Maybe = value => ({\n map: fn => value == null ? Maybe(null) : Maybe(fn(value)),\n getOrElse: fallback => value == null ? fallback : value\n});\n\nconsole.log(Maybe(2).map(n => n * 3).getOrElse(0)); // 6\nconsole.log(Maybe(null).map(n => n * 3).getOrElse(0)); // 0\n

Testing FP JavaScript: pure paths and guards\nTesting should focus on pure functions and deterministic behavior. This section demonstrates a simple test style using a tiny assert utility.\n\njavascript\nfunction assertEqual(a, b, msg) { if (a !== b) throw new Error(msg || `Expected ${a} to equal ${b}`); }\n\nfunction add(a, b) { return a + b; }\nassertEqual(add(2, 3), 5, 'add should sum values');\n