Fun.ctional programming

Functional programming with JS basics talk I did for some organization

the UI code is in https://github.com/Schniz/functional-programming-talk-examples

Transcript

1. Fun.
2. We’ve all heard of it
3. But only some of us really have it at work
4. Gal Schlezinger schniz
5. Functional Programming
6. Functional programming (in javascript)
7. ASSEMBLY MOV AX, BX DEC AX MOV CX, AX LOOP
8. C++ / C# / JavaScript for (int i; i < length; i++) { // do something }
9. A better looking assembly
10. Here comes the fun.
11. First Class Functions Purity Currying Composing UI
12. function hi(name) { console.log(`Hello ${name}`); } function greeting(name) { return hi(name); } hi('Gal'); // => "Hello Gal" greeting('Gal'); // => "Hello Gal"
13. function hi(name) { console.log(`Hello ${name}`); } var greeting = hi; hi('Gal'); // => "Hello Gal" greeting('Gal'); // => "Hello Gal"
14. function hi(name) { return console.log(`Hello ${name}`); }; let hi = function(name) { return console.log(`Hello ${name}`); }; let hi = name => console.log(`Hello ${name}`); // Interchangeable! ES6
15. First Class Functions Purity Currying Composing UI
16. “A pure function is a function that, given the same input, will always return the same output and does not have any observable side effect.” From “Prof. Frisby’s Mostly Adequate Guide to Functional Programming.”
17. Immutable is better than Mutable
18. PREDICTABLE
19. let arr = [1, 2, 3]; // Mutates the data for (var i = 0; i < arr.length; i++) { arr[i] = arr[i] * 2; // <- Mutation } // Mutates the data too... arr.forEach((n, i) => { arr[i] = arr[i] * 2; // <- Mutation }); // Immutable let doubled = arr.map(n => n * 2);
20. var arr = [1, 2, 3]; neverChangesData(arr); // yay! i know that `arr` is still itself! maybeChangesData(arr); // what happened? whyyyy
21. MEMOIZATION 1 let cachedFunc = memoize(someLongRunningFunction); for free
22. First Class Functions Purity Currying Composing UI
23. var add = adder => ( addee => ( adder + addee ) ); var addOne = add(1); // (num) => 1 + num addOne(2); // => 3
24. a function that returns a function
25. 1 function hi(name) { 2 console.log('Hello', name); 3 } 4 5 let greeting = hi; 6 7 hi('Gal'); // => "Hello Gal" 8 greeting('Gal'); // => "Hello Gal"
26. 1 let hi = console.log; 2 hi('hello'); ?
27. 1 let hi = console.log; 2 hi('hello'); // => Error
28. THE WEIRD CASE OF context OR: what is this??
29. 1 // Bind to the rescue! 2 // func.bind(context, arg1, arg2, ...) 3 let hi = console.log.bind(console); 4 let greeting = hi; 5 6 hi('Gal'); // => "Gal" 7 greeting('Gal'); // => "Gal" CURRYING
30. OOP is implementation detail; we care about functions.
31. First Class Functions Purity Currying Composing Containing UI
32. 1 // Weird 2 let shout = text => text.toUpperCase() + "!";
33. 1 let exclaim = text => text + "!"; 2 let upper = text => text.toUpperCase(); 3 4 let shout = text => exclaim(upper(text)); 5 // Unbearable
34. A B C f⚬g g(x) x f(g(x)) g f
35. 1 let compose = (f, g) => x => f(g(x));
36. Function composition Create a new “piped” function 1 let funcA = compose(a, b, c, d); 2 let valA = funcA('something'); 3 // is the same as 4 let funcB = value => a(b(c(d(value)))); 5 let valB = funcB('something'); 6 7 valA === valB; // if the two are pure
37. 1 let exclaim = text => text + "!"; 2 let upper = text => text.toUpperCase(); 3 4 // Unbearable 5 let shout = text => exclaim(upper(text)); 6 7 // Better! 8 let shout = compose(upper, exclaim);
38. 1 // arr.reverse() changes the array :( 2 let reverse = array => array.reduce((acc, x) => ( 3 [x].concat(acc) 4 ); 5 let head = array => array[0]; 6 let last = compose(head, reverse);
39. debugging is easy
40. 1 let exclaim = text => text + "!"; 2 let upper = text => text.toUpperCase(); 3 let trace = tag => ( 4 (obj) => { 5 console.log(tag, obj); 6 return obj; 7 } 8 ); 9 let shout = compose( 10 upper, 11 trace(‘exclaimed:'), 12 exclaim, 13 ); 14 var hello = important("hello"); // => HELLO! 15 // will log ‘exclaimed: hello!'
41. 1 // Loading a page is just a composition 2 // of all the functions below 3 var loadPage = compose( 4 refreshTable, 5 generateRows, 6 ProductFiltering.applyCurrency, 7 memoize(fetchData), 8 ProductFiltering.getFilter 9 ); 10 $(loadPage); 11 ProductFiltering.onChange(loadPage);
42. First Class Functions Purity Currying Composing UI
43. UI = Markup(State)
44. example….
45. Declarative! - Dependencies in JS using Webpack - Micro Services using Message Bus - More of “I need X” instead of “give me X”
46. compose( answer, understand )(‘question?’)