Functional Programming: What? Why? How?

Presented at HolyJS 2017 (https://holyjs-piter.ru/en/talks/functional-programming-in-js-what-why-how/)

Functional programming has become a hot topic in the JS community, leaving many JavaScripters wondering: What's all the hype about? What do functional programs look like, and why might I prefer them to imperative/object-oriented code? How do I get started writing code in a functional style?

If you've been asking yourself these questions, you'll enjoy this gentle, practical intro to functional programming. We'll explore the advantages and basic principles of the paradigm, in which holy, pure functions deliver us from the evils of mutable state. We'll see how rejecting side-effects and mutability in our code can avoid a lot of common JS headaches. And we'll learn how to use core JS features as well as some popular FP libraries like Mori and Ramda to start writing our own functional programs.

Transcript

1. Functional Programming: What? Why? How? @AnjanaVakil HolyJS 2017
2. Who? @AnjanaVakil
3. The Recurse Center https://www.recurse.com/
4. What is functional programming?
5. What is functional programming? a buzz-wordy trend
6. pure functor side effect monad monoid compose curry λ immutable stateless lazy referential transparency higher-order
7. pure functor side effect monad monoid compose curry λ immutable stateless lazy referential transparency higher-order ???
8. What is functional programming? a coding style supported by some languages
9. Clojure Haskell JavaScript! Erlang Elm Scala F# OCaml
10. What is functional programming? a programming paradigm (worldview, mindset)
11. Imperative follow my commands do this, then that Object-Oriented keep state to yourself send/receive messages Declarative this is what I want I don't care how you do it Functional ???
12. What is functional programming? one simple idea
13. https://codewords.recurse.com/issues/one/an-introduction-to-functional-programming
14. pure functions only input in only output out
15. Not pure: var name = "Saint Petersburg"; function greet() { console.log("Hello, " + name + "!"); } greet(); // Hello, Saint Petersburg! name = "HolyJS"; greet(); // Hello, HolyJS!
16. Pure: function greet(name) { return "Hello, " + name + "!"; } greet("Saint Petersburg"); // "Hello, Saint Petersburg!" greet("HolyJS"); // "Hello, HolyJS!"
17. Why functional programming?
18. Why functional programming? more predictable, safer
19. Why functional programming? easier to test/debug
20. Why functional programming? makes you look/feel smart is The Best™ paradigm
21. Why functional JavaScript?
22. Why functional JavaScript? object-oriented JS gets tricky (prototypes? this?!?)
23. Why functional JavaScript? established community/tools
24. OK, let’s do it!
25. OK, let’s do it! ...how?
26. Do everything with functions program === function(s)
27. Imperative: var city = "St. Petersburg"; var greeting = "Hi"; console.log(greeting + ", " + city + "!"); // Hi, St. Petersburg! greeting = "Привет"; console.log(greeting + ", " + city + "!"); // Привет, St. Petersburg!
28. Functional: function greet(greeting, name) { return greeting + ", " + name + "!"; } greet("Hi", "St. Petersburg"); // "Hi, St. Petersburg!" greet("Привет", "HolyJS"); // "Привет, HolyJS!"
29. Avoid side effects do nothing but return output
30. Side effects: var conf = {name: "SaintJS", date: 2017}; function renameConf(newName) { conf.name = newName; console.log("Renamed!"); } renameConf("HolyJS"); // Renamed! conf; // {name: "HolyJS", date: 2017}
31. No side effects: var conf = {name: "SaintJS", date: 2017}; function renameConf(oldConf, newName) { return {name: newName, date: oldConf.date} } var newConf = renameConf(conf, "HolyJS"); newConf; // {name: "HolyJS", date: 2017} conf; // {name: "SaintJS", date: 2017}
32. Avoid mutability don't change in-place; instead, replace
33. Mutation (dangerous!): var numSysts = ["Roman", "Arabic", "Chinese"]; numSysts[1] = "Hindu-" + numSysts[1]; numSysts; // ["Roman", "Hindu-Arabic", "Chinese"]
34. No mutation (safer!): const numSysts = ["Roman", "Arabic", "Chinese"]; const newNumSysts = numSysts.map((num) => { if (num === "Arabic") { return "Hindu-" + num; } else { return num; } }); newNumSysts;//["Roman", "Hindu-Arabic", "Chinese"] numSysts; //["Roman", "Arabic", "Chinese"]
35. 0 1 2 3 4 5 6 7 foo Mutable data
36. 8 1 2 3 4 5 6 7 foo Mutable data
37. 0 1 2 3 4 5 6 7 foo Immutable data
38. 0 1 2 3 4 5 6 7 foo 8 1 2 3 4 5 6 7 too Immutable data
39. 0 1 2 3 4 5 6 7 foo 8 1 2 3 4 5 6 7 too Immutable data (inefficient)
40. Use persistent data structures for efficient immutability
41. 0 1 2 3 4 5 6 7 foo Immutable data (efficient)
42. 0 1 2 3 4 5 6 7 foo Immutable data (efficient)
43. 0 1 2 3 foo 4 5 6 7 1 8 too Immutable data (efficient)
44. 0 1 2 3 foo 4 5 6 7 1 8 too Persistent (immutable) data structures structural sharing
45. Mori https://swannodette.github.io/mori var f = mori.vector(1,2); var t = mori.conj(f, 3); • ClojureScript port • Functional API • Fast Immutable.js https://facebook.github.io/immutable-js var f = Immutable.List.of(1,2); var t = f.push(3); • JS through & through • Public methods • A bit smaller than Mori Persistent data structures
46. Don’t iterate recurse
47. Iteration: function sum (numbers) { let total = 0; for (i = 0; i < numbers.length; i++) { total += numbers[i]; } return total; } sum([0,1,2,3,4]); // 10
48. Recursion: function sum (numbers) { if (numbers.length === 1) { return numbers[0]; } else { return numbers[0] + sum(numbers.slice(1)); } } sum([0,1,2,3,4]); // 10
49. Don’t loop use map, reduce, filter
50. Filter Figure adapted from http://www.datasciencecentral.com/forum/topics/what-is-map-reduce
51. Use higher-order functions functions with functions as inputs/outputs
52. Closures: function makeAdjectifier(adjective) { return function (noun) { return adjective + " " + noun; }; } var holify = makeAdjectifier("holy"); holify("JS"); // "holy JS" holify("cow"); // "holy cow"
53. Flow data through functions outputs become inputs become outputs
54. Outputs become next inputs: var ender = (ending) => (input) => input + ending; var adore = ender(" rocks"); var announce = ender(", y'all"); var exclaim = ender("!"); var hypeUp = (x) => exclaim(announce(adore(x))); hypeUp("JS"); // "JS rocks, y'all!" hypeUp("FP"); // "FP rocks, y'all!"
55. Function composition/pipelining: var r = require("ramda"); var rtlHype = r.compose(adore, announce, exclaim); rtlHype("FP"); // "FP!, y'all rocks" var ltrHype = r.pipe(adore, announce, exclaim); ltrHype("FP"); // "FP rocks, y'all!"
56. FP libraries for JS • Mori (swannodette.github.io/mori) • Immutable.js (facebook.github.io/immutable-js) • Ramda (ramdajs.com) • Underscore (underscorejs.org) • Lodash (lodash.com) • ...and more!
57. Further reading/watching Code Words by the Recurse Center (codewords.recurse.com) • Mary Rose Cook, "An introduction to functional programming" • Sal Becker, "This just isn't functional" • Patrick Dubroy, "Immutability is not enough" J. Kerr, “Functional Principles for OO Development”, GOTO Chicago '14 youtu.be/GpXsQ-NIKXY Me, "Immutable data structures for functional JS", JSConf EU '17 youtu.be/Wo0qiGPSV-s D. Nolen, “Immutability, interactivity & JS”, FutureJS '14 youtu.be/mS264h8KGwk L. Byron, “Immutable Data & React”, React.js Conf '15 youtu.be/I7IdS-PbEgI B. Stokke, "The Miracle of Generators", GOTO Chicago '16 youtu.be/6mCkLZ0cwAI
58. Thanks for listening! I’m @AnjanaVakil Huge thanks to: Mary Rose Cook, Sal Becker, Khalid Ali & The Recurse Center HolyJS organizers