Assalam u Alaikum & Hello Everyone! 👋

I hope you all are good ✨🤗

In the last article, we learned about pure functions & how pure functions help us in functional programming.

In this article, we will learn about another important and widely used concept in the world of functional programming that is Higher Order Functions 🦄

What are Higher Order Functions?

Higher Order Functions are functions that take other functions as arguments or return functions. They are highly used in functional programming languages such as javascript.

There are so many built-in higher order functions like map, filter, and reduce. All of them are higher order functions because they take a function as an argument.

If we take a look at the map function, it takes an anonymous function as a callback function in its argument. Remember, any function that takes another function as an argument is a higher order function.

Let's create our own higher order function now! 🚀

Scenario 01: Function As Argument

Let's say, we have a list of users and we want to filter out all the users based on their activity status.

We can always use the filter method for this purpose but here, we will build our own filter to understand the concept of a higher order function.

const users = [
  { name: 'Leanne Graham', active: false },
  { name: 'Ervin Howell', active: true },
  { name: 'Clementine Bauch', active: true },
  { name: 'Patricia Lebsack', active: false },
  { name: 'Chelsey Dietrich', active: true },
  { name: 'Mrs. Dennis Schulist', active: false },
  { name: 'Kurtis Weissnat', active: true },
  { name: 'Nicholas Runolfsdottir V', active: false },
  { name: 'Glenna Reichert', active: false },
  { name: 'Clementina DuBuque', active: true },
];

We have the data now, let's implement the logic for the filter function.

const filter = (list, criteria) => {
  const result = [];
  for (let i = 0; i < list.length; i++) {
    if (criteria(list[i], i, list)) {
      result.push(list[i]);
    }
  }
  return result;
};

We have implemented our very own filter function that takes an array as an argument and a criteria function as a second argument.

Since this function, takes a function as an argument, we can say this is a higher order function.

Here is the way to call this function:

const activeUsers = filter(users, (user, index, users) => {
  return user.active;
});

console.log('Active users: ', activeUsers);
/*
 [
    { name: 'Ervin Howell', active: true },
    { name: 'Clementine Bauch', active: true },
    { name: 'Chelsey Dietrich', active: true },
    { name: 'Kurtis Weissnat', active: true },
    { name: 'Clementina DuBuque', active: true },
  ]
*/

This was one of the simplest examples to understand a higher order function.

Let's take an example of a function returning another function!

Scenario 02: Function As Return Value

Again we are going to take a very simple example to understand the concept. we are going to implement a function makeAdder(x), that takes a single argument x, and returns a new function. The function it returns takes a single argument y, and returns the sum of x and y.

Note: This question is widely asked in javascript interviews 😅

As a solution, we are going to solve this question by creating a higher order function.

const makeAdder = (x) => {
  return (y) => x + y;
};

Here you can see, we are returning another function from the makeAdder function. Hence, makeAdder is a higher order function.

Let's test the makeAdder now.

const add5 = makeAdder(5);
const add10 = makeAdder(10);

console.log(add5(2)); // 7
console.log(add10(2)); // 12

I hope the concept of higher order function is clear to you and it was a good read for you. Thank you! ✨

👉 Follow me: Github Twitter LinkedIn Youtube