Building Functional Islands

Transcript

1. Building Functional Islands

2. Audience Participation

3. What is Functional Programming?

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

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

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

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

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

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

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

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

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

   3], double); Expressions

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

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

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

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

11. Why Functional Programming?

12. Functions Island Building Block #1

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

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

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

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

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. 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. 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. Higher-Order Functions const logifyAdd = logify(add); logifyAdd(1, 2); // [1,

    2] // 3

19. Higher-Order Functions The Benefits

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

    function return x + y; }

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

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

    add(3, 4);

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

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

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

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

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

    return x + y; } Pure Functions

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

27. Pure Functions The Benefits

28. Pure Functions The Reality

29. Immutability Island Building Block #2

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. 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. 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. 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. 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. 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. 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. Object.freeze const employee = Object.freeze({ department: 'Eng', profile: { name:

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

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

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

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

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

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

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

41. Immutability The Benefits

42. Immutability The Reality

43. Currying Island Building Block #3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

54. Currying The Benefits

55. Currying The Reality

56. Composition Island Building Block #4

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

    fgRes = f(gRes);

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

    fgRes = f(gRes);

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

    fgRes = f(gRes);

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

    fgRes = f(gRes);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

73. Composition The Benefits

74. Composition The Reality

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

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. 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. Thank you. @mark_ jones