Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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 ?

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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' ]

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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”.

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

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 ]

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

I M M U TA B L E

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Filter

Slide 29

Slide 29 text

Map

Slide 30

Slide 30 text

Map

Slide 31

Slide 31 text

Reduce

Slide 32

Slide 32 text

M A P

Slide 33

Slide 33 text

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' ]

Slide 34

Slide 34 text

R E D U C E

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

C U R RY

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Codeminer42 [email protected] We’re hiring!