Understanding Higher-Order Functions in JavaScript

Ibrahim ManassehIbrahim Manasseh
3 min read

JavaScript is a powerful language that treats functions as first-class citizens. This means functions can be assigned to variables, passed as arguments to other functions, and even returned from functions. That’s where Higher-Order Functions come in.

In this blog, we’ll break down:

  • What higher-order functions are

  • Why they're useful

  • Real examples using map(), filter(), and reduce()

  • How to write your own higher-order function

What is a Higher-Order Function?

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.

In short, it's a function that works with other functions.

// Example 1: A function that takes another function as an argument
function greetUser(callback) {
  console.log("Hello!");
  callback();
}

function sayGoodbye() {
  console.log("Goodbye!");
}

greetUser(sayGoodbye);

// Example 2: A function that returns another function
function multiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = multiplier(2);
console.log(double(5)); // Output: 10

Why Use Higher-Order Functions?

  • Cleaner Code: Reduces repetition and promotes reusability.

  • Abstraction: You can abstract out behaviors (like iteration or filtering).

  • Functional Programming: HOFs are a core part of writing more functional, declarative JavaScript.

Built-in Higher-Order Functions in JavaScript

1. map()

Used to transform an array.

const numbers = [1, 2, 3];
const squares = numbers.map(num => num * num);
console.log(squares); // [1, 4, 9]

2. filter()

Used to filter out values based on a condition.

const ages = [12, 18, 25, 16];
const adults = ages.filter(age => age >= 18);
console.log(adults); // [18, 25]

3. reduce()

Used to reduce an array to a single value.

const prices = [10, 20, 30];
const total = prices.reduce((sum, price) => sum + price, 0);
console.log(total); // 60

These are all higher-order functions because they accept callback functions as arguments.

Writing Your Own Higher-Order Function

Let’s build a simple higher-order function that runs a function twice:

function runTwice(func) {
  func();
  func();
}

function sayHi() {
  console.log("Hi there!");
}

runTwice(sayHi);
// Output:
// Hi there!
// Hi there!

Or a function that delays execution:

function delayExecution(func, delay) {
  setTimeout(func, delay);
}

delayExecution(() => {
  console.log("This runs after 2 seconds");
}, 2000);

Higher-order functions are essential in modern JavaScript. They help you write more expressive, less repetitive, and easier-to-read code. Whether you're using built-ins like map() or building your own utilities, learning HOFs will level up your JavaScript skills

  • A higher-order function takes or returns another function.

  • map(), filter(), and reduce() are great tools to master.

  • You can build your own HOFs to make code more flexible and clean.

🔗 References & Further Reading

For deeper exploration and official documentation:

0
Subscribe to my newsletter

Read articles from Ibrahim Manasseh directly inside your inbox. Subscribe to the newsletter, and don't miss out.

higher-order functions

Written by

Ibrahim Manasseh
Ibrahim Manasseh