Building Functional Islands

Building Functional Islands

A talk about functional programming at the April 2016 Front End London http://frontendlondon.co.uk

Bca1b99f923e255051cbd09bae751e7a?s=128

Mark Jones

April 28, 2016
Tweet

Transcript

  1. 4.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    function } document.body.addEventListener('click', onClick); Higher-Order Functions
  9. 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; }
  10. 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; }
  11. 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; }
  12. 24.

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

    add(3, 4); // 3 + 7; // 10;
  13. 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 }
  14. 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 }
  15. 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 }
  16. 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 }
  17. 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 }
  18. 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 }
  19. 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 }
  20. 37.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    JSON.parse); getFilmIdsFromResponse('{ "films": [...], "actors": [...] }');
  39. 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
  40. 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