Functional Programming in JavaScript: Why and How

The Case for Functional Programming in JavaScript

Imagine, if you will, the stately columns of the Parthenon—each discrete, sturdy, yet working in concert to uphold the whole. Such is the architecture of functional programming: each function a pillar, pure and unyielding, supporting the grand structure of your codebase. JavaScript, long the bustling agora of programming languages, has matured into a most accommodating host for this paradigm.

Let us examine, with the patience of a cartographer, the “why” and “how” of functional programming in JavaScript.

---

Why Functional Programming?—A Table of Contrasts

Aspect	Imperative Approach	Functional Approach
State Management	Mutable, scattered	Immutable, explicit
Side Effects	Commonplace	Minimized, isolated
Reusability	Often limited	High, via pure functions
Predictability	Prone to hidden mutations	Deterministic, referentially transparent
Composability	Ad hoc, tightly coupled	Modular, chainable

Like the disciplined verses of Dante, functional programming favors order, predictability, and compositional beauty.

---

Core Principles and Their Embodiments

1. Pure Functions

A pure function is akin to a skilled scribe: given the same parchment and ink, the script remains unchanged, time after time.

Criteria:
– No side effects (e.g., mutations, I/O).
– Output determined solely by input.

// Pure
function add(a, b) {
    return a + b;
}

// Impure (side effect)
let total = 0;
function addToTotal(a) {
    total += a; // mutates external state
}

Encouragement: Consider the serenity of a pure function. It neither borrows nor lends, but always delivers exactly what is asked.

---

2. Immutability

In the spirit of Euclid’s unchanging postulates, immutable data structures do not waver once defined.

Techniques:

Avoid Mutating Arrays

// Mutable
let arr = [1, 2, 3];
arr.push(4); // alters arr

// Immutable
let arr2 = [1, 2, 3];
let arr3 = [...arr2, 4]; // arr2 remains untouched

Avoid Mutating Objects

// Mutable
let user = { name: 'Ada', age: 30 };
user.age = 31;

// Immutable
let updatedUser = { ...user, age: 31 };

Note: Libraries like Immutable.js or immer can further support this discipline.

---

3. Higher-Order Functions

Just as Virgil guided Dante, a higher-order function leads other functions, accepting them as arguments or returning new ones.

Example: Array Methods

// Classic for loop
let squares = [];
for (let i = 0; i < nums.length; i++) {
    squares.push(nums[i] * nums[i]);
}

// Functional
let squares = nums.map(x => x * x);

Custom Higher-Order Function

function makeMultiplier(factor) {
    return function(n) {
        return n * factor;
    };
}

const double = makeMultiplier(2);
double(5); // 10

---

4. Function Composition

Consider the interlocking stones of a Roman arch: each piece, when combined, forms a sturdy passage. Function composition builds complex logic from simple, reusable parts.

Simple Composition

const toUpper = str => str.toUpperCase();
const exclaim = str => `${str}!`;

const shout = str => exclaim(toUpper(str));
shout('salve'); // SALVE!

Generic Compose Utility

const compose = (...fns) => x =>
    fns.reduceRight((v, f) => f(v), x);

const shout = compose(exclaim, toUpper);
shout('vale'); // VALE!

---

5. Avoiding Side Effects

Side effects are like mischievous sprites in folklore—unpredictable and rarely welcome. In functional programming, side effects are isolated, often at the “edges” of the system.

Side Effect Isolation

// Pure
function calculateTax(amount) {
    return amount * 0.2;
}

// Impure
function saveToDatabase(data) {
    // writes to external system
}

Guidance: Reserve impure functions for necessary interactions, and keep them separate from pure business logic.

---

Practical Patterns and Techniques

Declarative Array Processing

Functional programming’s declarative style allows us to express intent clearly, as a maestro conducts a symphony.

const books = [
    { title: 'Iliad', pages: 500 },
    { title: 'Odyssey', pages: 300 },
    { title: 'Aeneid', pages: 400 }
];

const totalPages = books
    .filter(book => book.pages > 350)
    .map(book => book.pages)
    .reduce((sum, pages) => sum + pages, 0);

Observation: Each method returns a new array or value, preserving the original collection—an ode to immutability.

---

Currying

Currying transforms a function of many arguments into a sequence of unary (single-argument) functions, reminiscent of a craftsman handing down tools, one after another.

function add(a) {
    return function(b) {
        return a + b;
    };
}

const add5 = add(5);
add5(10); // 15

Or, with ES6 arrow functions:

const add = a => b => a + b;

---

Recursion Over Iteration

Functional programming often favors recursion, akin to the endless motifs in Gothic cathedrals.

// Imperative
function factorial(n) {
    let acc = 1;
    for (let i = 2; i <= n; i++) {
        acc *= i;
    }
    return acc;
}

// Recursive
function factorial(n) {
    return n <= 1 ? 1 : n * factorial(n - 1);
}

Note: Tail call optimization, a promise whispered by the ES6 standard, is not yet widely implemented in JavaScript engines. Use recursion judiciously for large datasets.

---

Summary Table: Key Functional Tools in JavaScript

Tool/Concept	Built-in Support	Example Method	Library Alternative
Pure Functions	Native	–	–
Immutability	Partial	Object.freeze, spread	Immutable.js, immer
Higher-Order Funcs	Native	map, filter, reduce	lodash/fp, Ramda
Currying	Manual/Library	–	Ramda, lodash/fp
Composition	Manual/Library	–	Ramda

---

Step-by-Step: Refactoring to Functional Style

Let us transform a simple imperative operation into its functional counterpart, as carefully as a restorer rejuvenates a Renaissance fresco.

Imperative:

let numbers = [1, 2, 3, 4, 5];
let evens = [];
for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
        evens.push(numbers[i]);
    }
}

Functional:

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(n => n % 2 === 0);

Further abstraction:

const isEven = n => n % 2 === 0;
const evens = numbers.filter(isEven);

---

Functional Libraries

While JavaScript’s standard library is increasingly functional, external libraries further the cause:

• Ramda: Focuses on immutability and function composition.
• lodash/fp: A functional variant of lodash.
• Immutable.js: Persistent immutable collections.

Tip: Choose libraries judiciously, as a mason selects his stone—each must fit the needs and style of the project.

---

Final Encouragement

The functional approach in JavaScript, then, is no passing fancy, but a deliberate craft. Like Vitruvius’ principles of architecture—firmitas, utilitas, venustas—functional code is robust, practical, and, oftentimes, beautiful.