Definitive guide to Higher Order Function (HOC)

Higher Order Functions in Javascript

Introduction

In this article, we will learn about higher order functions in JavaScript. We will learn what higher order functions are, how to create them, and how to use them. We will also learn about some common higher order functions in JavaScript.

What are Higher Order Functions?

A higher order function is a function that takes one or more functions as arguments or returns a function as its result. In other words, a higher order function is a function that operates on other functions. Higher order functions are a powerful feature of JavaScript that allows us to write more concise and expressive code.

You are probably already familiar with higher order functions in JavaScript. For example, the map, filter, and reduce functions are all higher order functions. These functions take a function as an argument and apply that function to each element of an array.

Creating Higher Order Functions

Creating a higher order function in JavaScript is easy. You can define a function that takes another function as an argument and then call that function inside the body of the higher order function. Here is an example of a higher order function that takes a function as an argument:

function higherOrderFunction(callback) {
  console.log('Inside higher order function');
  callback();
}

function callback() {
  console.log('Inside callback function');

  // do some other work
}

In this example, the higherOrderFunction function takes a callback function as an argument and then calls that function inside the body of the higher order function.

Using Higher Order Functions

You can use higher order functions in JavaScript to write more concise and expressive code. For example, you can use the map function to transform an array of values into a new array of values. Here is an example:

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

const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

In this example, we use the map function to double each number in the numbers array. The map function takes a function as an argument and applies that function to each element of the array.

Common Higher Order Functions

There are many common higher order functions in JavaScript that you can use to write more concise and expressive code. Some of the most common higher order functions are:

map

The map function transforms an array of values into a new array of values. It takes a function as an argument and applies that function to each element of the array.

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

const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

filter

The filter function filters an array of values based on a condition. It takes a function as an argument and applies that function to each element of the array. If the function returns true, the element is included in the new array; otherwise, it is excluded.

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

const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers); // [2, 4]

reduce

The reduce function reduces an array of values to a single value. It takes a function as an argument and applies that function to each element of the array, accumulating a single result.

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

const sum = numbers.reduce(function(accumulator, number) {
  return accumulator + number;
}, 0);

console.log(sum); // 15

Custom Higher Order Functions

You can also create your own custom higher order functions in JavaScript. For example, you can create a function that composes two functions together:

function compose(f, g) {
  return function(x) {
    return f(g(x));
  };
}

function addOne(x) {
  return x + 1;
}

function multiplyByTwo(x) {
  return x * 2;
}

const addOneAndMultiplyByTwo = compose(multiplyByTwo, addOne);

console.log(addOneAndMultiplyByTwo(3)); // 8

In this example, we define a compose function that takes two functions f and g as arguments and returns a new function that composes them together. We then define two functions addOne and multiplyByTwo and compose them together to create a new function addOneAndMultiplyByTwo.

Conclusion

In this article, we learned about higher order functions in JavaScript. We learned what higher order functions are, how to create them, and how to use them. We also learned about some common higher order functions in JavaScript. Higher order functions are a powerful feature of JavaScript that allows us to write more concise and expressive code. By using higher order functions, you can make your code more modular, reusable, and easier to understand.