Pure functions and immutability

Why functional style?

Many bugs come from data changing unexpectedly: a function deep inside the code changes an array that three other parts of the program are also using. Functional programming is a style that reduces this by preferring pure functions and data that does not change. You do not need a special language; JavaScript supports this style well.

Pure functions

A function is pure when (1) its result depends only on its arguments, and (2) it has no side effects. A side effect is anything a function does besides returning a value: changing a variable outside, changing its arguments, writing to a file or database, logging, reading the clock or Math.random.

// Impure: depends on and changes outside state
let total = 0;
function addToTotal(x) { total += x; return total; }

// Pure: same input → same output, nothing changed outside
function add(a, b) { return a + b; }

// Impure: result depends on the current time
function isWeekend() { return [0, 6].includes(new Date().getDay()); }
// Pure version: pass the date in
function isWeekendOn(date) { return [0, 6].includes(date.getDay()); }

Real programs need side effects (saving orders, sending SMS). The goal is to push them to the edges: keep the core logic (prices, discounts, validation) pure, and do the I/O in a thin outer layer. The pure core is then trivial to test.

Immutable updates

Immutability means you never change an existing object or array. To "change" something, you make a new version with the change, leaving the old one untouched. Spread, map, filter, slice, toSorted and with all return new values.

const cart = [{ sku: 'A', qty: 1 }, { sku: 'B', qty: 2 }];

const added = [...cart, { sku: 'C', qty: 1 }];                         // add
const removed = cart.filter((item) => item.sku !== 'A');                // remove
const updated = cart.map((item) => item.sku === 'B' ? { ...item, qty: 5 } : item); // change one
const sorted = cart.toSorted((a, b) => b.qty - a.qty);                  // sort without mutating

console.log(cart); // still the original two items, untouched

Why this helps

• Easier debugging: data only changes where you create new versions, so you can follow it.
• Easy "undo" and history: keep the old versions.
• Cheap change detection: if oldState !== newState, something changed. React, Redux and many state libraries rely on this.
• Safe sharing: no function can surprise another by changing shared data.