Ramda Chops: Map, Filter & Reduce

2018-02-08

Thanks to Jillian Silver, Patrick Eakin and @zerkms for their review of this post.

The map, filter and reduce methods on Array.prototype are essential to adopting a functional programming style in JavaScript, and in this post we’re going to examine how to use these three concepts with ramda.js.

If you are unfamiliar with these three concepts, then be sure to first read the MDN documentation on each (linked above).


Pre-requisite ramda posts:

Other ramda posts:

Our Data Set: Films!

This is the test data set we will reference throughout the post:

Our Goal

There are a few conditions that are required for us to meet our goal. We must construct a function that:

Given these requirements, a pseudotype signature for this might be:

Step 1: Get the HTML Part Working

Try this code in the ramda REPL

Step 2: Extract the map Callback

Try this code in the ramda REPL

Step 3: filter Out Lower Scores

Try this code in the ramda REPL

But wait! We can extract that filter callback, as well:

Try this code in the ramda REPL

Step 4: Composing filter and map

We can use ramda’s function currying capabilities and function composition to create some very clear and concise pointfree functions.

Try this code in the ramda REPL

One thing to remember with ramda functions (like map and filter) is that ramda typically orders arguments from least likely to change to most likely to change. Callback/transformation functions here are passed as the first argument, and the data comes last. To understand this further, check out the following links:

Step 5: Extracting The Composition Further

If we want to not only reuse our filtering and mapping functions but also make them more readable, we can pull out the pieces that make up our output function into smaller bits:

Try this code in the ramda REPL

Step 6: Another Way With reduce

We can accomplish the same goals as filter and map by making use of reduce.

Try this code in the ramda REPL

If you’re not familiar with reduce, be sure to play with the live example to better understand how those pieces work before moving on.

It’s also worth noting that you can do just about anything in JavaScript with the reduce function. I highly recommend going through Kyle Hill’s slides on reduce Is The Omnifunction.

But wait! We can extract the reduce callback like we did with map and filter before:

Try this code in the ramda REPL

Step 7: Making Our Reduce Arguments Reusable

Try this code in the ramda REPL

As before with map & filter, output can be reused over and over again and passed any set of films to generate HTML for. To further understand the parameter order used here, check out the docs for ramda’s reduce.


This step-by-step process we’ve walked through is as close to real-life refactoring/rethinking as I could do in a post. Thanks for making it this far.

Until next time,
Robert