Tweet
Tweet

Slide 1

Slide 1 text

Building Functional Islands

Slide 2

Slide 2 text

Audience Participation

Slide 3

Slide 3 text

What is Functional Programming?

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

function double(x) { return x * 2; } map([1, 2, 3], double); // [(1 * 2), (2 * 2), (3 * 2)] Expressions

Slide 10

Slide 10 text

function double(x) { return x * 2; } map([1, 2, 3], double); // [(1 * 2), (2 * 2), (3 * 2)] // [2, 4, 6] Expressions

Slide 11

Slide 11 text

Why Functional Programming?

Slide 12

Slide 12 text

Functions Island Building Block #1

Slide 13

Slide 13 text

First-Class Functions function onClick() { // I'm a first-class function } document.body.addEventListener('click', onClick);

Slide 14

Slide 14 text

function onClick() { // I get called by a higher-order function } document.body.addEventListener('click', onClick); Higher-Order Functions

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Higher-Order Functions The Benefits

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

function addAndSomethingElse(x, y) { // I'm an impure function doSomethingElse(); return x + y; } Pure Functions

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Pure Functions The Benefits

Slide 28

Slide 28 text

Pure Functions The Reality

Slide 29

Slide 29 text

Immutability Island Building Block #2

Slide 30

Slide 30 text

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 }

Slide 31

Slide 31 text

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 }

Slide 32

Slide 32 text

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 }

Slide 33

Slide 33 text

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 }

Slide 34

Slide 34 text

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 }

Slide 35

Slide 35 text

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 }

Slide 36

Slide 36 text

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 }

Slide 37

Slide 37 text

Object.freeze const employee = Object.freeze({ department: 'Eng', profile: { name: 'mark', age: 29 } }); employee.profile.age = 27; // {...{ name: 'mark', age: 27 } }

Slide 38

Slide 38 text

Object.freeze const employee = Object.freeze({ department: 'Eng', profile: { name: 'mark', age: 29 } }); employee.profile.age = 27; // {...{ name: 'mark', age: 27 } }

Slide 39

Slide 39 text

Object.freeze const employee = Object.freeze({ department: 'Eng', profile: { name: 'mark', age: 29 } }); employee.profile.age = 27; // {...{ name: 'mark', age: 27 } }

Slide 40

Slide 40 text

deepFreeze const employee = deepFreeze({ department: 'Eng', profile: { name: 'mark', age: 29 } }); employee.profile.age = 27; // {...{ name: 'mark', age: 29 } }

Slide 41

Slide 41 text

Immutability The Benefits

Slide 42

Slide 42 text

Immutability The Reality

Slide 43

Slide 43 text

Currying Island Building Block #3

Slide 44

Slide 44 text

Currying const add = curry((x, y) => { return x + y; }); const succ = add(1); succ(1); // 2

Slide 45

Slide 45 text

Currying const add = curry((x, y) => { return x + y; }); const succ = add(1); succ(1); // 2

Slide 46

Slide 46 text

Currying const add = curry((x, y) => { return x + y; }); const succ = add(1); succ(1); // 2

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Currying const devs = [ { firstName: 'mark' }, { firstName: 'sally' } ]; const getFirstNames = map(prop('firstName')); const firstNames = getFirstNames(devs);

Slide 51

Slide 51 text

Currying const devs = [ { firstName: 'mark' }, { firstName: 'sally' } ]; const getFirstNames = map(prop('firstName')); const firstNames = getFirstNames(devs);

Slide 52

Slide 52 text

Currying const devs = [ { firstName: 'mark' }, { firstName: 'sally' } ]; const getFirstNames = map(prop('firstName')); const firstNames = getFirstNames(devs);

Slide 53

Slide 53 text

Currying const devs = [ { firstName: 'mark' }, { firstName: 'sally' } ]; const getFirstNames = map(prop('firstName')); const firstNames = getFirstNames(devs);

Slide 54

Slide 54 text

Currying The Benefits

Slide 55

Slide 55 text

Currying The Reality

Slide 56

Slide 56 text

Composition Island Building Block #4

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

Composition const getIds = map(prop('id')); const getFilmIdsFromResponse = compose(getIds, prop('films'), JSON.parse); getFilmIdsFromResponse('{ "films": [...], "actors": [...] }');

Slide 69

Slide 69 text

Composition const getIds = map(prop('id')); const getFilmIdsFromResponse = compose(getIds, prop('films'), JSON.parse); getFilmIdsFromResponse('{ "films": [...], "actors": [...] }');

Slide 70

Slide 70 text

Composition const getIds = map(prop('id')); const getFilmIdsFromResponse = compose(getIds, prop('films'), JSON.parse); getFilmIdsFromResponse('{ "films": [...], "actors": [...] }');

Slide 71

Slide 71 text

Composition const getIds = map(prop('id')); const getFilmIdsFromResponse = compose(getIds, prop('films'), JSON.parse); getFilmIdsFromResponse('{ "films": [...], "actors": [...] }');

Slide 72

Slide 72 text

Composition const getIds = map(prop('id')); const getFilmIdsFromResponse = compose(getIds, prop('films'), JSON.parse); getFilmIdsFromResponse('{ "films": [...], "actors": [...] }');

Slide 73

Slide 73 text

Composition The Benefits

Slide 74

Slide 74 text

Composition The Reality

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

Thank you. @mark_ jones