Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Functional Programming: What? Why? How?

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.

654527a5cff1756177ef0b1bb0af7aa3?s=128

Anjana Sofia Vakil

June 03, 2017
Tweet

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