DEV Community

Cover image for Understanding Array Higher-Order Functions
Jessica Iwu
Jessica Iwu

Posted on


Understanding Array Higher-Order Functions

Having an understanding of how Array Higher-Order functions work can make complex looping operations in JavaScript very seamless.

The higher-order functions to be discussed in this article are : forEach(), map(), filter(), and reduce().

At the end of this article, you'll understand what each function represents, and how to apply them in problem-solving.


Running the .forEach() method on an array executes a callback function for each element that exists in that array.

The callback function is the block that specifies what operation is to be carried out.

In the snippet below, the .forEach() method iterates over every friend element in the friends array, and logs each string to the console dynamically using the ${friend} template literal.

    const friends = ['Chief', 'Somto', 'Elma', 'Zee'];
    friends.forEach(friend => {
      console.log (`I love working with ${friend}`);

    // I love working with Chief
    // I love working with Somto
    // I love working with Elma
    // I love working with Zee

The .map() method is similar to the .forEach() method except that it produces a new array.

Map Illustration

With the .map() method, you can create a new array by manipulating each element in the existing array. In the illustration above, the original array contains [2,3,4], and by mapping, the new array contains the square of the original array; [4,9,16].

const ingredients = ['Jam', 'oat', 'lemon', 'lettuce', 'oil', 'fish'];

const newMeal = => {
  return ingredient[0];

console.log(newMeal); // ['J', 'o', 'l', 'l', 'o', 'f']
console.log(newMeal.join(' ')); //Jollof

In the snippet above, there’s an ingredients array that is mapped to create a newMeal array by returning the first character of each ingredient. Notice that by attaching .join(' ') to the newMeal array, the array strings become one single string.


The .filter() method shares similar characteristics with the .map() method because it returns a new array. However, just like the name implies, it filters the elements in the array based on any conditions provided.

filtering strings

const stack = ['desk', 17, 'chair', 5, 'sofa'];
const newStack = stack.filter(item => {
    return typeof(item) === 'string'; 

console.log(newStack); //['desk', 'chair', 'sofa']

filtering numbers

const stack = ['desk', 17, 'chair', 5, 'sofa'];
const newStack = stack.filter(item => {
    return typeof(item) === 'number'; 
console.log(newStack); //[17, 5]


The .reduce() method iterates an array and returns a single value. This value could be any data structure - number, string, array, etc.

The callback function passed to the reduce method accepts accumulator and currentValue as parameters and returns a single value.

Using the reduce method in the code snippet below, we are able to loop through the objects in the socialMedia array in order to get the values of the name property.

Note: When using the reduce method on an object array, a second parameter (like the empty array in the snippet) should be added.

const socialMedia = [
  {name: 'Instagram', url:''},
  {name: 'twitter', url:''}

const mediaName = socialMedia.reduce((accumulator,currentValue) => {
  return accumulator
}, []);

console.log(mediaName); //[ 'Instagram', 'twitter' ]

Another quick reduce example

const expenseList = [1000, 50, 250, 999];
const expenseSum = expenseList.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
, 0}
console.log(expenseSum); // 2,299

In the reduce method example above, the expenseList array is reduced to the expenseSum value 2,999.

The first element in the array is the default accumulator value, and the second element is the current value.


Iterators are very useful methods, not just in JavaScript but in programming generally. Each of them solves specific problems and make array manipulations an easy feat.

Thanks for reading! πŸ‘‹πŸ½

If you found this article useful, please let me know and share it too so that others could benefit.
To connect with me, kindly follow me on twitter.

Top comments (3)

tobiobeck profile image
Tobi Obeck

forEach(), map(), filter(), and reduce() are usually called higher-order functions, not iterators.

Iterators and Generators are their own concept in JS:

jessicaiwu profile image
Jessica Iwu

Thank you.

xoeseko profile image

The jollof was a nice touch πŸ˜‚πŸ‘ŒπŸΎ

πŸ“° JavaScript Ecosystem Buzz

Get excited about the top 3 trends in the JavaScript world:

  1. πŸ“š React Libraries You'll Love: Amp up your productivity and supercharge your applications! Discover now

  2. πŸš€ React vs. Signals Showdown: Witness the evolution of reactive programming and see who takes the crown in modern web development. Find out here

  3. 🧠 Unleash the Power of AI for UI: Embrace an open-source AI tool that generates stunning UI components in a snap. Explore the magic

Stay tuned for more thrilling JavaScript developments!