Academy — Sanjib Sikder

A Function That Takes a Function

You have already been doing this. Every time you wrote array.map(fn) or array.filter(fn), you passed a function as an argument. But you probably never stopped to ask: what exactly is happening there?

Start here — no arrays yet. Just a plain function receiving another function:

JavaScript

Ctrl+Enter to run

function doTwice(fn) {
  fn();
  fn();
}

function greet() {
console.log("Namaste!");
}

doTwice(greet);

doTwice doesn't know or care what fn does. It just calls it. greet doesn't know it will be called twice. They are completely independent — connected only at the moment of the call.

A function that receives a function as an argument (or returns one) is called a higher-order function. The function passed in is called a callback.

The Key Insight: Functions Are Values

In JavaScript, a function is just a value — the same as a number or a string. You can store it in a variable, put it in an array, pass it to another function, return it from a function.

JavaScript

Ctrl+Enter to run

function add(a, b)      { return a + b; }
function subtract(a, b) { return a - b; }
function multiply(a, b) { return a * b; }

function calculate(a, b, operation) {
const result = operation(a, b);
console.log(`Result: ${result}`);
}

calculate(10, 3, add); // passes the add function itself
calculate(10, 3, subtract);
calculate(10, 3, multiply);

// You can also pass an anonymous function inline
calculate(10, 3, (a, b) => a ** b); // 10 to the power 3

calculate is a general-purpose machine. The behaviour — what to actually do with the two numbers — is plugged in from outside. This is the fundamental shift in thinking: instead of hard-coding logic, you make it a parameter.

Writing Your Own map

Array.map is so useful that it's built into the language. But it's not magic — you could write it yourself:

JavaScript

Ctrl+Enter to run

function myMap(array, transform) {
  const result = [];
  for (const item of array) {
    result.push(transform(item));
  }
  return result;
}

const marks = [55, 72, 88, 41, 95];
const doubled = myMap(marks, m => m * 2);
const grades = myMap(marks, m => m >= 75 ? "A" : m >= 50 ? "B" : "C");

console.log(doubled);
console.log(grades);

myMap handles the iteration — the tedious mechanical part. You supply the interesting part: what to do with each element. This division of responsibility is the entire point of higher-order functions.

Writing Your Own filter

JavaScript

Ctrl+Enter to run

function myFilter(array, test) {
  const result = [];
  for (const item of array) {
    if (test(item)) result.push(item);
  }
  return result;
}

const scores = [55, 72, 88, 41, 95, 63, 30, 79];

const passed = myFilter(scores, s => s >= 50);
const topScores = myFilter(scores, s => s >= 75);
const evens = myFilter(scores, s => s % 2 === 0);

console.log("Passed: ", passed);
console.log("Top: ", topScores);
console.log("Evens: ", evens);

The loop doesn't change. The decision changes. You wrote one function that can filter by any criterion, ever.

Writing Your Own reduce

reduce is the most powerful of the three — and the most misunderstood. It collapses an entire array into a single value by repeatedly applying a callback.

JavaScript

Ctrl+Enter to run

function myReduce(array, combine, initial) {
  let accumulator = initial;
  for (const item of array) {
    accumulator = combine(accumulator, item);
  }
  return accumulator;
}

const numbers = [1, 2, 3, 4, 5];

const sum = myReduce(numbers, (acc, n) => acc + n, 0);
const product = myReduce(numbers, (acc, n) => acc * n, 1);
const max = myReduce(numbers, (acc, n) => n > acc ? n : acc, -Infinity);

console.log("Sum: ", sum);
console.log("Product:", product);
console.log("Max: ", max);

reduce can produce anything — a number, a string, an array, an object. The callback decides what "combining" means. The accumulator starts as initial and grows with every element.

Chaining: map, filter, reduce Together

This is where it all comes together. Real data processing is a pipeline — filter out noise, transform what remains, combine into a result.

JavaScript

Ctrl+Enter to run

const students = [
  { name: "Rahul",  marks: 82, subject: "Physics"   },
  { name: "Priya",  marks: 91, subject: "Chemistry" },
  { name: "Arjun",  marks: 49, subject: "Physics"   },
  { name: "Sneha",  marks: 78, subject: "Chemistry" },
  { name: "Vikram", marks: 95, subject: "Physics"   },
  { name: "Meera",  marks: 55, subject: "Chemistry" },
];

