JavaScript Higher-Order Functions

A higher-order function is a function that does at least one of these:

1. takes another function as an argument, or
2. returns a function.

That is all. You have used them already: map, filter and addEventListener are higher-order functions, because they receive a callback.

Taking a function

1
2
3
4
5
6

function applyTwice(fn, value) {
  return fn(fn(value));
}

const addFive = n => n + 5;
console.log(applyTwice(addFive, 10)); // → 20

Returning a function

This one is useful: a function that builds other functions.

1
2
3
4
5
6
7
8
9
10
11

function multiplier(factor) {
  return function (number) {
    return number * factor;
  };
}

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

console.log(double(5)); // → 10
console.log(triple(5)); // → 15

multiplier(2) returns a new function that remembers factor = 2. That memory is a closure, explained in Closures.

A practical example: filtering rules

1
2
3
4
5
6
7
8
9

const users = [
  { name: "Maya", age: 25 },
  { name: "Arjun", age: 17 },
  { name: "Sam", age: 31 }
];

const olderThan = limit => user => user.age > limit;

console.log(users.filter(olderThan(18)).map(u => u.name)); // → ["Maya", "Sam"]

olderThan(18) produces the function that filter needs.

Why it matters

• You reuse the structure (looping, filtering) and plug in the rule.
• Code becomes a set of small pieces you can combine.

Built-in higher-order functions

The Functional JavaScript chapter builds on this idea.