5. Functions as values

Two loops, one shape

Here are some particles, and two jobs: collect every x, and collect the particles that move right.

const ps = [
  { x: 1, vx: 2, mass: 5 },
  { x: 4, vx: -1, mass: 2 },
  { x: 9, vx: 3, mass: 1 },
];

const xs = [];
for (let i = 0; i < ps.length; i++) {
  xs.push(ps[i].x);
}

const right = [];
for (let i = 0; i < ps.length; i++) {
  if (ps[i].vx > 0) {
    right.push(ps[i]);
  }
}

Apart from one line each, these are the same loop. Chapter 1 said: when work repeats, name it. But here the part that differs is itself a piece of work: “take the x”, “is it moving right?”. To write the loop once, you need to hand a piece of work to a function.

A function is a value

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

const twice = double;
const ops = [double];

console.log(twice(5));         // 10
console.log(ops[0](7));        // 14
console.log(twice === double); // true

const twice = double has no parentheses, so nothing runs: it copies the function into a new name. In JavaScript every function is an object^[3], so chapter 4’s rules apply: the variable holds an arrow, and copying it makes an alias.

Handing work over: callbacks

Now the loop can be written once. The part that differs comes in as a parameter, get:

function pluck(ps, get) {
  const out = [];
  for (let i = 0; i < ps.length; i++) {
    out.push(get(ps[i]));
  }
  return out;
}

function getX(p) {
  return p.x;
}

console.log(pluck(ps, getX)); // [ 1, 4, 9 ]

We pass getX, not getX(). pluck decides when to call it, and with which particle. Passing getX(ps[0]) would hand over the result, the number 1, and pluck would fail trying to call a number.

A function can also return a function. The function (n) { ... } here has no name: it’s a function written where a value goes.

function times(k) {
  return function (n) {
    return n * k;
  };
}

const triple = times(3);
console.log(triple(5)); // 15

Something odd is going on in times. Chapter 1 said a call’s page is thrown away when it returns. So how does triple still know that k is 3? Hold that thought: it is the next chapter.

Arrow functions

Small callbacks are so common that JavaScript has a short way to write them^[4]:

const double = (n) => n * 2;
const add = (a, b) => a + b;
const getX = (p) => p.x;

Read => as “becomes”: “n becomes n * 2”.

map, filter and reduce

Arrays come with higher-order methods that run the common loops for you.

Step through all three. Watch what happens to each value your callback returns:

const xs = [1, 4, 9];
const big = xs.filter((n) => n > 3);
const tens = big.map((n) => n * 10);
const sum = tens.reduce(
  (t, n) => t + n, 0);

So the two loops from the start of the chapter shrink to one line each:

const xs = ps.map((p) => p.x);
const right = ps.filter((p) => p.vx > 0);

Always give reduce its starting value. Without one, it uses the first item instead, and on an empty array there is no first item, so it throws a TypeError^[5].

const ps = [
  { x: 1, vx: 2, mass: 5 },
  { x: 4, vx: -1, mass: 2 },
  { x: 9, vx: 3, mass: 1 },
];

const xs = ps.map((p) => p.x);
console.log(xs);

const right = ps.filter(
  (p) => p.vx > 0,
);
console.log(right.length);

const mass = ps.reduce(
  (t, p) => t + p.mass,
  0,
);
console.log(mass);
console.log(ps.length);

Loops that don’t count: while

A for loop is built for counting. A while loop just repeats while a condition holds, and you move things along yourself. break leaves a loop at once. continue skips the rest of this pass and goes back to the check. Both work in for loops too.

const vs = [3, -1, 8, 12, 5];
let i = 0;
let total = 0;
while (i < vs.length) {
  const v = vs[i];
  i++;
  if (v < 0) {
    continue; // skip negatives
  }
  if (v > 10) {
    break; // stop at the first big one
  }
  total = total + v;
}
console.log(total); // 11

Notice that i++ comes before the continue. If it came after, a negative number would skip the i++, i would never move again, and the loop would run forever.

Your turn

function countIf(xs, test) {
  // your code here
}

const big = (n) => n > 4;
console.log(countIf([1, 5, 8], big));

function sumBy(ps, f) {
  // your code here
}

const ps = [{ mass: 5 }, { mass: 2 }];
console.log(sumBy(ps, (p) => p.mass));

function doublings(n) {
  // your code here
}

console.log(doublings(5));

What you learned

• Functions are first-class: values you can store, pass and return. f is the function; f() calls it.
• A callback is a function you hand to another function to call. A higher-order function takes or returns functions.
• Arrow functions: (x) => x * 2 returns its expression. With braces, you need return.
• map transforms every item, filter keeps some, reduce combines them into one. All three build new values and leave the array alone.
• A while loop runs while its condition holds. break leaves, continue skips ahead.

Next: how triple remembered its k.