Ramda Chops: Map, Filter & Reduce
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:
const films = [
title: 'The Empire Strikes Back', rating: 8.8 },
{ title: 'Pulp Fiction', rating: 8.9 },
{ title: 'The Deer Hunter', rating: 8.2 },
{ title: 'The Lion King', rating: 8.5 }
{ ]
Our Goal
There are a few conditions that are required for us to meet our goal. We must
construct a function that:
* only selects those with an 8.8 rating or higher
* returns a list of the selected titles interpolated in an HTML string that
has this structure:
html <div>TITLE: <strong>SCORE</strong></div>
Given these requirements, a pseudotype signature for this might be:
// `output` takes in a list of films
// and returns a list of HTML strings
//
// output :: [Film] -> [Html]
Step 1: Get the HTML Part Working
.map(film => `<div>${film.title}, <strong>${film.rating}</strong></div>`)
films// => [
// "<div>The Empire Strikes Back, <strong>8.8</strong></div>",
// "<div>Pulp Fiction, <strong>8.9</strong></div>",
// "<div>The Deer Hunter, <strong>8.2</strong></div>",
// "<div>The Lion King, <strong>8.5</strong></div>"
// ]
Try this code in the ramda REPL
Step 2: Extract the map
Callback
// filmHtml :: Film -> Html
const filmHtml = film =>
`<div>${film.title}, <strong>${film.rating}</strong></div>`
.map(filmHtml) films
Try this code in the ramda REPL
Step 3: filter
Out Lower Scores
films.filter(x => x.rating >= 8.8)
.map(filmHtml)
// => [
// "<div>The Empire Strikes Back, <strong>8.8</strong></div>",
// "<div>Pulp Fiction, <strong>8.9</strong></div>",
// ]
Try this code in the ramda REPL
But wait! We can extract that filter
callback, as well:
// hasHighScore :: Film -> Bool
const hasHighScore = x =>
.rating >= 8.8
x
films.filter(hasHighScore)
.map(filmHtml)
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.
import { compose, filter, map } from 'ramda'
// output :: [Film] -> [Html]
const output =
compose(map(filmHtml), filter(hasHighScore))
output(films)
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:
// filmsToHtml :: [Film] -> [Html]
const filmsToHtml =
map(filmHtml)
// highScores :: [Film] -> [Film]
const highScores =
filter(hasHighScore)
// output :: [Film] -> [Html]
const output =
compose(filmsToHtml, highScores)
output(films)
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
.
.reduce((acc, x) => {
filmsreturn hasHighScore(x)
? acc.concat(filmHtml(x))
: acc
, [])
}
// or, for better performance
.reduce((acc, x) => {
filmsif (hasHighScore(x)) {
.push(filmHtml(x))
acc
}
return acc
, []) }
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:
// highScoresHtml :: ([Html], Film) -> [Html]
const highScoresHtml = (acc, x) =>
hasHighScore(x)
? acc.concat(filmHtml(x))
: acc
.reduce(highScoresHtml, []) films
Try this code in the ramda REPL
Step 7: Making Our Reduce Arguments Reusable
import { reduce } from 'ramda'
const output =
reduce(highScoresHtml, [])
output(films)
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