All Roadmaps›⚡ JavaScript›Phase 2›Higher-Order Functions & Callbacks

Higher-Order Functions & Callbacks

📖 Concept

A Higher-Order Function (HOF) is a function that either:

  1. Takes one or more functions as arguments, OR
  2. Returns a function as its result

A Callback is a function passed as an argument to another function, to be called later.

HOFs are everywhere in JavaScript: map, filter, reduce, forEach, setTimeout, addEventListener, Promise.then.

🏠 Real-world analogy: A HOF is like a delivery service. You give them a package (callback) and instructions. They handle the logistics and deliver the package at the right time. You don't deliver it yourself — you delegate.

💻 Code Example

codeTap to expand ⛶
1// Basic callback
2function greet(name, callback) {
3  const greeting = `Hello, ${name}!`;
4  callback(greeting);
5}
6greet("Alice", (msg) => console.log(msg));
7

8// Higher-order function that returns a function
9function multiplier(factor) {
10  return function(number) {
11    return number * factor;
12  };
13}
14const double = multiplier(2);
15const triple = multiplier(3);
16console.log(double(5));  // 10
17console.log(triple(5));  // 15
18

19// Custom HOFs
20function unless(condition, fn) {
21  if (!condition) fn();
22}
23unless(false, () => console.log("This runs!"));
24

25function repeat(n, action) {
26  for (let i = 0; i < n; i++) action(i);
27}
28repeat(3, (i) => console.log(`Iteration ${i}`));
29

30// Practical: function composition
31function compose(...fns) {
32  return (x) => fns.reduceRight((acc, fn) => fn(acc), x);
33}
34const addOne = (x) => x + 1;
35const square = (x) => x * x;
36const addOneThenSquare = compose(square, addOne);
37console.log(addOneThenSquare(4)); // 25 = (4+1)²
38

39// Callbacks in async operations
40function fetchData(url, onSuccess, onError) {
41  // Simulating async operation
42  setTimeout(() => {
43    const success = Math.random() > 0.3;
44    if (success) onSuccess({ data: "result" });
45    else onError(new Error("Failed to fetch"));
46  }, 1000);
47}
48fetchData("/api",
49  (data) => console.log("Success:", data),
50  (err) => console.error("Error:", err)
51);

🏋️ Practice Exercise

Mini Exercise:

  1. Write a HOF retry(fn, n) that calls fn up to n times until it succeeds
  2. Implement your own map and filter functions using callbacks
  3. Create a pipe function (like compose but left-to-right)
  4. Write a throttle function that limits callback execution to once per interval

⚠️ Common Mistakes

  • Passing the result of a function instead of the function itself: setTimeout(greet(), 1000) calls greet immediately

  • Not handling errors in callbacks — always have an error-first callback pattern or error handler

  • Creating deeply nested callbacks (callback hell) — use Promises or async/await instead

  • Losing this context when passing methods as callbacks — use .bind() or arrow functions

  • Not understanding that callbacks can be synchronous too — array.map(fn) calls fn synchronously

💼 Interview Questions

🎤 Mock Interview

Mock interview is powered by AI for Higher-Order Functions & Callbacks. Login to unlock this feature.

← PreviousEvent HandlingNext →Closures & Lexical Scope