This document discusses how functional programming with higher-order functions can improve code reuse, readability, and correctness compared to object-oriented and imperative styles. It introduces common higher-order functions like map, filter, and reduce. It then applies these concepts to solve a mine sweeping problem, representing the game board functionally and extracting mine location coordinates in a reusable way. Overall it advocates embracing higher-order functions to build modular, composable solutions.

1. Doctor
Iterate
OR HOW I LEARNED TO STOP WORRYING AND LOVE HIGHER-ORDER
FUNCTIONS
http://www.slideshare.net/TimothyRoberts8/
dr-iterate-or-how-i-learned-to-stop-worrying-and-love-higherorder-functions

2. Tim
Roberts
@cirsca
github.com/beardedtim
Okay Mentor
Better Older Brother
JavaScript Evangelist
Functional-ish Developer

3. Programming is Hard

4. The Fun Part

5. Joe Armstrong - Coders At Work
I think the lack of reusability comes in
object-oriented languages, not
functional languages. Because the
problem with object-oriented
languages is they’ve got all this
implicit environment that they carry
around with them.

6. OOP-ish
var Student = function(name, gpa, level) {
this.name = name
this.gpa = gpa
this.level = level
}

7. OOP-ish
Student.prototype.getName = function(){
return this.name
}
Student.prototype.getGpa = function(){
return this.gpa
}
Student.prototype.raiseLevel = function(){
this.level = this.level + 1
}

8. Gary Entsminger- The Tao of Objects
Putting operations and
behaviors in one place makes
good sense; it’s safer and
more convenient

9. OOP-ish
var StudentList = function(students){
this.students = students
this.getNames = function(){
/* …. */
}
this.raiseStudentsLevel = function(){
/* …. */
}
}

10. Imperative-ish
var students = […]
var names = []
for(var = i; i < students.length; i++){
var name = students[i].getName()
names.push(name)
}
console.log(names) // Katie, Emmie, Timi, …

11. OOP-ish
this.getNames = function(){
var names = []
for(var = i; i < this.students.length; i++){
var name = this.students[i].getName()
names.push(name)
}
return names
}
this.raiseStudentsLevel = function(){
for(var = i; i < this.students.length; i++){
var student= this.students[i]
student.raiseLevel()
}
}

12. Simon Peyton Jones – Coders at Work
When the limestone of
imperative programming is
worn away, the granite of
functional programming will
be observed

13. OOP-ish
this.forEachStudent = function(fn){
for( var i = 0; i < this.students.length; i++){
var student = this.students[i]
fn(student,i,this.students)
}
}

14. OOP-ish
this.getNames = function(){
var names = [],
getName = function(student, i, this.students){
var name = studet.getName()
names.push(name)
}
this.forEachStudent(getName)
return names
}

15. OOP-ish
this.raiseLevels = function(){
var raiseStudentLevel = function(student,i,students){
student.raiseLevel()
}
this.forEachStudent(raiseStudentLevel)
}

16. OOP-ish
var TeacherList = function(teachers){
this.teachers = teachers
this.getNames = /* ….? */
}

17. Functional-ish
function forEach(arr,fn){
for(var i = 0; i < arr.length; i++){
fn(arr[i],i,arr)
}
}

18. Functional-ish
var studentNames = []
forEach(StudentList.students,(student) => {
studentNames.push(student.getName())
})
var teachersNames= []
forEach(TeacherList.teachers,(teacher) => {
teacherNames.push(teacher.getName())
})

19. What Is Our Worker Doing?

20. Functional-ish
function map(arr,fn){
var result = []
for(var i = 0; i < arr.length; i++){
var newVal = fn(arr[i],i,arr)
result.push(newVal)
}
return result
}

21. Functional-ish
var studentNames =
map(StudentList.students, student => student.getName())
var teachersNames=
map(TeacherList.teachers, teacher => teacher.getName())

22. Regular Objects
var studentNames =
map(students, student => student.name)
var teachersNames=
map(teachers, teacher => teacher.name)

23. Regular Objects
var getName = obj => obj.name
var studentNames=
map(students, getName)
var teachersNames=
map(teachers, getName)

