Functional Design Patterns in JavaScript

Slides from a talk I gave about using different data types and patterns from purely functional programming languages in JavaScript

1. Functional Design Patterns liftA2(greet, Just("Hi"), Just("Everybody"))
2. Currying ! Composition ! Maybe ! Either ! Promises ! Functors ! Applicative Functors ! Monads
4. Fantasy Land
5. Currying
6. var add = function (a, b) { return a + b; }
7. var increment = function (n) { return add(1, n) }
8. var increment = function (n) { return add(1, n) }
9. var add = function (a) { return function (b) { return a + b; } }
10. var increment = add(1)
11. add(1,2) //=> [Function]
12. add(1)(2) //=> 3
13. var curry = function (f) { return function () { var slice = [].slice , args = slice.call(arguments); ! return (args.length >= f.length) ? f.apply(null, args) : function () { return curry(f).apply( null, args.concat(slice.call(arguments)) ); } } }
14. var add = curry(function (a, b) { return a + b; }); ! add(1)(2) //=> 3 add(1,2) //=> 3 add()(1)()(2) //=> 3
15. var extractNames = function (people) { return people.map(function (person) { return person.name; }); } ! extractNames([ { name: "Haskell Curry” }, { name: "Moses Schönfinkel" } ]) //=> ["Haskell Curry", "Moses Shönfinkel"]
16. var map = curry(function (f, xs) { return xs.map(f); }); ! var prop = curry(function (prop, obj) { return obj[prop]; });
17. var extractNames = function (people) { return people.map(function (person) { return person.name; }); }
18. var extractNames = function (people) { return map(function (person) { return prop("name", person); }, people); }
19. var extractNames = function (people) { return map(function (person) { return prop("name", person); }, people); }
20. var extractNames = function (people) { return map(prop("name"), people); }
21. var extractNames = function (people) { return map(prop("name"), people); }
22. var extractNames = map(prop("name"));
23. Composition
24. var extractNames = map(prop("name"))
25. var extractNames = map(function (o) { return upcase(prop("name", o)) }); ! extractNames([ { name: "Haskell Curry" }, { name: "Moses Schönfinkel" } ]) //=>[ “HASKELL CURRY” , “MOSES SHöNFINKEL” ]
26. var compose = function () { var fns = [].slice.call(arguments); ! return fns.reduce(function (f, g) { return function (x) { return f(g(x)); } }); };
27. var extractNames = map(function (o) { return upcase(prop("name", o)); })
28. var extractNames = map(function (o) { return upcase(prop("name", o)) })
29. var extractNames = map(compose(upcase, prop("name")))
30. var extractNames = map(compose( concat("!!!"), upcase, prop("name")) ))
31. extractNames([ { name: "Haskell Curry" }, { name: "Moses Schönfinkel" } ]) //=>[ “!!!HASKELL CURRY” , “!!!MOSES SHöNFINKEL” ]
32. var flip = curry(function (f, b, a) { return f(a, b); })
33. var extractNames = map(compose( flip(concat, “!!!”), upcase, prop("name") ))
34. extractNames([ { name: "Haskell Curry" }, { name: "Moses Schönfinkel" } ]) //=>[ "HASKELL CURRY!!!" , "MOSES SHöNFINKEL!!!" ]
35. Maybe union Maybe { Just { val: * }, Nothing } ! Just(2) instanceof Maybe //=> true ! Nothing instanceof Maybe //=> true
36. Either union Either { Left { l: * }, Right { r: * } } ! Left("Error") instanceof Either //=> true ! Right(2) instanceof Either //=> true
37. Promise data Promise { fork: Function } ! var promise = Promise(function (resolve) { setTimeout(function () { resolve("I'm done!"); }, 1000); }); ! promise.fork(function (val) { console.log(val); }); //=> "I'm done"
38. Functors
39. map :: Functor f => (a -> b) -> f a -> f b
40. map(increment, [1,2,3]) //=> [2,3,4] ! map(increment, []) //=> []
41. map(increment, Just(2)) //=> Just(3) ! map(increment, Nothing) //=> Nothing
42. map(increment, Right(2)) //=> Right(3) ! map(increment, Left(“error!”)) //=> Left(“error!”)
43. var promise = Promise(function (resolve) { setTimeout(function () { resolve(2) }, 1000) }) ! map(increment, promise) //=> Promise(...) ! promise.fork(function (val) { console.log(val) }) //=> 3
44. Applicative Functors
45. of :: Applicative f => a -> f a ap :: Applicative f => f (a -> b) -> f a -> f b
46. Array.of(2) //=> [2]
47. Maybe.of(2) //=> Just(2)
48. Either.of(2) //=> Right(2)
49. Promise.of(2) //=> Promise(function (resolve) { // resolve(2) // })
50. map(add, Just(2)) //=> Just(add(2))
51. map(add, Just(2)).ap(Just(3)) //=> Just(5) ! map(add, Just(2)).ap(Nothing) //=> Nothing
52. liftA2 :: Applicative f => (a -> b -> c) -> f a -> f b -> f c
53. liftA2(add, Just(2), Just(3)) //=> Just(5) ! liftA2(add, Just(2), Nothing) //=> Nothing
54. liftA2(add, Right(2), Right(3)) //=> Right(5) ! liftA2(add, Right(2), Left("error!")) //=> Left("error!")
55. liftA2(add, Promise.of(2), Promise.of(3)) //=> Promise.of(5)
56. liftA2(concat, ["ha", "heh", "hm"], ["?", "!", "."]) //=> ["ha?","ha!","ha.", "heh?","heh!","heh.", "hmm?","hmm!","hmm."] ! liftA2(times, [2, 5, 10], [8, 10, 11]) //=> [16,20,22,40,50,55,80,100,110]
57. Monads
58. chain :: Monad m => m a -> (a -> m b) -> m b
59. var users = [ { id: 0 , name: "Charles Babbage" , desc: "Originated the concept of a programmable computer" }, { id: 1 , name: "Ada Lovelace" , desc: "Wrote the first computer program" } ]
60. var getUser = function (id) { return Promise.of(users[id]) }
61. var getFriends = function (p) { return Promise.of([users[(p.id + 1) % 2]]) }
62. chain(getUser(0), getFriends) //=> Promise.of( // [{id: 1, name: "Ada Lovelace”}] // )
63. chain(getUser(0), function (p) { return chain(getFriends(p), function (f) { return Promise.of(merge(p, {friends: f})) }) }) //=> Promise.of({ id : 0 // , name : "Charles Babbage" // , desc : "…" // , friends : [ // { id: 1 // , name: "Ada Lovelace” // , desc: "…"} // ] // })
64. do$ { user <- getUser(1) friends <- getFriends(user) ! return Promise.of( merge(user, {friends: friends}) ) } //=> Promise.of({ id : 0 // , name : "Charles Babbage" // , desc : "…" // , friends : [ // { id: 1 // , name: "Ada Lovelace” // , desc: "…"} // ] // })
65. chain([1,2,3], function (x) { return chain([4,5,6], function (y) { return [x*y] }) }) //=> [4,5,6,8,10,12,12,15,18] ! do$ { x <- [1,2,3] y <- [4,5,6] ! return [x*y] } //=> [4,5,6,8,10,12,12,15,18]
66. chain([1,2,3], function (x) { return chain([], function (y) { return [x*y] }) }) //=> [] ! do$ { x <- [1,2,3] y <- [] ! return [x*y] } //=> []
67. chain(Just(2), function (x) { return chain(Just(3), function (y) { return Just(x + y) }) }) //=> Just(5) ! do$ { x <- Just(2) y <- Just(3) ! return Just(x + y) } //=> Just(5)
68. chain(Just(2), function (x) { return chain(Nothing, function (y) { return Maybe(x + y) }) }) //=> Nothing ! do$ { x <- Just(2) y <- Nothing ! return Just(x + y) } //=> Nothing
69. Where to go from here?
70. Where to go from here? • Fantasy Land Spec - https://github.com/fantasyland/fantasy-land • Rambda - http://ramdajs.com • Folktale - http://folktale.github.io ! • sweet.js - http://sweetjs.org • sweet-fantasies - https://github.com/fantasyland/sweet-fantasies • adt-simple - https://github.com/natefaubion/adt-simple • sparkler - https://github.com/natefaubion/sparkler ! • Purescript - http://www.purescript.org ! • Learn You a Haskell - http://learnyouahaskell.com
71. Thank You Github : github.com/pmh ! Twitter : @_pmh_