Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Functional Programming with Jav...

Introduction to Functional Programming with JavaScript

Carolina Pascale Campos

April 19, 2017
Tweet

More Decks by Carolina Pascale Campos

Other Decks in Programming

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
  2. W H O A M I ? Carolina Pascale Campos

    Software Developer at Codeminer42 Computer Scientist student at UFSCar
  3. 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
  4. 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 ?
  5. 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
  6. Functions 1 const characterName = (name) => { 2 return

    console.log(name); 3 }; 4 5 characterName('Batman'); //Batman
  7. Input Array const characters = [ { name: 'Alfred', …},

    { name: 'Batman', …}, { name: 'Harley Quinn’, …}, { name: 'Joker', …} ];
  8. H I G H E R - O R D

    E R F U N C T I O N S
  9. 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' ]
  10. P U R E F U N C T I

    O N S S TAT E L E S S
  11. Impure Function 1 let batmanAge = 30; 2 3 function

    incrementAge() { 4 return batmanAge++; 5 } 6 7 incrementAge(); //31 8 incrementAge(); //32
  12. 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);
  13. D E C L A R AT I V E

    E X P L I C I T
  14. 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”.
  15. 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 ]
  16. 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);
  17. 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);
  18. C L O S U R E S E N

    C A P S U L AT I O N
  19. 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
  20. Map

  21. Map

  22. 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' ]
  23. Reduce 1 const totalAge = 2 characters.reduce((sum, character) => {

    3 return sum + character.age; 4 }, 0); 5 6 console.log(totalAge); // 174
  24. Curry 1 const helloBatman = (name) => { 2 return

    (greeting) => greeting + name; 3 }; 4 5 const batman = helloBatman('batman'); 6 7 batman('hello'); //hellobatman
  25. 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