A Path to Point-Free JavaScript

A Path to Point-Free JS
web :: rwp.im
github :: rpearce
email :: me@robertwpearce.com
tweeter :: @RobertWPearce
@RobertWPearce | rwp.im | 2019-10-04 charleston.js 1

about me
Hi, I'm Robert

about me
Hi, I'm Robert
• My kiwi wife & I have recently moved back from New Zealand

about me
Hi, I'm Robert
• Started out at Jack Russell Software w/ Tom Wilson in 2011

about me
Hi, I'm Robert
• Currently with Articulate, the e-learning software company

about me
Hi, I'm Robert
• Work with FP in JS all day

about me
Hi, I'm Robert
• Learn Haskell (λ) and other FP in what little free time I have

about me
Hi, I'm Robert
• Learn Haskell (λ) and other FP in what little free time I have
• Pretend to know what I'm doing

Question:
what are we going to do?

Answer:
ultimately attempt to simplify this code
// bestFilmsHtml :: [Film] -> [Html]
const bestFilmsHtml = films => {
const bestFilms = films.filter(film => film.rating >= 8.8)
const filmsHtml = bestFilms.map(film =>
`<div>${film.title}, <strong>${film.rating}</strong></div>`
)
return filmsHtml
}

Answer:
which takes this data...
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 }
]

Answer:
...and returns this
[
"<div>The Empire Strikes Back, <strong>8.8</strong></div>",
"<div>Pulp Fiction, <strong>8.9</strong></div>"
]

Question:
how are we going to do that?

Answer:

Answer:
•
!
currying!

Answer:
•
!
currying!
•
"
composition!

Answer:
•
!
currying!
•
"
composition!
•
# $
eta-conversion!

Answer:
•
!
currying!
•
"
composition!
•
# $
eta-conversion!
•
%
ramda.js!

Answer:
•
!
currying!
•
"
composition!
•
# $
eta-conversion!
•
%
ramda.js!
• ...this is our Friday night
✨

Question:
what does point-free mean?

Tacit programming, also called point-free
style, is a programming paradigm in which
function deﬁnitions do not identify the
arguments (or "points") on which they
operate. Instead the deﬁnitions merely
compose other functions, among which are
combinators that manipulate the arguments.
— https://en.wikipedia.org/wiki/Tacit_programming

Combinatory logic is a notation to eliminate the
need for quantified variables in mathematical logic
[...] based on combinators which were introduced by
Schönfinkel in 1920 with the idea of providing an
analogous way to build up functions - and to remove
any mention of variables - particularly in predicate
logic. A combinator is a higher-order function that
uses only function application and earlier defined
combinators to define a result from its arguments.
— https://en.wikipedia.org/wiki/Combinatory_logic

...there are other opinions

The lack of argument naming gives
point-free style a reputation of being
unnecessarily obscure, hence the
epithet "pointless style".
— https://en.wikipedia.org/wiki/Tacit_programming

some may disagree
"Point-Free or Die: Tacit Programming in Haskell and Beyond"
https://www.youtube.com/watch?v=seVSlKazsNk

Question:
what does it look like?

(do we care about the implementation?)
(say yes)
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 }
]
bestFilmsHtml(films)
// => [
// "<div>The Empire Strikes Back, <strong>8.8</strong></div>",
// "<div>Pulp Fiction, <strong>8.9</strong></div>"
// ]

bestFilmsHtml
const bestFilmsHtml =
compose(filmsHtml, onlyHighRatings)

onlyHighRatings
// onlyHighRatings :: [Film] -> [Film]
const onlyHighRatings =
filter(hasHighRating)

hasHighRating
// hasHighRating :: Film -> Bool
const hasHighRating =
propSatisfies(gte(__, 8.8), 'rating')

filmsHtml
// filmsHtml :: [Film] -> [Html]
const filmsHtml =
map(filmHtml)

filmHtml (notice any difference?)
// filmHtml :: Film -> Html
const filmHtml = film =>
// filmsHtml :: [Film] -> [Html]
const filmsHtml =
map(filmHtml)

!
buckle up
it's time for prerequisites

currying
!
and partial application
const add = (a, b) => b + a
const add2 = add.bind(null, 2)
add2(3) // 5
add2(5) // 7
const add = a => b => b + a
const add3 = add(3)
add3(2) // 5
add3(4) // 7

In mathematics and computer
science, currying is the technique of
translating the evaluation of a function
that takes multiple arguments into
evaluating a sequence of functions,
each with a single argument.
— https://en.wikipedia.org/wiki/Currying

currying
!
and partial application
const add = a => b => b + a
// is equivalent to
function add(a) {
return function(b) {
return b + a
}
}
// but...
add(2)(3) // 5
add(2, 3) // function add() ... ( °□°

autocurrying
// add.js
import { curry } from 'ramda'
const add = (a, b) => b + a
export default curry(add)
// some other file
import add from './add'
add(2, 3) // 5
add(2)(3) // 5
add()(2)(3) // 5

https://rwp.im/ramda-chops-function-currying.html

sweet! who cares about currying?
currying helps with composition!

composition
import mult from './mult'
const add2 = add(2) // partial application
const mult3 = mult(3) // partial application
mult3(add2(10)) // composition & full application
// returns 36

how could we reuse this
composition?

mult3(add2(10))

// mult3(add2(10))
const compose = (f, g) => x =>
f(g(x))
const add2mult3 =
compose(mult3, add2)
add2mult3(10) // 36
add2mult3(42) // 132

our compose isn't variadic, though
let's reach for a tool

composition
import { compose } from 'ramda'
import mult from './mult'
const add2 = add(2)
const mult3 = mult(3)
const add2mult3Repeated =
compose(mult3, add2, mult3, add2)
add2mult3Repeated(10) // 114

