Functional Programming – Map, Reduce, Filter

There are three functions and one object type that you should care about more than anything else and those are map, reduce, filter, and the humble array. Today, we’re going to understand why they’re so important, starting with the array.

Arrays

The array is a simple structure; it lets you hold a list of items. These list of items can be accessed and moved around or looped through for various purposes. Now, what if I told you that the array had some serious power behind it? You could create objects, strings, sum numbers, and more with these three magical functions: map, reduce, and filter. Let’s start with map.

Map

Map is an array method that returns a new array after running a function on each element in the array. This can be beneficial to us in several ways. Here’s an example of adding a new property to a list of objects using map, and then using a for loop:

As you can see the map approach can be simpler; you don’t need to declare “i” and you don’t need to implicitly create an array either. map creates a new array, making you like easier, and the original array stays intact (Not exactly the case with objects, but with numbers, this is the case). If you were to try to add a new element without creating a new array implicitly, you would be adding a new element to the original array, unlike map. This is beneficial to us because it prevents us from mutating objects and values in our source code. Map has a lot of uses and it’s definitely more powerful than you think. Now, let’s talk about reduce.

Reduce

Now reduce, let’s you reduce an array to a single value using a function. Furthermore, reduce let’s you pass a value as the starting value. Here’s an example:

Here we reduce the array of prices to a single value. This single value doesn’t mutate the original array. Easy right?

Let’s use a more complex example; reducing an array of objects into a single object:

Now, imagine trying to do this with a for loop. A for loop would probably require extra code, creating a new variable; And reduce is a lot more readable and can be used as the basis of many new functions in your code base. Now, the last one on the list filter.

Filter

Filter does exactly as the name describes; it applies a filter to every element in the array and then returns a new array with the filtered values. Plus, the original array is untouched. For us, this means we can do a lot with our arrays, but here’s an example of filtering number and objects by type:

In this example, we run our filter function, which tests if a value is true or false. This true or false test will determine what array elements pass through our filter. Now, you might be thinking none of this important, but let’s talk about composability.

Composability is one of the positives of using map, reduce, and filter. Each one returns a new array with the same set of methods (except reduce), thus you can chain these calls together. This is something you can’t do with for loops.

Here’s a real example of chaining map, reduce, and filter to create a list of stats we want:

As you can see in both examples, we use each function one after another chained with “.” notation. Because each method returns a new array (except reduce), we can chain our methods together then reduce them to a single value.

Once again, I hope you learned something and consider using these functions in the future. Stay tuned for the next tutorial on immutability and common traps. Have a wonderful day.~

%d bloggers like this: