Higher Order Array Methods in JavaScript
Tags: foreach, map, filter, reduce
Published: 2023-03-29 07:29:57

Higher Order Array Methods or Higher Order Functions are JavaScript built-in array methods that take in functions as an argument. These methods are used to iterate over a given array object and return the output parsed into the function.

In this blog post, you are going to learn what Higher Order Array Methods are with examples.

The Higher Order Array Methods in JavaScript include;

* forEach()
    
* map()
    
* filter()
    
* reduce()
    

These built-in JavaScript methods take in functions as an argument and return the items in the array. Depending on the one you are using, each method returns different things.

# forEach()

The `forEach()` higher-order function is used to iterate over an array object. It takes and returns once the callback function parse in as an argument. The `forEach()` method does not mutate or return a new array, instead, it returns the items in the array in the proper order according to how it is indexed in the array object.

The `forEach()` method takes in three parameters of `element`, `index` and `array`.

* **element**: it specifies each item in the array.
    
* **index**: it specifies the zero-based index of the items in the array.
    
* **array**: it specifies the entire array.
    

**Syntax**

```javascript
forEach((element) => { /* … */ })
forEach((element, index) => { /* … */ })
forEach((element, index, array) => { /* … */ })
```

*Try the code below*

**Example 1**

```javascript
// List of popular movies
const moviesName = ["The Hobbit", "John Wick", "Black Adam", "The Woman King", "Black Panther", "Glass Onion", "Avatar: The Way of Water", "Memory"]

// A function: log out the names of the movies to the console.
function printMovies(movie){
    console.log(movie)
}

// A forEach method with a function as an argument
moviesName.forEach(printMovies);

//Console output.
/*
The Hobbit
John Wick
Black Adam
The Woman King
Black Panther
Glass Onion
Avatar: The Way of Water
Memory
*/
```

Here, the `movieNames` variable is assigned names of popular movie titles, and then a function of `printMovies` is invoked to log out the names of the movies in the console. The `forEach()` method takes the function name as an argument as iterates through the array and then prints the title of each movie into the console.

However, the above code can also be shortened with the use of an anonymous or arrow function

```javascript
// anonymous function
moviesName.forEach(function(movie){
    console.log(movie)
});

// arrow function
moviesName.forEach(movie => console.log(movie));
```

The anonymous function and arrow function still returns the same output as the first one declared. Using the anonymous function or arrow function can make your code easier to read.

**Example 2**

```javascript
const moviesName = ["The Hobbit", "John Wick", "Black Adam", "The Woman King", "Black Panther", "Glass Onion", "Avatar: The Way of Water", "Memory"];

// Example (2) 
const print = moviesName.forEach(function(movie, index, arr){
console.log(
    `The name of this movie is ${movie}, and is at the index of: ${index} and the array is: ${arr}`
)
});

console.log(print);
```

Browser Preview:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjxkz2lwas3wrq1v91yg.png)

Here, The forEach methods take three parameters. The first parameter `movie` returns the name of each movie, the second parameter `index` returns the index of each movie name in the array while the third parameter `arr` returns the entire array in the array list.

# map()

The `map()` higher-order function is used to map through an entire array and return a new array. The `map()` takes in a callback function as an argument that executes once and does not change the original array but instead, it returns as a new value.

The `map()` methods take in three parameters.

**Syntax**

```javascript
map((element) => { /* … */ })
map((element, index) => { /* … */ })
map((element, index, array) => { /* … */ })
```

**Example 1**

```javascript
// List of Hollyword moves, names, director, release date, series.
const movies =[
    {name: "The Hobbit", director: "Peter Jackson", firstRelease: 2012, lastRelease: 2014, series: 3},
    {name: "John Wick", director: "Chad Stahelski", firstRelease: 2014, lastRelease: 2023, series: 4},
    {name: "Black Adam", director: "Jaume Collet-Serra", firstRelease: 2022, lastRelease: 2022, series: 1},
    {name: "The Woman King", director: "Gina Prince-Bythewood", firstRelease: 2022, lastRelease: 2022, series: 1},
    {name: "Black Panther", director: "Ryan Coogler", firstRelease: 2018, lastRelease: 2022, series: 2},
    {name: "Glass Onion", director: "Rian Johnson", firstRelease: 2019, lastRelease: 2022, series: 2},
    {name: "Avatar: The Way of Water", director: "James Cameron", firstRelease: 2012, lastRelease: 2022, series: 1},
    {name: "Memory", director: "Martin Campbell", firstRelease: 2022, lastRelease: 2022, series: 1}
];

// return all the series of the movies into a new array
const print = movies.map(function(movie){
    return movie.series
})
console.log(print);

//Console.log
// -> [3, 4, 1, 1, 2, 2, 1, 1]
```

Here, The `map()` method is used to return all movie series in the array and parse it into a new array.

This is just a basic way an array can be mapped into a new array.

**Example 2**