24. Better But Repetitive
var getName = obj => obj.name
var getAge = obj => obj.age
var getLocation = obj => obj.location

25. What Are We Actually Doing?
var pluck = key => obj =>obj[key]
var getName = pluck(‘name’)
var getAge = pluck(‘age’)

26. So What About Higher-Order Functions?

27. A Higher-Order Function is
A function that accepts a function:
function map(arr,fn){
var result = []
for(var i = 0; i < arr.length; i++){
var newVal = fn(arr[i],i,arr)
result.push(newVal)
}
return result
}

28. A Higher-Order Function is
A function that returns a function:
var pluck = key => obj => obj[key]

29. Let’s Solve Something
https://github.com/mlotstein/StarFleet-Mine-Clearing-Exercise/blob/master/README.md

30. Let’s Solve Something
..A..
A…A
..A..
board.txt
north
delta south
west gamma
moves.txt

31. What Data Structure?
var Board = function(){
this.board = …
this.drawBoard = function(center){
/* .... */
}
}

32. What Data Structure?
var board = …
var makeBoard = (board,center){
/* .... */
}

33. Why Does It Matter?
Is The Board Always Correct?
Am I Touching The Board?
What’s The Contract?

34. Reusable Solutions
const board = str => str.split(‘n’)
.map(row => row.split(‘’))
..A..
A…A
..A..
board.txt
[[‘.’,’.’,’A’,’.’,’.’],
[‘A’,’.’,’.’,’.’,’A’],
[‘.’,’.’,’A’,’.’,’.’]]
const board

35. Reusable Solutions
const board = str => str.split(‘n’)
.map(row => row.split(‘’))

36. Get Only If…
const row = [‘.’,’.’,’A’,’.’,’.’]
const emptyIndexes = /* ….? */

37. Get Only If…
const filter = (arr,pred) => {
const result = []
for(let i = 0; i < arr.length; i++){
const item = arr[i]
if(pred(item,i,arr){
result.push(item)
}
}
return result
}

38. Half Way There
const row = [‘.’,’.’,’A’,’.’,’.’]
const emptyIndexes = filter(row,char => char === ‘.’)

39. Map To The Rescue!
const row = [‘.’,’.’,’A’,’.’,’.’]
const emptyIndexes =
row.map( (char, i) => ({ index: i, char}) )
.filter({char} => char === ‘.’)
console.log(emptyIndexes) // [{index: 0, char: ‘.’},…]

40. Loop ALL The Times
const row = [‘.’,’.’,’A’,’.’,’.’]
const emptyIndexes =
row.map( (char, i) => ({ index: i, char}) )
.filter({char} => char === ‘.’)
.map(pluck(‘index’))
console.log(emptyIndexes) // [0,1,3,4]

41. How Does That Help Us?
const mines = board => /* ….? */
[[‘.’,’.’,’A’,’.’,’.’],
[‘A’,’.’,’.’,’.’,’A’],
[‘.’,’.’,’A’,’.’,’.’]]
const board
[[0,2],[1,0],[1,4],[2,0]]
const mines

42. How Does That Help Us?
const minesFromRows = (row,y) =>
row.map((char, x) => ({location: [x,y],char})
.filter({char} => char !== ‘.’)
const mineCoords = board =>
board.map(minesFromRows)
.filter(row => row.length)
.reduce((list,row) => list.concat(row),[])
.map(pluck(‘location’))

43. Reduce Down For What?
const reduce = (arr,fn,start) => {
let result = start
for(let i = 0; i < arr.length; i++){
const curr = arr[i],
pre = result
result = fn(pre,curr,i, arr)
}
return result
}

44. Reduce, Reuse, Recycle
const biggestDelta = ([x1,y1],[x2,y2] =>
[Math.max(x1,x2),Math.max(y1,y2)]
const furthestPoints =(mines,[centerX,centerY]) =>
mines.reduce(biggestDelta,[0,0])

45. Confused?

46. Actually Smart People
https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q

47. Actually Smart People
https://github.com/getify/Functional-Light-JS

48. Programming is Hard

49. http://www.slideshare.net/TimothyRoberts/dr-
iterate-or-how-i-learned-to-stop-worrying-and-
love-higherorder-functions
@cirsca
github.com/beardedtim