JavaScript Tutorial Series: Higher order functions
Published: 2023-02-24 21:00:30

In a previous article we've explained what functions are and what is their job. If you need a refresher please revisit this lesson [JavaScript Tutorial Series: Functions](https://dev.to/fullstackjo/javascript-tutorial-series-functions-5568).

In this article we're going to talk about higher-order functions and discuss some examples.

## What is a higher-order function ?
A function is referred to as  higher-order if it accepts another function as an argument or returns another function as a result. Because functions can now be used as values, many more opportunities for writing more flexible and reusable code are now available. Higher-order functions can be used to create functions that are more general and adaptable to different situations. 

JavaScript comes with a number of built-in higher-order functions which we'll go over some in details.

## forEach()
The `forEach()` higher-order function takes an array and applies a specific function to each element of the array. `forEach()` modifies the initial array rather than returning a new one, in contrast to `map()`, `filter()`, and `reduce()`.

```JavaScript
const numbers = [10, 20, 30, 40, 50];
numbers.forEach(num => console.log(num));
// Output: [10, 20, 30, 40, 50]
```
In this example, an array of numbers is defined, and the `forEach()` method is used to iterate through each element of the array. The callback function that logs the number to the console is executed by the `forEach()` method for each number in the array.

## map()
The `map()` higher-order function transforms the values of an array by applying a specified function to each element before returning a new array. The initial array is left unchanged.

```JavaScript
const numbers = [10, 20, 30, 40, 50];
const doubledNums = numbers.map(num => num * 2);
console.log(doubledNums); // Output: [20, 40, 60, 80, 100]
```

In this example, the `map()` method is provided with the arrow function `num=>num*2`. This arrow function multiplies each element in the numbers array by two and accepts a single parameter, `num`, to represent each element. Each element of the numbers array is subjected to this function using the `map()` method, which then generates a new array.

The console then displays [20, 40, 60, 80, 100] after we log the `doubledNums` array.

## filter()
The `filter()` higher-order function takes an array and returns a new array that only contains the elements that meet a specified condition.

```JavaScript
const numbers = [11, 12, 13, 14, 15];
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // Output: [12, 14]
```
In the example above we've defined an array called numbers, and then used the `filter()` method to create a new array called even. Each element of the numbers array is filtered using the function that is passed as an argument to the filter method. The function determines whether a given number is even by determining whether it is divisible by 2 without any remainder, and if it is, it is added to the new even array. The resulting even array only contains the even numbers from the initial numbers array. The console.log command outputs the even array, which in this case only contains the two even numbers (12 and 14) from the initial numbers array. 

## reduce()
The `reduce()` higher-order function takes an array and applies a specified function to each element, resulting in the accumulation of a single value. The function ends with the return of the total value.

```JavaScript
const numbers = [10, 20, 30, 40, 50];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // Output: 150
```
In the example above, an array called numbers has been defined, and the reduce method is then used to determine the sum of each element in the array. Two arguments are required by the reduce method: an initial value for the accumulator and a function that specifies how the elements should be combined.The function adds each element to the accumulator, which starts out with a value of 0. The final step is to use console.log to output the result , in this case 150, to the console. 

## every()
The `every()` higher-order function takes an array and returns true if each element satisfies a predetermined condition or false otherwise.

```JavaScript
const numbers = [10, 20, 30, 40, 50];
const even = numbers.every( num=> num % 2 === 0);
console.log(even); // Output: true

```
In the example above the `every()` method was used in to check whether all the elements of the numbers array were even numbers. The function that is passed as an argument to the `every()` method which is used to apply that function to each element of the numbers array. The function looks to see if it can be divided by 2 without leaving a remainder (num% 2 === 0). The `every()` function returns true and assigns it to the even variable if every element in the array satisfies this condition. Then the result is printed to the console.

## some()
The `some()` higher-order function determines whether at least one element in an array satisfies a specified condition. If the condition is met by at least one element, it returns the boolean value true, otherwise it returns false.

```JavaScript
const numbers = [15, 25, 35, 40, 55];
const even = numbers.some(num => num % 2 === 0);
console.log(even); // Output: true
```
In the example above the `some()` method was used in to check whether one of the elements of the numbers array is even numbers. The function that is passed as an argument to the `some()` method which is used to apply that function to each element of the numbers array. The function looks to see if it can be divided by 2 without leaving a remainder (num% 2 === 0). The `some()` function returns true and assigns it to the even variable if at least one element in the array satisfies this condition. Then the result is printed to the console.