Introduction to Functional Programming with JavaScript

Transcript

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!