DEV Community

Cover image for Higher Order Array Methods in JavaScript
Alex Anie
Alex Anie

Posted on

Higher Order Array Methods in JavaScript

#foreach #map #filter #reduce

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



forEach((element) => { /* … */ })
forEach((element, index) => { /* … */ })
forEach((element, index, array) => { /* … */ })
Enter fullscreen mode Exit fullscreen mode

Try the code below

Example 1



// 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
*/
Enter fullscreen mode Exit fullscreen mode

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



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

// arrow function
moviesName.forEach(movie => console.log(movie));
Enter fullscreen mode Exit fullscreen mode

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



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);
Enter fullscreen mode Exit fullscreen mode

Browser Preview:

Image description

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



map((element) => { /* … */ })
map((element, index) => { /* … */ })
map((element, index, array) => { /* … */ })
Enter fullscreen mode Exit fullscreen mode

Example 1



// 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]
Enter fullscreen mode Exit fullscreen mode

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



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"
*/
Enter fullscreen mode Exit fullscreen mode

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.



filter((element) => { /* … */ })
filter((element, index) => { /* … */ })
filter((element, index, array) => { /* … */ })
Enter fullscreen mode Exit fullscreen mode

Example 1



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

console.log(print);
Enter fullscreen mode Exit fullscreen mode

Browser Preview:

Image description

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

Example 2



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

console.log(print);
Enter fullscreen mode Exit fullscreen mode

Browser Preview:

Image description

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

Syntax



reduce((accumulator, currentValue) => { /* … */ })
reduce((accumulator, currentValue, currentIndex) => { /* … */ })
reduce((accumulator, currentValue, currentIndex, array) => { /* … */ })
Enter fullscreen mode Exit fullscreen mode

Example 1



//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
Enter fullscreen mode Exit fullscreen mode

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



// 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
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Read next

frorning profile image

🔍 MongoDB Data Modeling: Embedding vs. Referencing - A Strategic Choice!

Piyush Chauhan -

atharvgyan profile image

JavaScript interview questions & answers with code

Atharv Gyan -

akaak profile image

what is jq? a program for json files

Kiran (AK) Adapa -

peterlidee profile image

5. Mocking usePathName, useSearchParams and useRouter with Jest in Next 15

Peter Jacxsens -