reading composition
compose(f, g)(x) ≡ f(g(x))
Say it with me, "f after g"

https://rwp.im/ramda-chops-function-composition.html

eta-conversion

eta-conversion
• "An eta conversion (also written η-conversion) is adding or
dropping of abstraction over a function."
https://wiki.haskell.org/Eta_conversion

eta-conversion
• eta-abstraction
!

eta-conversion
• eta-abstraction
!
• eta-reduction
"

eta-abstraction
Remember this?
const add2mult3 =

eta-abstraction
Remember this?
const add2mult3 =
Here's how we would perform an eta-abstraction:
const add2mult3 = n =>
compose(mult3, add2)(n)

eta-reduction
Let's take our recent eta-abstraction,

eta-reduction
Let's take our recent eta-abstraction,
and perform an eta-reduction:
const add2mult3 =

!
we covered the prerequisites!

let's talk about ramda.js

• functional library

• easy to make functional pipelines

• never mutates data

• all functions are automatically curried

• all functions are automatically curried
• parameters to functions make it convenient for currying; data to
be operated on generally comes last, for example

useful ramda functions for us right now

• curry :: (* → a) → (* → a)

• curry :: (* → a) → (* → a)
• compose :: ((y → z), (x → y), …, (o → p), ((a, b, …, n) → o)) → ((a, b,
…, n) → z)

• curry :: (* → a) → (* → a)
…, n) → z)
• filter :: Filterable f => (a → Boolean) → f a → f a

• curry :: (* → a) → (* → a)
…, n) → z)
• map :: Functor f => (a → b) → f a → f b

• curry :: (* → a) → (* → a)
…, n) → z)
• propSatisfies :: (a → Boolean) → String → {String: a} → Boolean

• curry :: (* → a) → (* → a)
…, n) → z)
• gte :: Ord a => a → a → Boolean

• curry :: (* → a) → (* → a)
…, n) → z)
• gte :: Ord a => a → a → Boolean
• __ (used to specify gaps within curried functions so that we can do partial
application regardless of argument order)

our original code to refactor
const bestFilmsHtml = films => {
const bestFilms = films.filter(film => film.rating >= 8.8)
const filmsHtml = bestFilms.map(film =>
)
return filmsHtml
}

we got this

implicit return b/c variables weren't needed
const bestFilmsHtml = films =>
films
.filter(film => film.rating >= 8.8)
.map(film =>
)

extract hasHighRating
const hasHighRating = film =>
film.rating >= 8.8
films
.filter(hasHighRating)
.map(film =>
)

refactor hasHighRating
import { __, gte, propSatisfies } from 'ramda'
const hasHighRating = film =>
propSatisfies(gte(__, 8.8), 'rating')(film)
films
.map(film =>
)

eta-reduce hasHighRating
films
.map(film =>
)

extract filmHtml
films
.map(filmHtml)

convert bestFilmsHtml to use compose
import { __, compose, filter, gte, map, propSatisfies } from 'ramda'
compose(map(filmHtml), filter(hasHighRating))(films)

eta-reduce bestFilmsHtml
compose(map(filmHtml), filter(hasHighRating))

we could stop here...

compose(map(filmHtml), filter(hasHighRating))

...but let's go for clarity & reuse

extract onlyHighRatings
compose(map(filmHtml), onlyHighRatings)

extract filmsHtml
const filmsHtml =
map(filmHtml)

did we miss one? does it matter?
also, why didn't we touch filmHtml?

const filmsHtml =
map(filmHtml)

extract isHighRating
const filmsHtml =
map(filmHtml)
const isHighRating =
gte(__, 8.8)
propSatisfies(isHighRating, 'rating')

ﬁnal product

const filmsHtml =
map(filmHtml)
const isHighRating =
gte(__, 8.8)
propSatisfies(isHighRating, 'rating')

quick examples from other
languages (λ)

haskell (λ)
loadLines :: FilePath -> IO [String]
loadLines =
fmap lines . readFile

λ calculus
https://www.lambda-bound.com/book/lambdacalc/node21.html

a path to point-free JS
Ask yourself,

Ask yourself,
1. "Do I need these variables in my function?"

Ask yourself,
2. "Are my data transformations associative?"

Ask yourself,
3. "Am I chaining .then().then().then()s?" or sequencing
effectful expressions? (see composeWith(then))

Ask yourself,
3. "Am I chaining .then().then().then()s?" or sequencing
effectful expressions? (see composeWith(then))
4. "Is my function doing more than 1 thing? Should it? Can I reuse
the other things it's doing?"

At work,

At work,
1. write your own compose function and start using it

At work,
2. pull in ramda.js or crocks.js and use a few functions

At work,
3. use function naming and types (or pseudo-types) to tell a story

At work,
4. prefer composition to inheritance

At work,
5. try to break down complexity into dumbed-down simplicity ("Don't Make Me Think")

At work,
5. try to break down complexity into dumbed-down simplicity ("Don't Make Me Think")
6. genericize as many things as you can so that the only single-use functions are
those directly related to business logic

where can i learn more?
• ramda.js
• Functional Programming in JavaScript with Ramda.js
• crocks.js
• Professor Frisby's Mostly Adequate Guide to Functional
Programming
• Point-Free or Die: Tacit Programming in Haskell and Beyond

where can i learn more?
rwp.im

A Path to Point-Free JS
web :: rwp.im
github :: rpearce
email :: me@robertwpearce.com
tweeter :: @RobertWPearce

A Path to Point-Free JavaScript

More Related Content

What's hot (6)

Similar to A Path to Point-Free JavaScript (20)

More from Robert Pearce (7)

Recently uploaded (20)

A Path to Point-Free JavaScript