A talk about the principles of functional programming and how to start using it on JavaScript.

1. I N T R O D U C T I O N T O F U N C T I O N A L
P R O G R A M M I N G W I T H J AVA S C R I P T

3. W H O A M I ?
Carolina Pascale Campos
Software Developer at Codeminer42
Computer Scientist student at UFSCar

4. F U N C T I O N A L
P R O G R A M M I N G H I S T O RY

5. W H AT I S F U N C T I O N A L
P R O G R A M M I N G ?

7. F U N C T I O N S
F I R S T- C L A S S C I T I Z E N S

8. Functions
1 const characterName = (name) => {
2 return console.log(name);
3 };
4
5 characterName('Batman'); //Batman

9. Objects
{
name: 'Alfred',
occupation: 'Butler',
villain: false,
age: 70
}

10. Input Array
const characters = [
{ name: 'Alfred', …},
{ name: 'Batman', …},
{ name: 'Harley Quinn’, …},
{ name: 'Joker', …}
];

11. H I G H E R - O R D E R
F U N C T I O N S

12. Higher-order Functions
1 const villain = (character) => {
2 return character.villain;
3 };
4
5 const name = (character) => {
6 return character.name;
7 };
8
9 const villainNames =
10 characters
11 .filter(villain)
12 .map(name);
13
14 console.log(villainNames); // [ 'Harley
Quinn', 'Joker' ]

13. P U R E F U N C T I O N S
S TAT E L E S S

14. Impure Function
1 let batmanAge = 30;
2
3 function incrementAge() {
4 return batmanAge++;
5 }
6
7 incrementAge(); //31
8 incrementAge(); //32

15. Pure Function
1 let batmanAge = 30;
2
3 function incrementAge(age) {
4 return age++;
5 }
6
7 incrementAge(batmanAge); //31
8 incrementAge(batmanAge); //31
9 console.log(batmanAge);

16. D E C L A R AT I V E
E X P L I C I T

17. Declarative programming is “the act of programming in
languages that conform to the mental model of the
developer rather than the operational model of the
machine”.

19. Imperative Programming
1 function onlyAge(characters) {
2 const age = [];
3 const size = characters.length;
4
5 for (let i = 0; i < size; i++) {
6 age.push(characters[i].age);
7 }
8
9 return age;
10 }
11
12 onlyAge(characters); //[ 70, 30, 26, 35 ]

20. Declarative Programming
1 function onlyAge(cast) {
2 return cast.map(cast => cast.age);
3 }
4
5 onlyAge(cast);

21. I M M U TA B L E

22. Mutability
1 const hero = {
2 name: 'Batman',
3 age: 30
4 };
5
6 function changeAge(hero) {
7 const newHero = hero;
8 newHero.age = 31;
9
10 return newHero;
11 }
12
13 const heroDifferentAge = changeAge(hero);
14 console.log(heroDifferentAge, hero);

24. Immutability
1 const hero = {
2 name: 'Batman',
3 age: 30
4 };
5
6 const changeAge = (hero, newAge) => {
7 return Object.assign(
8 {}, hero, { age: newAge }
9 );
10 });
11
12 const newHero = changeAge(hero, 32);

25. C L O S U R E S
E N C A P S U L AT I O N

26. Closure
1 const characterQuote = () => {
2
3 const quote = 'I am Batman';
4
5 const display = () => {
6 return console.log(`${quote}`);
7 };
8 display();
9 };
10
11 characterQuote(); // I am Batman

27. F I LT E R , M A P, R E D U C E

28. Filter

29. Map

30. Map

31. Reduce

32. M A P

33. Map
1 const occupations =
2 characters.map((character) => {
3 return character.occupation;
4 });
5
6 console.log(occupations);
7 // [ 'Butler', 'CEO of Wayne Enterprises',
'Former psychiatrist', 'Vilain' ]

34. R E D U C E

35. Reduce
1 const totalAge =
2 characters.reduce((sum, character) => {
3 return sum + character.age;
4 }, 0);
5
6 console.log(totalAge); // 174

36. C U R RY

37. Curry
1 const helloBatman = (name) => {
2 return (greeting) => greeting + name;
3 };
4
5 const batman = helloBatman('batman');
6
7 batman('hello'); //hellobatman

38. PA RT I A L A P P L I C AT I O N

39. Partial Application
1 const batman = 40;
2 const joker = 29;
3 const alfred = 70;
4
5 const sumAges = (batman, joker, alfred) => {
6 return batman + joker + alfred;
7 };
8
9 const partial = (fn, ...args) => {
10 return fn.bind(null, ...args);
11 };
12
13 const partialSum = partial(sumAges, batman, joker)
14
15 console.log(partialSum(alfred)); // 139

42. Where to find me?
https://github.com/carolpc
https://twitter.com/CarolinaPascale

43. Codeminer42
sorocaba@codeminer42.com
We’re hiring!