Functional Programming

Pure functions, immutability, composition, currying, and higher-order functions — the functional style in JavaScript.

What it is, in plain English: Functional programming (FP) is a style where you build programs by composing pure functions — functions that always return the same output for the same input and cause no side effects. JavaScript is a multi-paradigm language that supports FP natively: functions are first-class values, arrays have map/filter/reduce, and the spread operator enables immutable updates. FP principles make code more predictable, testable, and easier to reason about.

The functional style — build programs from small, reliable pieces

Functional programming is a way of writing code where every function is a pure calculation: same input always gives the same output, and nothing is modified. JavaScript isn't a purely functional language, but applying FP ideas makes code much easier to test and reason about.

Pure functions — predictable and testable

// Impure — depends on external state, unpredictable:
let tax = 0.18;
function calculateTotal(price) {
  return price + price * tax;   // depends on external 'tax' variable
}
// If tax changes, the function gives different results for the same price!

// Pure — all inputs are parameters, no external dependencies:
function calculateTotalPure(price, taxRate) {
  return price + price * taxRate;
}
console.log(calculateTotalPure(100, 0.18));  // always 118
console.log(calculateTotalPure(100, 0.18));  // still 118

// Pure functions are trivial to test:
// test("100 at 18% = 118", () => assert(calculateTotalPure(100, 0.18) === 118))

Immutability — never mutate, always return new

// Mutable (bad for FP):
function addItemMutable(cart, item) {
  cart.push(item);   // modifies the original — side effect!
  return cart;
}

// Immutable (FP style):
function addItem(cart, item) {
  return [...cart, item];   // returns a NEW array, original unchanged
}

const cart1 = ["apple", "banana"];
const cart2 = addItem(cart1, "cherry");

console.log(cart1);  // ["apple", "banana"] — unchanged
console.log(cart2);  // ["apple", "banana", "cherry"] — new array

// Same for objects:
const user = { name: "Alice", score: 90 };
const updated = { ...user, score: 95 };   // new object
console.log(user.score);    // 90 — original safe
console.log(updated.score); // 95

map / filter / reduce — the FP trinity

const products = [
  { name: "Laptop",  price: 60000, inStock: true  },
  { name: "Phone",   price: 25000, inStock: false },
  { name: "Tablet",  price: 30000, inStock: true  },
  { name: "Monitor", price: 15000, inStock: true  },
];

// filter — keep items matching a condition:
const available = products.filter(p => p.inStock);

// map — transform each item:
const discounted = available.map(p => ({
  ...p,
  price:     Math.round(p.price * 0.9),
  discount:  "10% off"
}));

// reduce — fold into a single value:
const total = discounted.reduce((sum, p) => sum + p.price, 0);

console.log(`${discounted.length} items available`);
console.log(`Total: ₹${total.toLocaleString("en-IN")}`);

// Chain them:
const totalDiscount = products
  .filter(p => p.inStock)
  .map(p => p.price * 0.1)
  .reduce((sum, d) => sum + d, 0);
console.log(`Total savings: ₹${totalDiscount.toLocaleString("en-IN")}`);

Higher-order functions — functions that work with functions

// A function that returns another function:
function multiplier(factor) {
  return (n) => n * factor;
}

const double = multiplier(2);
const triple = multiplier(3);
const halve  = multiplier(0.5);

console.log(double(10));  // 20
console.log(triple(10));  // 30
console.log(halve(10));   // 5

// A function that takes another function:
function applyTwice(fn, value) {
  return fn(fn(value));
}
console.log(applyTwice(double, 3));   // 12 (doubled twice)

Try It Yourself

// PURE FUNCTIONS — same input always same output, no side effects
// Impure (modifies external state):
let total = 0;
function addImpure(n) { total += n; return total; }  // depends on external 'total'

// Pure:
function add(total, n) { return total + n; }  // always predictable
console.log(add(10, 5));   // always 15, no matter what
console.log(add(10, 5));   // still 15

// IMMUTABILITY — never modify, always create new
const user = { name: "Alice", score: 95 };
// Wrong (mutates):
// user.score = 100;

// Right (creates new object):
const updated = { ...user, score: 100 };
console.log(user.score);    // 95 — original unchanged
console.log(updated.score); // 100

// HIGHER-ORDER FUNCTIONS — functions that take or return functions
function multiply(factor) {
  return (number) => number * factor;  // returns a function (currying)
}
const double = multiply(2);
const triple = multiply(3);
console.log(double(5));  // 10
console.log(triple(5));  // 15