```javascript
const print = movies.map(function(movie){
    return `${movie.name} : Time frame of relase: ${1 + movie.lastRelease - movie.firstRelease} year's`;
})

console.log(print);
//output
/*
0: "The Hobbit : Time frame of relase: 3 year's"
1: "John Wick : Time frame of relase: 10 year's"
2: "Black Adam : Time frame of relase: 1 year's"
3: "The Woman King : Time frame of relase: 1 year's"
4: "Black Panther : Time frame of relase: 5 year's"
5: "Glass Onion : Time frame of relase: 4 year's"
6: "Avatar: The Way of Water : Time frame of relase: 11 year's"
7: "Memory : Time frame of relase: 1 year's"
*/
```

Here, The `map()` method is used to return the time difference between when the movies were released.

# filter()

The `filter()` higher-order function is used to filter through an entire array and return a new array that meets the specified condition. The `filter()` takes in a callback function as an argument. It does not mutate the original array, instead, it returns a new one.

The `filter()` method takes in three parameters.

```javascript
filter((element) => { /* … */ })
filter((element, index) => { /* … */ })
filter((element, index, array) => { /* … */ })
```

Example 1

```javascript
// return all movies that thier release date is greater than 2018
const print = movies.filter(function(movie){
    return movie.firstRelease > 2018;
})

console.log(print);
```

Browser Preview:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ip6in7s2bjbzf850odh6.png)

Here, four movies out of eight were released after 2018 and then returned to the console.

**Example 2**

```javascript
// Return the movie with James Cameron as director
const print = movies.filter(function(movie){
    return movie.director === "James Cameron";
})

console.log(print);
```

Browser Preview:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19t1apse6depkyhpkup1.png)

Here, Return the movie with James Cameron as the director.

# reduce()

The `reduce()` method behaves differently and can be confusing if not well understood. The `reduce()` method is used to return a single value. The `reduce()` method takes a callback function, this callback function takes in two parameters which are:

* **accumulator**: This is the value that is accumulated and returned as the total.
    
* **current value**: This is the current value in the array
    


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4gwp5pcokvd93uqxbex.png)

Syntax

```javascript
reduce((accumulator, currentValue) => { /* … */ })
reduce((accumulator, currentValue, currentIndex) => { /* … */ })
reduce((accumulator, currentValue, currentIndex, array) => { /* … */ })
```

Example 1

```javascript
//List of Movies
const movies =[
    {name: "The Hobbit", director: "Peter Jackson", firstRelease: 2012, lastRelease: 2014, series: 3},
    {name: "John Wick", director: "Chad Stahelski", firstRelease: 2014, lastRelease: 2023, series: 4},
    {name: "Black Adam", director: "Jaume Collet-Serra", firstRelease: 2022, lastRelease: 2022, series: 1},
    {name: "The Woman King", director: "Gina Prince-Bythewood", firstRelease: 2022, lastRelease: 2022, series: 1},
    {name: "Black Panther", director: "Ryan Coogler", firstRelease: 2018, lastRelease: 2022, series: 2},
    {name: "Glass Onion", director: "Rian Johnson", firstRelease: 2019, lastRelease: 2022, series: 2},
    {name: "Avatar: The Way of Water", director: "James Cameron", firstRelease: 2012, lastRelease: 2022, series: 1},
    {name: "Memory", director: "Martin Campbell", firstRelease: 2022, lastRelease: 2022, series: 1}
];

// return the total movies in the series
const print = movies.reduce(function(accumulator, movie){
    return accumulator + movie.series ;
}, 0)

console.log(print);
//output
//-> 15
```

Here, `15` is printed as output, that is the total movie series in the movies array.  
  
Note that it's important to include the zero, initial value. If omitted the total output will not be returned.

# chaining higher order function

One of the cool things about higher order array methods is the chaining of each method together. When a value is returned from a particular method, another method can be chained to the previous one and the value is parsed and executed.

*Try the example below*

```javascript
// return the total movies in the series
const print = movies
.map((movie)=> movie.series * 3) // return the number of series and multiply by 3 of it original number
.filter((movie)=> movie % 2) // remove all even numbers
.reduce((total, movie)=> total + movie, 0); // Sum all the old numbers and return total

console.log(print);

//output
//-> 21
```

The following code above can be explained as follows.

* The `map()` is used to return the number of series and multiply them by three of their original number
    
* Then `filter()` is used to remove all the even numbers from the value returned by `map()`.
    
* And then `reduce()` is used to sum the total of all the numbers to one value.
    

Note: when chaining, it's always considered good practice to start each method on a new line.

# Wrapping up

We learned about *Higher Order Array Methods in JavaScript* and we discussed the following.

* What are Higher Order Array Methods
    
* forEach with example
    
* map with example
    
* filter with example
    
* reduce with example
    

Alright! We’ve come to the end of this tutorial. Thanks for taking the time to read this article to completion. Feel free to ask questions. I’ll gladly reply. You can find me on Twitter and other social media @ocxigin. or email me at ocxigin@gmail.com

*Cheers*