Week 6: Functions as Values & Immutability

1. Functions as First-Class Values

Saying JavaScript treats functions as first-class values means exactly what it says: a function can be stored in a variable, passed as an argument, returned from another function, and put inside an array or object — anything you can do with a number or a string:

function double(n) { return n * 2; }

const stored = double;               // stored in a variable
const list = [double, (n) => n + 1]; // stored inside an array
const obj = { transform: double };   // stored as an object property

console.log(stored(5));        // 10
console.log(list[0](5));       // 10
console.log(obj.transform(5)); // 10

This is precisely why numbers.map(double) from Week 5 works at all: double isn't special syntax passed into map, it's a value — the exact same function reference that stored holds above — being handed to another function as an ordinary argument.

2. Higher-Order Functions

A higher-order function is any function that either takes another function as an argument, returns a function, or both. You've already used several — map, filter, reduce and setTimeout are all higher-order functions built into JavaScript. Writing your own is the same idea:

function repeat(n, action) {
  const results = [];
  for (let i = 0; i < n; i++) {
    results.push(action(i)); // action is a function, passed in as an argument
  }
  return results;
}

const squares = repeat(5, (i) => i * i);
console.log(squares); // [0, 1, 4, 9, 16]

repeat doesn't know or care what action actually does — it just calls whatever function it was handed, once per iteration. This separation is the whole value of higher-order functions: repeat's looping logic stays fixed and reusable, while the behavior on each iteration is supplied fresh by the caller.

3. Immutability Patterns

Mutation means changing a value in place, rather than creating a new one — and it's a common source of subtle bugs, because other code that still holds a reference to the same array or object gets changed out from under it:

function addItem(cart, item) {
  cart.push(item); // mutates the array the caller passed in!
  return cart;
}

const original = ["pen", "notebook"];
const updated = addItem(original, "eraser");

console.log(original); // ["pen", "notebook", "eraser"] -- changed, even though we didn't ask for that
console.log(original === updated); // true -- same array, not a new one

Whoever still holds a reference to original now silently sees the extra item too — that's rarely what's intended, and it's exactly the kind of bug that's hard to trace back to its source. The fix is to build and return a new array or object instead of changing the existing one, using spread syntax:

function addItem(cart, item) {
  return [...cart, item]; // a brand-new array: everything from cart, plus item
}

const original = ["pen", "notebook"];
const updated = addItem(original, "eraser");

console.log(original); // ["pen", "notebook"] -- untouched
console.log(updated);  // ["pen", "notebook", "eraser"] -- a separate, new array
console.log(original === updated); // false

// The same pattern works on objects:
const user = { name: "Priya", age: 29 };
const olderUser = { ...user, age: 30 }; // copy every field, then override age
console.log(user.age, olderUser.age); // 29 30

[...cart, item] spreads every element of cart into a new array literal, then adds item at the end — the original cart is never touched. The object version works identically: {'{'} ...user, age: 30 {'}'} copies every field from user, then the explicit age: 30 after it overrides just that one field in the new object.

4. Callback Patterns in Practice

A callback is simply a function passed into another function to be called later — every callback you've written for map, filter or setTimeout already qualifies. Two patterns worth recognizing as your own code starts using more of them:

function isEven(n) {
  return n % 2 === 0;
}

// Named: reads clearly, and isEven is reusable elsewhere
const evens1 = [1, 2, 3, 4].filter(isEven);

// Inline: fine for short, one-off logic that won't be reused
const evens2 = [1, 2, 3, 4].filter((n) => n % 2 === 0);

Both produce the same result. A named function is worth extracting once the logic is reused elsewhere, needs a descriptive name to stay readable, or is complex enough that inlining it would clutter the call site — an inline arrow function is perfectly fine for short, single-use logic.

5. A First Look at Currying & Composition

Two ideas worth recognizing at a glance now, even without going deep yet: currying turns a multi-argument function into a chain of single-argument functions, and composition chains small functions into a pipeline where each one's output feeds the next one's input:

function add(a) {
  return function (b) {
    return a + b; // b is captured together with a, via a closure
  };
}

const addFive = add(5);
console.log(addFive(3)); // 8
console.log(add(10)(20)); // 30 -- called all at once, same underlying logic

const double = (n) => n * 2;
const addOne = (n) => n + 1;

const result = addOne(double(5)); // 5 -> double -> 10 -> addOne -> 11
console.log(result); // 11

Notice add is built on exactly the closure pattern from Week 3 — the returned inner function captures a and adds b to it whenever it's eventually called. Both currying and composition come up constantly in functional-style JavaScript once functions are fully comfortable as values; Coding Practice's Module 9 (in the site's separate practice problem set) goes considerably deeper on both, including a reusable pipe() and compose() helper, if you want more repetitions.

6. Hands-on Exercise

7. Knowledge Check

Four quick questions. Expand each to check your answer.