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.

## Array.forEach()

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

``````

## Array.map()

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

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 = ingredients.map(ingredient => {
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.

## Array.filter()

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]
``````

## Array.reduce()

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:'jessontel.com'},
];

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

``````

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.

### Conclusion

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.

If you found this article useful, please let me know and share it too so that others could benefit.

Tobi Obeck

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

Iterators and Generators are their own concept in JS:
developer.mozilla.org/en-US/docs/W...

Jessica Iwu

Thank you.

Xoeseko

The jollof was a nice touch πππΎ

DEV Community

### π° 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!