Mark Jones
April 28, 2016
210

# Building Functional Islands

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

April 28, 2016

## Transcript

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

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; }

2] // 3

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

function return x + y; }

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

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 } }

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);

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);

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": [...] }');

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