Higher-order functions and recursion: JavaScript Programming (language in depth) (Beginner)

Higher-order functions

A higher-order function is a function that works with other functions: it takes one as an argument, returns one, or both. You already met makeCounter (returns a function) and sort (takes a compare function). They let you separate WHAT to do with each item from HOW to go through the items.

javascript

function repeat(times, action) {
  for (let i = 1; i <= times; i++) action(i);
}
repeat(3, (n) => console.log('Reminder', n));

Prints Reminder 1, Reminder 2, Reminder 3. repeat knows how to loop; the callback decides what happens.

Writing your own map and filter

Building simple versions yourself removes the mystery from the built-in array methods you will use daily (module 4).

javascript

function myMap(list, fn) {
  const out = [];
  for (const item of list) out.push(fn(item));
  return out;
}
function myFilter(list, test) {
  const out = [];
  for (const item of list) if (test(item)) out.push(item);
  return out;
}
console.log(myMap([1, 2, 3], (n) => n * 10));       // [10, 20, 30]
console.log(myFilter([5, 12, 8, 20], (n) => n > 9)); // [12, 20]

Recursion: a function that calls itself

Recursion solves a problem by solving a smaller copy of the same problem. Every recursive function has two parts: a base case, which answers the smallest problem directly and stops, and a recursive case, which calls the function again on a smaller input.

javascript

function factorial(n) {
  if (n <= 1) return 1;          // base case
  return n * factorial(n - 1);   // recursive case
}
console.log(factorial(5)); // 120 = 5 × 4 × 3 × 2 × 1

The call stack

The call stack is the list of function calls that are waiting to finish. Each call is stacked on top of the previous one, and each finishes in reverse order.

output

factorial(3)
  → 3 * factorial(2)
         → 2 * factorial(1)
                → 1          (base case)
         → 2 * 1 = 2
  → 3 * 2 = 6

How factorial(3) unwinds.

Careful: Without a correct base case, or with an input that never reaches it (factorial(-1) with if (n === 1)), the function calls itself forever until the engine stops it with RangeError: Maximum call stack size exceeded. Write the base case first, and make sure every call moves toward it.

Where recursion fits naturally

Recursion shines for nested data: folders inside folders, comments with replies, a menu with sub-menus, JSON inside JSON. A loop handles one level; recursion handles any depth.

javascript

function countFiles(folder) {
  let count = folder.files.length;
  for (const sub of folder.folders) count += countFiles(sub);
  return count;
}
const drive = { files: ['a.pdf'], folders: [
  { files: ['b.jpg', 'c.jpg'], folders: [] },
  { files: [], folders: [{ files: ['d.txt'], folders: [] }] },
] };
console.log(countFiles(drive)); // 4

Think of it like this: Recursion is like a set of Russian dolls, or opening a box of sweets that contains smaller boxes. You open the outer box, and for each small box inside you do exactly the same thing, until you reach a box with only sweets in it (the base case).

Tip: For very deep inputs (hundreds of thousands of levels), a loop is safer than recursion because the call stack is limited. Use recursion when it makes the code much clearer and the depth is reasonable.

Higher-order functions and recursion

Explanation