Definitive guide to Higher Order Function (HOC)
Tags: webdev, javascript, beginners, programming
Published: 2024-07-04 01:31:17

## 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:

```javascript
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:

```javascript
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.

```javascript

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.

```javascript

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.

```javascript

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:

```javascript

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.