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

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