Functional JavaScript for Beginners

Transcript

1. Functional JavaScript for Beginners
2. Hi, I'm Steve.
3. @stevekinney
4. http://turing.io
5. @dinosaur_js June 24, 2016 in Denver. You can use the code moonconf for $60 off.
6. Today we'll cover the following topics
7. · What functional programming even is · Functions as first-class objects · Pure versus impure functions · Partial application · Currying
8. What is functional programming?
9. A style of building the structure and elements of computer programs—that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data. — Wikipedia
10. What is a pure function?
11. A pure function is one that takes arguments and returns a value without having any side effects.
12. const add = function (a, b) { return a + b; }; This is a pure function.
13. const randomNumbers = []; const addARandomNumber = function () { randomNumbers.push(Math.random()); }; This is an impure function.
14. It doesn't take any inputs. It doesn't return any value. It has a side effect.
15. Gross.
16. Is JavaScript a functional programming language?
17. It depends.
18. JavaScript is what we call a multi-paradigm language.
19. We can write JavaScript in all sorts of styles.
20. Imperative Object-oriented Prototypal Functional
21. Let's take a quick look at some imperative code.
22. let result; function capitalizeWord(input) { var counter; var inputArray = input.split(" "); var transformed = ""; result = []; for (counter = 0; counter < inputArray.length; counter++) { transformed = [ inputArray[counter].charAt(0).toUpperCase(), inputArray[counter].substring(1) ].join(""); result.push(transformed); } }; (Don't even try to grok this.)
23. This code works, but it has some problems.
24. It modifies a global variable (e.g. result).
25. It combines the process of splitting the words up and transforming them.
26. It's not DRY.
27. Don't Repeat Yourself (Acronyms are fun, right?)
28. We can image a world where we might want to do a bit more.
29. SCREAMING CASE all lower case CrAzY CaSe uʍop ǝpᴉsdn
30. The Key to Functional Programming
31. Break your code into super small and reusable functions.
32. const capitalize = function (input) { return [input.charAt(0).toUpperCase(), input.substring(1)].join(''); } const processWords = function (fn, string) { return str.split(" ").map(fn).join(" "); } processWords(capitalize, 'hello world');
33. map and reduce
34. const veryImportantNumbers = [1, 4, 15]; Let's say we have some very important numbers and we want to double them.
35. We could totally do it in an imperative style.
36. const veryImportantNumbers = [1, 4, 15]; const doubledNumbers = []; for (let i; i < veryImportantNumbers.length; i++) { const number = veryImportantNumbers[i]; doubledNumbers.push(number); }
37. Ugh.
38. What if we tried this again with some functional programming?
39. map · takes an array of things, · runs each thing through a (hopefully) pure function, · returns a new array of things
40. const veryImportantNumbers = [1, 4, 15]; const double = (n) => n * 2; const doubledNumbers = veryImportantNumbers.map(double);
41. const veryImportantNumbers = [1, 4, 15]; const double = function (n) { return n * 2 }; const doubledNumbers = veryImportantNumbers.map(double);
42. const veryImportantNumbers = [1, 4, 15]; const double = (n) => n * 2; const doubledNumbers = veryImportantNumbers.map(double);
43. const veryImportantNumbers = [1, 4, 15]; const double = (n) => n * 2; const square = (n) => n * n; const halve = (n) => n / 2; const addOne = (n) => n + 1; const doubledNumbers = veryImportantNumbers.map(double); const squaredNumbers = veryImportantNumbers.map(square); const halvedNumbers = veryImportantNumbers.map(halve); const numbersPlusOne = veryImportantNumbers.map(addOne);
44. In JavaScript, the syntax is a little squirrely because it's a method on Array objects.
45. _.map(verImportantNumbers, double); Lodash does this a bit better.
46. _.map(verImportantNumbers, double); processWords(capitalize, 'hell world'); This is not unlike our first example.
47. reduce · Takes an array of things · Set ups an "accumulator" · Passes each one into a (hopefully) pure function · Returns the accumulator
48. const veryImportantNumbers = [1, 4, 15]; let sum = 0; for (let i; i < veryImportantNumbers.length; i++) { sum += veryImportantNumbers[i];; }
49. const veryImportantNumbers = [1, 4, 15]; const add = (a, b) => a + b; const sum = veryImportantNumbers.reduce(add);
50. const veryImportantNumbers = [1, 4, 15]; const add = (a, b) => a + b; const multiply = (a, b) => a * b; const sum = veryImportantNumbers.reduce(add); const factorial = veryImportantNumbers.reduce(multiply);
51. We say that functions are "composable."
52. const veryImportantNumbers = [1, 4, 15]; let doubleSum = 0; for (let i; i < veryImportantNumbers.length; i++) { doubleSum += veryImportantNumbers[i] * 2; } This whole process is "tightly coupled."
53. const veryImportantNumbers = [1, 4, 15]; const double = (n) => n * 2; const add = (a, b) => a + b; const doubleSum = veryImportantNumbers.map(double).reduce(add);
54. const veryImportantNumbers = [1, 4, 15]; const map = _.map; const reduce = _.reduce; const double = (n) => n * 2; const add = (a, b) => a + b; const doubleSum = double(reduce(veryImportantNumbers, add));
55. JavaScript infamously has a C-inspired syntax.
56. double(reduce(veryImportantNumbers, add)); As a result, when we write functional style code, we have to read it from the inside out.
57. reduce(veryImportantNumbers, add) |> double In some other languages, there is syntax to read it in the correct order.
58. There is a proposal to bring this to JavaScript in the future.
59. We can also solve this problem using Lodash's chain feature. const veryImportantNumbers = [1, 4, 15]; const { map, reduce, chain } = _; const double = (n) => n * 2; const add = (a, b) => a + b; chain(veryImportantNumbers).map(double).reduce(add).value(); But, it only really works with Lodash's functions.
60. Unless you engage in some tomfoolery. const veryImportantNumbers = [1, 4, 15]; const { map, reduce, chain } = _; const double = (n) => n * 2; const add = (a, b) => a + b; _.mixin({ double }); chain(veryImportantNumbers).reduce(add).double().value();
61. Partial Application
62. Partial application is a technique where we provide some of the arguments to a function now and the rest later.
63. This is useful because it allows us to use functions as templates for other functions.
64. In JavaScript, we can do this using Function.prototype.bind.
65. const add = (a, b) => a + b; const addOne = add.bind(this, 1); const subtractFive = add.bind(this, -5); addOne(5); // returns 6 subtractFive(12); // returns 7
66. Confusingly, bind() takes a context as the first argument. It then uses the second argument to partially apply the first argument to the function you're calling it on.
67. Everyone got that?
68. (Don't shoot the messenger.)
69. const add = (a, b) => a + b; const addOne = add.bind(this, 1); const addOne = add.bind(null, 1); const addOne = add.bind('sandwich', 1); If you're not using this in the function, then that first argument can be anything.
70. const superAdd = (a, b, c, d) => a + b + c + d; const oneArgumentApplied = superAdd.bind(this, 1); // ! — waiting on b, c, and d. const twoArgumentsApplied = superAdd.bind(this, 1, 2); // ! — waiting on c and d. const threeArgumentsApplied = superAdd.bind(this, 1, 2, 3); // ! — waiting on d. const fourArgumentsApplied = superAdd.bind(this, 1, 2, 3, 4); // ! — ready to call with no additional arguments.
71. Alternatively…
72. const superAdd = (a, b, c, d) => a + b + c + d; const oneArgumentApplied = (b, c, d) => superAdd(1, b, c, d); const twoArgumentsApplied = (c, d) => superAdd(1, 2, c, d); const threeArgumentsApplied = (d) => superAdd(1, 2, 3, d); const fourArgumentsApplied = () => superAdd(1, 2, 3, 4);
73. const add = (a, b) => a + b; const addOne = (b) => add(1, b); const subtractFive = (b) => add(-5, b); addOne(5); // returns 6 subtractFive(12); // returns 7
74. const superAdd = (a, b, c, d) => a + b + c + d; const oneArgumentApplied = superAdd.bind(this, 1); const twoArgumentsApplied = oneArgumentApplied.bind(this, 2); const threeArgumentsApplied = twoArgumentsApplied.bind(this, 3); const fourArgumentsApplied = threeArgumentsApplied.bind(this, 4);
75. Currying
76. Haskell Curry, 1900 – 1982
77. const addThreeNumbers = (a, b, c) => a + b + c; addThreeNumbers(1, 2, 3); // returns 6 This is a non-curried function.
78. const curriedAdd = (a) => { return (b) => { return (c) => { return a + b + c; } } }; curriedAdd(1)(2)(3); // returns 6
79. Or, more tersely: const curriedAdd = (a) => (b) => (c) => a + b + c;
80. const firstArgumentApplied = curriedAdd(1); // returns a function const secondArgumentApplied = firstArgumentApplied(2); // returns a function const thirdArgumentApplied = secondArgumentApplied(3); // returns 6
81. Why would I ever do this to myself?
82. Let's say it was out job to make a bunch of functions that took some text and wrapped them in HTML tags.
83. const wrapInParagraphTags = (body) => '<p>' + body + '</p>'; const wrapInHeaderTags = (body) => '<h1>' + body + '</h1>'; const wrapInListItemTags = (body) => '<li>' + body + '</li>'; (And like a hundred other functions.)
84. One day, the boss walks in and says "HTML is dead!"
85. Now, you have to change all of those functions.
86. But, you wouldn't have had to if you use currying.
87. const createWrapper = (tag) => { return (body) => { return `<${tag}>${body}</${tag}>` }; } const wrapInParagraphTags = createWrapper('p'); const p = wrapInParagraphTags('Currying FTW!'); // ! returns `<p>Currying FTW!</p>` const h2 = createWrapper('h2')('Hello world'); // ! returns `<h2>Hello world</h2>`
88. Now, we'd only have to quickly change createWrapper and we're good to go.
89. const createWrapper = (tag) => (body) => `<${tag}>${body}</${tag}>`;
90. We could also use partial application.
91. const wrapInTags = (tag, body) => `<${tag}>${body}</${tag}>`; const wrapInParagraphTags = wrapInTags.bind(null, 'p'); const p = wrapInParagraphTags('Partial application FTW!'); const h2 = wrapInTags('h2', 'Hello world');
92. TL;DR: Functional programming allows us to write super flexible composable code. It helps use keep our code DRY.
93. Where do I go from here?
94. Learning Nodeschool.io (http://bit.ly/fjs-ns)
95. Books Functional JavaScript by Michael Fogus (http:// amzn.to/1U37sDu) Functional Programming in JavaScript by Luis Atencio (http://amzn.to/1U37DOX)
96. Thank you! · @stevekinney · @dinosaur_js · http://turing.io