// Physics students who passed — average mark
const physicsAvg = students
.filter(s => s.subject === "Physics" && s.marks >= 50)
.map(s => s.marks)
.reduce((sum, m, _, arr) => sum + m / arr.length, 0);

console.log("Physics pass average:", physicsAvg.toFixed(1));

// Top student per subject
const topBySubject = students.reduce((acc, s) => {
if (!acc[s.subject] || s.marks > acc[s.subject].marks) {
acc[s.subject] = s;
}
return acc;
}, {});

for (const [subject, student] of Object.entries(topBySubject)) {
console.log(`Top in ${subject}: ${student.name} (${student.marks})`);
}

Each step in the chain does one thing. No intermediate variables. No mutation. The data flows through the pipeline and you get exactly what you need.

Functions That Return Functions (Revisited)

You saw this in closures. Now see it as a higher-order function pattern — creating specialised callbacks on demand:

JavaScript

Ctrl+Enter to run

// A function that produces filter callbacks
function above(threshold) {
  return (value) => value > threshold;
}

function below(threshold) {
return (value) => value < threshold;
}

function between(low, high) {
return (value) => value >= low && value <= high;
}

const scores = [12, 45, 67, 78, 89, 92, 34, 55, 71];

console.log(scores.filter(above(70))); // [78, 89, 92, 71]
console.log(scores.filter(below(50))); // [12, 45, 34]
console.log(scores.filter(between(50, 80))); // [67, 78, 55, 71]

above(70) doesn't filter — it creates a filter. You call it once, get a function back, and that function is passed to .filter. This pattern gives you reusable, readable, composable conditions.

Callbacks in the Wild: forEach and sort

forEach and sort are also higher-order functions — you just see them less analytically because they're so familiar.

JavaScript

Ctrl+Enter to run

const students = [
  { name: "Priya",  marks: 91 },
  { name: "Arjun",  marks: 49 },
  { name: "Rahul",  marks: 82 },
  { name: "Sneha",  marks: 78 },
  { name: "Vikram", marks: 95 },
];

// sort receives a comparator — a callback that defines ordering
const byMarksDesc = [...students].sort((a, b) => b.marks - a.marks);
const byNameAsc = [...students].sort((a, b) => a.name.localeCompare(b.name));

console.log("By marks (high to low):");
byMarksDesc.forEach(({ name, marks }) => console.log(` ${name}: ${marks}`));

console.log("\nAlphabetically:");
byNameAsc.forEach(({ name }) => console.log(` ${name}`));

The comparator callback (a, b) => b.marks - a.marks is a pure higher-order function interaction — sort calls your function repeatedly to decide the order, and you just define the rule.

A General-Purpose Pipeline

Once you understand higher-order functions, you can build tools that work on any data at all:

JavaScript

Ctrl+Enter to run

function pipeline(...fns) {
  return (value) => fns.reduce((v, fn) => fn(v), value);
}

const processScore = pipeline(
score => Math.max(0, Math.min(100, score)), // clamp 0–100
score => Math.round(score), // round to integer
score => score >= 75 ? `${score} — Pass` : `${score} — Fail`,
);

console.log(processScore(87.4));
console.log(processScore(49.9));
console.log(processScore(110)); // clamped to 100
console.log(processScore(-5)); // clamped to 0

pipeline takes any number of functions and chains them left-to-right. Each function receives the output of the previous one. This is functional composition — a concept that scales from three functions to entire application architectures.

What You Have Learned

Higher-order functions are the mechanism that makes JavaScript's functional style possible.

The key ideas:

A callback is a function passed to another function to be called later
A higher-order function receives a function as an argument, returns one, or both
map, filter, reduce are higher-order functions — and you can write them yourself in a dozen lines
Chaining these three gives you a powerful, readable data-processing pipeline with no mutation
Functions that return specialised callbacks (above(70), makeMultiplier(3)) are the higher-order + closure pattern working together
sort and forEach are also higher-order — their comparators and iteratees are callbacks

In the next lesson: Asynchronous JavaScript — timers, promises, and async/await. Everything you have learned about callbacks has been building to this. In async code, the callback isn't called immediately — it's called later, after something happens. Understanding that shift in time is what separates beginners from developers who can build real applications.

Callbacks & Higher-Order Functions

A Function That Takes a Function

The Key Insight: Functions Are Values

Writing Your Own map

Writing Your Own filter

Writing Your Own reduce

Chaining: map, filter, reduce Together

Functions That Return Functions (Revisited)

Callbacks in the Wild: forEach and sort

A General-Purpose Pipeline

What You Have Learned