Building Functional Islands

Transcript

1. 1.

   Building Functional Islands

2. 2.

   Audience Participation

3. 3.

   What is Functional Programming?

4. 4.

   Statements const nums = [1, 2, 3]; const doubled =

   []; for (let i = 0; i < nums.length; i++) { doubled.push(nums[i] * 2); }
5. 5.

   Statements const nums = [1, 2, 3]; const doubled =

   []; for (let i = 0; i < nums.length; i++) { doubled.push(nums[i] * 2); }
6. 6.

   Statements const nums = [1, 2, 3]; const doubled =

   []; for (let i = 0; i < nums.length; i++) { doubled.push(nums[i] * 2); }
7. 7.

   Statements const nums = [1, 2, 3]; const doubled =

   []; for (let i = 0; i < nums.length; i++) { doubled.push(nums[i] * 2); }
8. 8.

   function double(x) { return x * 2; } map([1, 2,

   3], double); Expressions
9. 9.

   function double(x) { return x * 2; } map([1, 2,

   3], double); // [(1 * 2), (2 * 2), (3 * 2)] Expressions
10. 10.

    function double(x) { return x * 2; } map([1, 2,

    3], double); // [(1 * 2), (2 * 2), (3 * 2)] // [2, 4, 6] Expressions
11. 11.

    Why Functional Programming?

12. 12.

    Functions Island Building Block #1

13. 13.

    First-Class Functions function onClick() { // I'm a first-class function

    } document.body.addEventListener('click', onClick);
14. 14.

    function onClick() { // I get called by a higher-order

    function } document.body.addEventListener('click', onClick); Higher-Order Functions
15. 15.

    Higher-Order Functions function logify(fn) { return (...args) => { console.log(args);

    return fn(...args); }; } const logifyAdd = logify(add); function add(x, y) { return x + y; }
16. 16.

    Higher-Order Functions function logify(fn) { return (...args) => { console.log(args);

    return fn(...args); }; } const logifyAdd = logify(add); function add(x, y) { return x + y; }
17. 17.

    Higher-Order Functions function logify(fn) { return (...args) => { console.log(args);

    return fn(...args); }; } const logifyAdd = logify(add); function add(x, y) { return x + y; }
18. 18.

    Higher-Order Functions const logifyAdd = logify(add); logifyAdd(1, 2); // [1,

    2] // 3
19. 19.

    Higher-Order Functions The Benefits

20. 20.

    Pure Functions function add(x, y) { // I'm a pure

    function return x + y; }
21. 21.

    Pure Functions add(1, 2) + add(3, 4);

22. 22.

    Pure Functions add(1, 2) + add(3, 4); // 3 +

    add(3, 4);
23. 23.

    Pure Functions add(1, 2) + add(3, 4); // 3 +

    add(3, 4); // 3 + 7;
24. 24.

    Pure Functions add(1, 2) + add(3, 4); // 3 +

    add(3, 4); // 3 + 7; // 10;
25. 25.

    function addAndSomethingElse(x, y) { // I'm an impure function doSomethingElse();

    return x + y; } Pure Functions
26. 26.

    Pure Functions addAndSomethingElse(1, 2) // ???

27. 27.

    Pure Functions The Benefits

28. 28.

    Pure Functions The Reality

29. 29.

    Immutability Island Building Block #2

30. 30.

    Immutable values const nums = [1, 2, 3]; const person

    = { name: 'mark', age: 29 }; nums[0] = 2; // [2, 2, 3] person.age = 27; // { name: 'mark', age: 27 }
31. 31.

    Immutable values const nums = [1, 2, 3]; const person

    = { name: 'mark', age: 29 }; nums[0] = 2; // [2, 2, 3] person.age = 27; // { name: 'mark', age: 27 }
32. 32.

    Immutable values const nums = [1, 2, 3]; const person

    = { name: 'mark', age: 29 }; nums[0] = 2; // [2, 2, 3] person.age = 27; // { name: 'mark', age: 27 }
33. 33.

    Immutable values const nums = [1, 2, 3]; const person

    = { name: 'mark', age: 29 }; nums[0] = 2; // [2, 2, 3] person.age = 27; // { name: 'mark', age: 27 }
34. 34.

    Object.freeze const nums = Object.freeze([1, 2, 3]); const person =

    Object.freeze({ name: 'mark', age: 29 }); nums[0] = 2; // [1, 2, 3] person.age = 27; // { name: 'mark', age: 29 }
35. 35.

    Object.freeze const nums = Object.freeze([1, 2, 3]); const person =

    Object.freeze({ name: 'mark', age: 29 }); nums[0] = 2; // [1, 2, 3] person.age = 27; // { name: 'mark', age: 29 }
36. 36.

    Object.freeze const nums = Object.freeze([1, 2, 3]); const person =

    Object.freeze({ name: 'mark', age: 29 }); nums[0] = 2; // [1, 2, 3] person.age = 27; // { name: 'mark', age: 29 }
37. 37.

    Object.freeze const employee = Object.freeze({ department: 'Eng', profile: { name:

    'mark', age: 29 } }); employee.profile.age = 27; // {...{ name: 'mark', age: 27 } }
38. 38.

    Object.freeze const employee = Object.freeze({ department: 'Eng', profile: { name:

    'mark', age: 29 } }); employee.profile.age = 27; // {...{ name: 'mark', age: 27 } }
39. 39.

    Object.freeze const employee = Object.freeze({ department: 'Eng', profile: { name:

    'mark', age: 29 } }); employee.profile.age = 27; // {...{ name: 'mark', age: 27 } }
40. 40.

    deepFreeze const employee = deepFreeze({ department: 'Eng', profile: { name:

    'mark', age: 29 } }); employee.profile.age = 27; // {...{ name: 'mark', age: 29 } }
