This document provides an introduction to functional programming concepts in JavaScript. It discusses implementing reduce, map, and filter functions without mutation or state by using recursion and higher-order functions. Reduce is implemented using tail recursion to sum the elements of a collection. Map and filter are then implemented using only the reduce function, demonstrating how these common functional operations can be built up from a core reduce operation. The document encourages further exploration of functional programming with additional resources.

1. Functional
Programming
An Introduction
2015.05.21
1

2. > Drew Olson
> Braintree
> github.com/drewolson
2

3. Things to know
> Ask questions
> node
> babeljs.io
3

4. Reduce/Map/Filter
in Javascript 4
Without State
Without Mutation

5. What is functional
programming?
5

6. What are we going to focus on?
> Immutability
> No state
> Higher-order functions
> Lots of code
6

7. What aren’t we going to focus
on?
> Types
> Monads
> Being tricky to feel smart
7

8. Why even care?
> Explicitness
> Concurrency / Parallelism
> Understandability
8

9. Reduce/Map/Filter
in Javascript 9
Without State
> Without Mutation

10. 10
let a = 1;
a = 2;
console.log(a);
// => 2
// :(

11. 11
let a = 1;
a = 2;
console.log(a);
// => 2
// :(
Enforced via discipline :)

12. Reduce/Map/Filter
in Javascript 12
> Without State
Without Mutation

13. 13
class Foo
attr_accessor :bar
def initialize(bar)
@bar = bar
end
def increment(i)
i + 1
end
end
foo = Foo.new(1)
# things happen here
# .
# ..
# ...
# what does this return?
p foo.bar
# what does this return?
p foo.increment(2)

14. Let’s add some numbers!
14

15. 15
let sumIter = function (n) {
let sum = 0;
for (let i = 0; i <= n; i++) {
sum = sum + i;
}
return sum;
}
console.log(sumIter(50));
// => 1275

16. 16
let sumIter = function (n) {
let sum = 0;
for (let i = 0; i <= n; i++) {
sum = sum + i;
}
return sum;
}
console.log(sumIter(50));
// => 1275

17. Recursion!
> Base case
> Recursive call
17

18. 18
let sumRec = function (n) {
if (n === 0) {
return 0;
} else {
return n + sumRec(n - 1);
}
}
console.log(sumRec(50));
// => 1275

19. 19
let sumRec = function (n) {
if (n === 0) {
return 0;
} else {
return n + sumRec(n - 1);
}
}
console.log(sumRec(50000000));
// => RangeError: Maximum call
stack size exceeded

20. 20
// sumRec(5)
// 1 + sumRec(4)
// 1 + (1 + sumRec(3))
// 1 + (1 + (1 + sumRec(2)))
// 1 + (1 + (1 + (1 + sumRec(1))))
// 1 + (1 + (1 + (1 + (1 + sumRec(0)))))
// 1 + (1 + (1 + (1 + (1 + 0))))
// 1 + (1 + (1 + (1 + 1)))
// 1 + (1 + (1 + 2))
// 1 + (1 + 3)
// 1 + 4
// 5

21. 21
let sumTail = function (n, acc=0) {
if (n === 0) {
return acc;
} else {
return sumTail(n - 1, acc + n);
}
}
console.log(sumTail(50000000));
// => 1250000025000000

22. 22
// sumTail(5)
// sumTail(5, 0)
// sumTail(4, 1)
// sumTail(3, 2)
// sumTail(2, 3)
// sumTail(1, 4)
// sumTail(0, 5)
// 5

23. > Reduce/Map/Filter
in Javascript 23
Without State
Without Mutation

24. Higher-order functions!
> Functions as values
> Take functions as input
> Return functions
24

25. 25

26. Higher-order functions!
YOU KNOW THIS!!
26

27. 27
File.open("/tmp/setec_astronomy", "w") do |f|
# do stuff with f
end
[1, 2, 3].map do |i|
i + 1
end
# => [2, 3, 4]

28. 28
// take a function as an argument
let callMeMaybe = function (f) {
if (Math.random() < 0.5) {
return f();
} else {
return undefined;
}
}
for (var i of [1, 2, 3, 4, 5]) {
console.log(`Try ${i}`);
callMeMaybe(function () {
console.log("I GOT CALLED!");
});
}

29. 29
Try 1
I GOT CALLED!
Try 2
Try 3
I GOT CALLED!
Try 4
I GOT CALLED!
Try 5

30. 30
// return a function
let incrementor = function (n) {
return function (i) {
return i + n;
}
}
let add1 = incrementor(1);
console.log(add1(2));
// => 3

31. OK! Let’s implement reduce!
> Tail recursion
> Higher-order functions
> No state
> No mutation
31

32. 32
let coll = [1, 2, 3, 4, 5];
let result = reduce(coll, 0, function (i, sum) {
return sum + i;
});
console.log(result);
// => 15

33. 33
let reduce = function (coll, acc, fn) {
if (coll.length === 0) {
return acc;
}
let head = coll[0];
let rest = coll.slice(1, coll.length);
let newAcc = fn(head, acc);
return reduce(rest, newAcc, fn);
}

34. OK! Let’s implement map!
> ONLY USING REDUCE!!?!??!
34

35. 35
let coll = [1, 2, 3, 4, 5];
let result = map(coll, function (i) {
return i + 1;
});
console.log(result);
// => [2, 3, 4, 5, 6]

36. 36
let map = function (coll, fn) {
return reduce(coll, [], function (i, acc) {
return acc.concat(fn(i));
});
}

37. OK! Let’s implement filter!
> ONLY USING REDUCE!!?!??!
> This time less shockingly
revealed!!
37

38. 38
let coll = [1, 2, 3, 4, 5];
let result = filter(coll, function (i) {
return i < 4;
});
console.log(result);
// => [1, 2, 3]

39. 39
let filter = function (coll, fn) {
return reduce(coll, [], function (i, acc) {
if (fn(i)) {
return acc.concat(i);
} else {
return acc;
}
});
}

40. Reduce/Map/Filter
in Javascript 40
Without State
Without Mutation

41. 41

42. Things to check out
> Functional Javascript (book)
> The Little Schemer (book)
> Elixir (language)
42

43. braintreepayments.com
End Slide_
43
Thanks!
Questions?