🧮 Functional Programming Concepts

What Is Functional Programming?

Functional programming (FP) is a paradigm that treats computation as the evaluation of functions and avoids changing state or mutating data. Where imperative code describes how to do something step by step, functional code describes what you want as a series of transformations.

🧮 A kitchen analogy: Functional programming is like a recipe that never alters the original ingredients. You take inputs, apply steps that each produce a new result, and end with a finished dish — the pantry is exactly as you found it. Imperative code, by contrast, keeps reaching back into the pantry and rearranging it as it goes.

The same task in both styles — summing the even numbers — shows the difference. Both return 30, but one narrates the steps and the other declares the intent:

// Imperative: describe HOW, mutate a running total
function sumEvensImperative(numbers) {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) sum += numbers[i];
  }
  return sum;
}

// Functional: describe WHAT, compose transformations
function sumEvensFunctional(numbers) {
  return numbers
    .filter((n) => n % 2 === 0)
    .reduce((sum, n) => sum + n, 0);
}

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(sumEvensFunctional(nums)); // 30

Pure Functions

A pure function obeys two rules: given the same input it always returns the same output, and it produces no side effects (it doesn't modify anything outside itself — no globals, no mutating arguments, no I/O). Purity is the single most important idea in FP because it makes code predictable.

// Impure: reads and mutates external state
let counter = 0;
function increment() {
  counter += 1; // side effect
  return counter;
}
increment(); // 1
increment(); // 2  — same call, different result

// Pure: output depends only on inputs
function add(a, b) {
  return a + b;
}
add(2, 3); // 5, forever

// Impure: mutates the argument
function addItemImpure(arr, item) {
  arr.push(item); // caller's array is changed
  return arr;
}

// Pure: returns a new array, leaves the input alone
function addItemPure(arr, item) {
  return [...arr, item];
}

Immutability

Immutability means never changing data after you create it. Instead of editing an object or array in place, you produce a new copy with the change applied. This prevents a whole category of "who changed my data?" bugs and makes state transitions easy to trace.

// Mutable — the original cart is altered
function addToCartMutable(cart, item) {
  cart.items.push(item);
  cart.total += item.price;
  return cart;
}

// Immutable — a brand new cart object is returned
function addToCartImmutable(cart, item) {
  return {
    ...cart,
    items: [...cart.items, item],
    total: cart.total + item.price,
  };
}

const cart = { items: [], total: 0 };
const updated = addToCartImmutable(cart, { name: 'Book', price: 20 });

console.log(cart.total);    // 0  — original untouched
console.log(updated.total); // 20 — new object

Composition & No Shared State

Functional code builds big behavior by composing small functions, and it keeps functions independent by avoiding shared mutable state. Compose lets one function's output flow into the next; isolation via closures gives each unit its own state.

const compose = (...fns) => (x) => fns.reduceRight((acc, fn) => fn(acc), x);
const pipe = (...fns) => (x) => fns.reduce((acc, fn) => fn(acc), x);

const double = (x) => x * 2;
const increment = (x) => x + 1;
const square = (x) => x * x;

const transform = pipe(double, increment, square);
console.log(transform(3)); // 49  (3 → 6 → 7 → 49)

Shared mutable state is the enemy of predictability: functions that read and write the same variable become order-dependent and hard to reason about. Encapsulate state in a closure instead so each instance is independent:

// Problematic: everything mutates one shared variable
let sharedTotal = 0;
const addToTotal = (v) => (sharedTotal += v); // order-dependent, fragile

// Better: isolated state per counter
function createCounter(start = 0) {
  let count = start;
  return {
    increment: (v = 1) => (count += v),
    value: () => count,
  };
}

const a = createCounter();
const b = createCounter(100);
a.increment(10); // 10
b.increment(10); // 110 — completely independent

Currying & the Maybe Functor

Two techniques appear constantly in functional codebases.

Currying

Currying turns a multi-argument function into a chain of single-argument functions, which makes partial application natural. Arrow syntax makes it concise:

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

// Fix the first argument to build a specialized function
const add10 = add(10);
console.log(add10(5)(1)); // 16

The Maybe functor

A functor is a container with a map method that applies a function to the value inside while preserving the container. The Maybe functor models a value that might be missing, letting you chain transformations without a pile of null checks:

class Maybe {
  constructor(value) { this._value = value; }
  static of(value) { return new Maybe(value); }
  isNothing() { return this._value == null; } // null or undefined
  map(fn) {
    return this.isNothing() ? this : Maybe.of(fn(this._value));
  }
  getOrElse(fallback) {
    return this.isNothing() ? fallback : this._value;
  }
}

const getName = (person) => person.name;
const upper = (s) => s.toUpperCase();

// Safe even when the value is null — no crash
console.log(Maybe.of(null).map(getName).map(upper).getOrElse('No name')); // "No name"
console.log(Maybe.of({ name: 'Alice' }).map(getName).map(upper).getOrElse('No name')); // "ALICE"

FP in React & Redux

You do not have to seek functional programming out — the tools you will use apply it for you.

React: pure rendering, immutable updates

A React component is conceptually a pure function of its props and state, and state updates are done immutably. Notice every handler returns new data rather than mutating the old:

function useTodos() {
  const [todos, setTodos] = useState([]);

  const addTodo = (text) =>
    setTodos((prev) => [...prev, { id: Date.now(), text, done: false }]);

  const toggle = (id) =>
    setTodos((prev) =>
      prev.map((t) => (t.id === id ? { ...t, done: !t.done } : t))
    );

  const remove = (id) =>
    setTodos((prev) => prev.filter((t) => t.id !== id));

  return { todos, addTodo, toggle, remove };
}

Redux: reducers are pure functions

A Redux reducer is a pure function (state, action) => newState. It never mutates the existing state; it returns a new object. That purity is what powers time-travel debugging and predictable updates.

const initialState = { todos: [] };

function todosReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return { ...state, todos: [...state.todos, action.payload] };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map((t) =>
          t.id === action.payload.id ? { ...t, done: !t.done } : t
        ),
      };
    default:
      return state;
  }
}

Hands-on Exercise

const sales = [
  { product: 'Laptop', price: 1200, qty: 5 },
  { product: 'Phone', price: 800, qty: 10 },
  { product: 'Mouse', price: 50, qty: 25 },
];

const pipe = (...fns) => (x) => fns.reduce((acc, fn) => fn(acc), x);

const withValue = (sale) => ({ ...sale, value: sale.price * sale.qty });

const addValues = (arr) => arr.map(withValue);
const bigOnes   = (arr) => arr.filter((s) => s.value > 1000);
const sumValues = (arr) => arr.reduce((t, s) => t + s.value, 0);

const totalBigSales = pipe(addValues, bigOnes, sumValues);

console.log(totalBigSales(sales)); // 6000 + 8000 = 14000
console.log(sales[0].value);       // undefined — originals untouched

Best Practices

Summary & Quiz

📚 Further Reading

• MDN — Pure function
• Professor Frisby's Mostly Adequate Guide to FP
• Redux — Three Principles

🚀 What's Next?

You've now covered the advanced-JavaScript trio of closures, higher-order functions, and functional style. Next the module shifts to resilience: the different types of errors in JavaScript and how to handle them.