41. 41.

    Immutability The Benefits

42. 42.

    Immutability The Reality

43. 43.

    Currying Island Building Block #3

44. 44.

    Currying const add = curry((x, y) => { return x

    + y; }); const succ = add(1); succ(1); // 2
45. 45.

    Currying const add = curry((x, y) => { return x

    + y; }); const succ = add(1); succ(1); // 2
46. 46.

    Currying const add = curry((x, y) => { return x

    + y; }); const succ = add(1); succ(1); // 2
47. 47.

    Currying const devs = [ { firstName: 'mark' }, {

    firstName: 'sally' } ]; const firstNames = map(devs, (dev) => { return dev.firstName; });
48. 48.

    Currying const devs = [ { firstName: 'mark' }, {

    firstName: 'sally' } ]; const firstNames = map(devs, (dev) => { return dev.firstName; });
49. 49.

    Currying const devs = [ { firstName: 'mark' }, {

    firstName: 'sally' } ]; const firstNames = map(devs, (dev) => { return dev.firstName; });
50. 50.

    Currying const devs = [ { firstName: 'mark' }, {

    firstName: 'sally' } ]; const getFirstNames = map(prop('firstName')); const firstNames = getFirstNames(devs);
51. 51.

    Currying const devs = [ { firstName: 'mark' }, {

    firstName: 'sally' } ]; const getFirstNames = map(prop('firstName')); const firstNames = getFirstNames(devs);
52. 52.

    Currying const devs = [ { firstName: 'mark' }, {

    firstName: 'sally' } ]; const getFirstNames = map(prop('firstName')); const firstNames = getFirstNames(devs);
53. 53.

    Currying const devs = [ { firstName: 'mark' }, {

    firstName: 'sally' } ]; const getFirstNames = map(prop('firstName')); const firstNames = getFirstNames(devs);
54. 54.

    Currying The Benefits

55. 55.

    Currying The Reality

56. 56.

    Composition Island Building Block #4

57. 57.

    Composition const value = 1; const gRes = g(value); const

    fgRes = f(gRes);
58. 58.

    Composition const value = 1; const gRes = g(value); const

    fgRes = f(gRes);
59. 59.

    Composition const value = 1; const gRes = g(value); const

    fgRes = f(gRes);
60. 60.

    Composition const value = 1; const gRes = g(value); const

    fgRes = f(gRes);
61. 61.

    Composition function fg(x) { return f(g(x)); } fg(1);

62. 62.

    Composition const fg = compose(f, g); fg(1);

63. 63.

    Composition function getFilmIdsFromResponse(resp) { return getIds(getFilms(JSON.parse(resp))); } getFilmIdsFromResponse('{ "films": [{

    id: 1 }, ...], "actors": [...] }');
64. 64.

    Composition function getFilmIdsFromResponse(resp) { return getIds(getFilms(JSON.parse(resp))); } getFilmIdsFromResponse('{ "films": [{

    id: 1 }, ...], "actors": [...] }');
65. 65.

    Composition function getFilmIdsFromResponse(resp) { return getIds(getFilms(JSON.parse(resp))); } getFilmIdsFromResponse('{ "films": [{

    id: 1 }, ...], "actors": [...] }');
66. 66.

    Composition function getFilmIdsFromResponse(resp) { return getIds(getFilms(JSON.parse(resp))); } getFilmIdsFromResponse('{ "films": [{

    id: 1 }, ...], "actors": [...] }');
67. 67.

    Composition function getFilmIdsFromResponse(resp) { return getIds(getFilms(JSON.parse(resp))); } getFilmIdsFromResponse('{ "films": [{

    id: 1 }, ...], "actors": [...] }');
68. 68.

    Composition const getIds = map(prop('id')); const getFilmIdsFromResponse = compose(getIds, prop('films'),

    JSON.parse); getFilmIdsFromResponse('{ "films": [...], "actors": [...] }');
69. 69.

    Composition const getIds = map(prop('id')); const getFilmIdsFromResponse = compose(getIds, prop('films'),

    JSON.parse); getFilmIdsFromResponse('{ "films": [...], "actors": [...] }');
70. 70.

    Composition const getIds = map(prop('id')); const getFilmIdsFromResponse = compose(getIds, prop('films'),

    JSON.parse); getFilmIdsFromResponse('{ "films": [...], "actors": [...] }');
71. 71.

    Composition const getIds = map(prop('id')); const getFilmIdsFromResponse = compose(getIds, prop('films'),

    JSON.parse); getFilmIdsFromResponse('{ "films": [...], "actors": [...] }');
72. 72.

    Composition const getIds = map(prop('id')); const getFilmIdsFromResponse = compose(getIds, prop('films'),

    JSON.parse); getFilmIdsFromResponse('{ "films": [...], "actors": [...] }');
73. 73.

    Composition The Benefits

74. 74.

    Composition The Reality

75. 75.

    I’m confused. What’s a functional island again?

76. 76.

    Further reading / watch list (free) https://drboolean.gitbooks.io/mostly-adequate-guide/content/ Professor Frisby's Mostly

    Adequate Guide to Functional Programming http://ramdajs.com/ A practical functional library for Javascript programmers https://github.com/lodash/lodash/wiki/FP-Guide lodash/fp guide https://www.youtube.com/watch?v=m3svKOdZijA Hey Underscore, You're Doing It Wrong! https://github.com/substack/deep-freeze deepFreeze
77. 77.

    Further reading / watch list (paid) https://frontendmasters.com/courses/functional-js-lite/ Functional Lite JavaScript

    https://frontendmasters.com/courses/functional-javascript/ Hardcore Functional Programming in JavaScript
78. 78.

    Thank you. @mark_ jones