// COMPOSE — build complex operations from simple functions
const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);
const pipe    = (...fns) => x => fns.reduce((v, f) => f(v), x);

const transform = pipe(
  x => x * 2,           // double
  x => x + 10,          // add 10
  x => x.toFixed(2),    // format
);
console.log(transform(5));  // "20.00"

// MAP / FILTER / REDUCE — the FP trinity
const scores = [85, 92, 67, 78, 95, 61];
const result = scores
  .filter(s => s >= 70)              // keep passing scores
  .map(s => ({ score: s, grade: s >= 90 ? "A" : "B" }))  // transform
  .reduce((acc, s) => acc + s.score, 0) / scores.filter(s => s>=70).length;

console.log("Average of passing scores:", result.toFixed(1));

Currying, composition, and point-free style

Currying — one argument at a time

// Currying transforms f(a, b, c) into f(a)(b)(c)
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) return fn(...args);
    return (...more) => curried(...args, ...more);
  };
}

const add = curry((a, b, c) => a + b + c);
console.log(add(1)(2)(3));  // 6
console.log(add(1, 2)(3));  // 6
console.log(add(1)(2, 3));  // 6

// Real use — create specialised functions:
const multiply = curry((a, b) => a * b);
const double   = multiply(2);    // partially applied
const times10  = multiply(10);

[1, 2, 3, 4, 5].map(double);    // [2, 4, 6, 8, 10]
[1, 2, 3, 4, 5].map(times10);   // [10, 20, 30, 40, 50]

compose and pipe

// pipe — left to right (most readable):
const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);

// compose — right to left (mathematical convention):
const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);

const process = pipe(
  str => str.trim(),
  str => str.toLowerCase(),
  str => str.split(" ").join("-"),
  str => encodeURIComponent(str),
);

console.log(process("  Hello World  "));  // "hello-world"

// Build data transforms as pipelines:
const processOrders = pipe(
  orders => orders.filter(o => o.status === "paid"),
  orders => orders.map(o => ({ ...o, tax: o.amount * 0.18 })),
  orders => orders.reduce((sum, o) => sum + o.amount + o.tax, 0),
  total  => total.toFixed(2),
);

Avoiding mutation with array/object transforms

// Updating nested state immutably:
const state = {
  user: { name: "Alice", preferences: { theme: "light", lang: "en" } },
  cart: [{ id: 1, qty: 2 }],
};

// Update nested property:
const newState = {
  ...state,
  user: {
    ...state.user,
    preferences: { ...state.user.preferences, theme: "dark" }
  }
};

// Update item in array (change qty of id:1):
const updatedCart = {
  ...state,
  cart: state.cart.map(item =>
    item.id === 1 ? { ...item, qty: item.qty + 1 } : item
  )
};

Functors, monads, and transducers

Functors — mappable containers

// A functor is any object with a map() that preserves structure.
// Array is the most familiar functor. You can make your own:
class Maybe {
  constructor(value) { this._value = value; }
  static of(value)   { return new Maybe(value); }
  isNothing()        { return this._value == null; }
  map(fn)            { return this.isNothing() ? this : Maybe.of(fn(this._value)); }
  getOrElse(def)     { return this.isNothing() ? def : this._value; }
}

const safeHead = arr => Maybe.of(arr[0]);
const result = safeHead([1, 2, 3])
  .map(x => x * 2)
  .map(x => x + 1)
  .getOrElse(0);   // 3

const empty = safeHead([])
  .map(x => x * 2)   // skipped — isNothing()
  .getOrElse(0);      // 0

Transducers — composable, efficient array transforms

// Regular chaining creates intermediate arrays:
[1,2,3,4,5].filter(x => x > 2).map(x => x * 2);  // [3,4,5] → [6,8,10]

// Transducers compose without intermediate arrays:
const mapping  = fn => reducer => (acc, val) => reducer(acc, fn(val));
const filtering = pred => reducer => (acc, val) => pred(val) ? reducer(acc, val) : acc;

const xform = compose(
  filtering(x => x > 2),
  mapping(x => x * 2),
);

const into = (xf, init, coll) => coll.reduce(xf((acc, v) => [...acc, v]), init);
console.log(into(xform, [], [1,2,3,4,5]));  // [6, 8, 10] — no intermediate array

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.