JavaScript’s .reduce & .forEach: simple uses

Last blog entry I introduced simple use cases for .map and .filter. Today I want to talk about two other array methods: .reduce() and .forEach().

Let’s start by taking a look at .reduce and get a better idea of what is happening when it is working to give us our output.

Formal definition for reduce:


For this particular blog post we’ll only be utilizing the “total” and “currentValue” parameters for our use case.

In the example above we pass an anonymous function to .reduce that acts as our “reducer” by carrying the “total” and altering that total each iteration through the array by the new “currentValue”. Basically, if we want to get the total value of a multiplied array we would first have to do the logic behind getting that single value. In our case, the logic is contained in the anonymous function and defined right there.

In a recent class exercise we were tasked with white-boarding a function that would take in an array of a certain length and return another array with the multiplied values of all the other indices’ values.

ex: input array: [1,7,3,4] …. would output [84,12,28,21]

After understanding the problem correctly, I thought that .reduce would be a decent method to use on our array. After finding the multiplied value of all the array elements, you could simply divide by the current index’s value and return that number to the new array.

There are a bunch of different use cases for .reduce, but some simple ones are finding averages or summing array values. .reduce is pretty cool.

.forEach() is another cool array method that I wanted to talk about.

Formal definition:

array.forEach(function(currentValue,index,arr), thisValue)

For our example we will only utilize the “currentValue” parameter and we will use the same array as the previous example, but we will log each array element to the console instead of finding the total multiplied value.

.forEach simplifies iterating and once you find yourself needing to iterate and perform an action on each value of an array .forEach will be your best friend. Sure, you could easily write a for loop and console.log each element, but using .forEach is a bit more expressive if you ask me. The for loop offers a conditional statement that can be very helpful for breaking out of a loop, but for the most part you want the entire array, so using .forEach is the better option in my opinion. This will change depending on each case though.

To reference the previous post about .map and .filter, you might have noticed that .map and .forEach act extremely similar to each other. They both iterate over an array and alter each array element in a specified way. So what’s the difference?

.forEach returns nothing while .map returns a new array after the operation. So to store, use, or even reference the altered array that results from .forEach we’d have to create a new array and push the elements to that array during each iteration of the .forEach. Here’s a quick visual:

Even with the explicit return statement .forEach doesn’t return anything after iterating, but .map does. So hopefully that helps a little with distinguishing the two along with understanding a little more about .reduce.


.reduce : returns one number based on a given function that acts as a “reducer”. This can be whatever value you want to derive from the array

.forEach : returns nothing, but iterates over an array and performs a given action. For loops operate very similarly, but you have a bit more control with the conditional statement and breaking out of the iteration in a for loop.