Higher-Order Functions

A higher-order function is any function that does at least one of these two things:

1. Takes a function as an argument (a callback)
2. Returns a function

That is it. If a function does either of those, it is a higher-order function. We have already been using them — setTimeout, addEventListener, and all the array methods like map and filter are higher-order functions.

Array methods — the most common higher-order functions

These are the ones that come up in interviews all the time. Let’s go through each one.

map — transform every element

map creates a new array by running a function on every element. The original array is not modified.

const nums = [1, 2, 3, 4];
const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8]

filter — keep elements that pass a test

filter creates a new array with only the elements where the callback returns true.

const nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter(n => n % 2 === 0);
console.log(evens); // [2, 4, 6]

reduce — boil down to a single value

reduce is the most powerful (and most confusing) array method. It takes a callback and an initial value, and reduces the array to a single value by accumulating.

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10

forEach — do something with each element (no return)

forEach runs a function on every element but does not return anything. It is for side effects (like logging or modifying external state).

const names = ["Manish", "Pika", "Luna"];
names.forEach(name => console.log(`Hello, ${name}!`));

find — get the first match

find returns the first element that matches the condition, or undefined if nothing matches.

const users = [{ id: 1, name: "Manish" }, { id: 2, name: "Pika" }];
const found = users.find(u => u.id === 2);
console.log(found); // { id: 2, name: "Pika" }

some and every — boolean checks

some returns true if at least one element passes. every returns true if all elements pass.

const nums = [1, 2, 3, 4, 5];
console.log(nums.some(n => n > 4));  // true  — 5 is greater than 4
console.log(nums.every(n => n > 0)); // true  — all are positive
console.log(nums.every(n => n > 3)); // false — 1, 2, 3 fail the check

Custom higher-order function

We can write our own higher-order functions too. Here is one that returns a function:

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

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

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

This is also an example of closures — the returned function “remembers” the factor from its parent scope. Higher-order functions and closures go hand in hand.

Why higher-order functions matter

They let us write declarative code — we describe what we want, not how to do it step by step. Compare:

// Imperative (how)
const results = [];
for (let i = 0; i < nums.length; i++) {
  if (nums[i] > 2) results.push(nums[i] * 2);
}

// Declarative (what) — using higher-order functions
const results = nums.filter(n => n > 2).map(n => n * 2);

In simple language, higher-order functions are just functions that work with other functions. They are everywhere in JavaScript and are a must-know for interviews. Master map, filter, and reduce and we are 80% there.