Successfully reported this slideshow.
Your SlideShare is downloading. ×

Functional Programming in JavaScript by Luis Atencio

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
FP in JS
FP in JS
Loading in …3
×

Check these out next

1 of 64 Ad

More Related Content

Slideshows for you (20)

Advertisement

Similar to Functional Programming in JavaScript by Luis Atencio (20)

Advertisement

Recently uploaded (20)

Functional Programming in JavaScript by Luis Atencio

  1. 1. Thinking Functionally Functional Programming using JavaScript Luis Atencio Blog: http://luisatencio.net Twitter: @luijar
  2. 2. Functional Programming in JavaScript www.manning.com/atencio
  3. 3. Outline • Thinking functionally – What and why – Paradigm shift – FP vs OO • Get functional – Declarative programming – Side effects and referential transparency – Currying – Composition • Lift your functional skills – Memoization – Monads
  4. 4. What is it? “Functional programming refers to the declarative evaluation of pure functions to create immutable programs by avoiding externally observable side effects.”
  5. 5. Why? • Reduce complexity • Create code that is easier to trace, debug, and test • Modularize code • Avoid duplications • Implement changes unobtrusively • Create code that is extensible and configurable • …
  6. 6. Paradigm shift • Eliminate externally observable side effects • Control (reduce or eliminate) mutations • Write declaratively and point-free • Everything is a value (even functions) • Recursion as looping mechanism (eliminate loops) • Functions ALWAYS return values 6
  7. 7. Is JavaScript functional? JavaScript is a dynamic, object-oriented programing language whose expressive power via closures and high-order functions makes it compelling for writing in an functional style ES6 features that favor functional programming: • const keyword • Promises • Lambda expressions • Generators and Iterators
  8. 8. FP JavaScript Ecosystem JavaScript has many libraries that implement many functional programming techniques: • Ramda.js http://ramdajs.com/0.17/index.html • Lodash.js https://lodash.com/ • Underscore.js http://underscorejs.org/ • Lazy.js -> http://danieltao.com/lazy.js/ • Wu.js https://fitzgen.github.io/wu.js/ • Fn.js http://eliperelman.com/fn.js/
  9. 9. Functional Programming in JS • High-Order functions – Functions in JS can be used as parameters, assigned to variables, and returned from other functions (lead to LSP) • Closures 9 << outer scope (global) >> function makeInner(params) { << inner scope >> return function inner(params2) { << function body >> } var additionalVars; }
  10. 10. What about OO? 10
  11. 11. Battle of the Hello World! document.getElementById(’msg').innerHTML = '<h1>Hello World</h1>'; compose(addToDom(’msg'), h1, echo('Hello World')); vs
  12. 12. More functional Hello World! compose ( addToDom(’msg'), h2, repeat(3), echo('Hello World')); configurable
  13. 13. Declarative Programming • Describe WHAT a program does • Not HOW to do it SQL> SELECT p.firstname, p.birthYear FROM Person p WHERE p.birthYear > 1903 AND p.country = 'US' GROUP BY p.firstname, p.birthYear
  14. 14. Get Functional Functional Techniques
  15. 15. function addToTable(personId) { if(personId != null) { personId = studentId.replace(/^s*|-|s*$/g, ''); if(personId.length !== 9) { throw new Error('Invalid Input'); } var person = store.get(personId); if (person) { var rowInfo = `<td>${person.ssn}</td> <td>${person.firstname}</td> <td>${person.lastname}</td>`; $(`#${tableId} tr:last`).after(`<tr>${rowInfo}</tr>`); return $(`#${tableId} tr`).length - 1; } else { throw new Error(’Person Record not found!'); } } else { return 0; } } From imperative Side effects
  16. 16. … after thinking functionally…
  17. 17. To functional var addToTable = compose( appendToTable(’personTable'), populateRow, props(['ssn', 'firstname', 'lastname']), findPerson, normalize, trim); 17
  18. 18. Things to understand • The issue of side effects • Referential Transparency • Singularity principle • Liskov Substitution Principle • Currying and composition • Functors and Monads
  19. 19. Side effects • Changing a variable, property or data structure globally • Changing the original value of a function’s argument • Processing user input • Throwing an exception, unless it’s caught within the same function • Printing to the screen or logging • Querying the DOM or databases
  20. 20. Forget about stateful functions? • Date.now() • Math.random() • Array.sort() • console.log()
  21. 21. How do we deal with change? • Simply don’t change any objects…. (right) • Use const (limited) • Create Value Objects (only in certain cases) • JavaScript’s Object.freeze (shallow) • Use Lenses (more elegant option!)
  22. 22. Lenses var person = new Person('Alonzo', 'Church'); var lastnameLens = lenseProp('lastName'); view(lastnameLens, person); //-> 'Church' var newPerson = set(lastnameLens, 'Mourning', person); newPerson.lastname; //-> 'Mourning’ person.lastname; //-> 'Church' var person = { firstname:'Alonzo’, lastname: 'Church' }
  23. 23. Understanding referential transparency • Functions behave like mathematical functions var increment = (val) => val + 1; • Functions are relations that map a set of types to other types • Functions shall return the same output on same input • Functions require all parameters needed to perform its work N N N N N increment domain range
  24. 24. Equational Reasoning var input = [80, 90, 100]; divide(sum(input), size(input)); //-> 90 divide(270, 3); //-> 90 270 / 3 = 90 Input -> Program = [func1, func2, func3, ...] -> Output
  25. 25. Simple Functions • Singularity principle: functions are supposed to do perform only one task • Simple functions typically have fewer arguments (reduced arity) that complex functions • Simple functions are easy to compose and chain
  26. 26. Bye Bye Loops • Loops introduce non-linear program flow • Loops mutate data (variable counter) • They can be modeled with functions var acc = 0; for (let i = 0; i < nums.length; i++) { acc += nums[i]; } function sum(arr) { var list = _(arr); return list.isEmpty() ? 0 : return list.head() + sum(list.tail()); }
  27. 27. Lazy Function Chains • Other alternatives to loops • Use high level constructs such as map, reduce, and filter • Functional libraries implement clever techniques like – Pipelining – Method fusion var fruits = ['Apple', 'apple', 'ORANGE', 'banana', 'bAnAnA'] result = chain(fruits) .map(startCase) .uniq() .sort() .value(); //-> ['Apple', 'Banana','Orange']
  28. 28. Liskov Substitution Principle • Functions that use references to base classes must be able to use objects of derived classes without knowing it • Programming functionally with objects means separating the state from its behavior • Beneficial for building function chains and pipelines • Practically, this means avoiding the use of this
  29. 29. fullname(person ) Person get fullname() Student get school() Person Student var person = new Person('Alonzo', 'Church', '444-44-4444'); p.fullname(); //-> Alonzo Church var fullname = (person) => [person.firstname, person.lastname].join(' '); fullname(person); //-> Alonzo Church Uses the this reference to access object’s data Eliminates the use of this since object is supplied as parameter FP separates methods into high-order function that can work on instances of base type Person, which must also work with Student
  30. 30. Currying • Some functions can’t be reduced to single arguments • Used to partially evaluate a function as a sequence of steps by providing arguments one-at-a-time • Currying enables the composition of complex functions function f(a, b, c) { … } f a f(a, undefined, undefined) evaluating : returns :
  31. 31. Currying2 function f(a, b, c) { … } curry(f) :: (a,b,c) -> f(a) -> f(b) -> f(c) f(a, b, c) { return function (a) { return function (b) { return function (c) { … } } } f a f(b, c) evaluating: f a f(c)b f a resultb c returns:
  32. 32. Currying3 var name = curry2(function (last, first) { return [last, first].join(','); }); name('Curry')('Haskell'); //-> 'Curry, Haskell’ name('Curry'); //-> Function
  33. 33. Composition • Deep-link a function’s return value with another function’s arguments • Separates a program’s description from evaluation • Composition leads to point-free programs A A A B B C Cg f f o g = f(g(x)) • The resulf of composing a function is another function that can be composed further
  34. 34. Composition2 f o g = f(g) = compose :: (B -> C) -> (A -> B) -> (A -> C) var str = `A complex system that works is invariably found to have evolved from a simple system that worked `; var explode = (str) => str.split(/s+/); var count = (arr) => arr.length; var countWords = compose(count, explode); countWords(str); // -> 17
  35. 35. function addToRoster(personId) { if(personId!== null) { personId = personId.replace(/^s*|-|s*$/g, ''); if(personId.length !== 9) { throw new Error('Invalid Input'); } var person = db.find(personId); if (person !== null) { var rowInfo = `<td>${person.ssn}</td> <td>${person.firstname}</td> <td>${person.lastname}</td>`; $(`#${tableId} tr:last`).after( `<tr>${rowInfo}</tr>`); return $(`#${tableId} tr`).length – 1; } else { throw new Error(’Person Record not found!'); } } else { return 0; } } Breaking monolithic functions
  36. 36. addToTable cleanInput checkLengthSsn findPerson populateRow appendToTable ✔ ✔ ✔ Impure: can’t be tested reliably  !Decompose = Compose Become the building blocks of your program
  37. 37. Building blocks var safeFindObject = curry(function (db, id) { return Maybe.fromNullable(find(db, id)); }); var findPerson = safeFindObject(DB(’people')); var trim = (str) => str.replace(/^s*|s*$/g, ''); var normalize = (str) => str.replace(/-/g, '');
  38. 38. Building blocks2 var populateRow = function (columns) { var cell_t = _.template('<td><%= a %></td>'); var row_t = _.template('<tr><%= a %></tr>'); var obj = function (a) { return {'a': a}; }; var row = compose(row_t, obj, R.join(''), map(cell_t), map(obj)); return row(columns); }; var addToTable = curry( function (elementId, rowInfo) { $(`#${elementId} tr:last`).after(`<tr>${rowInfo}</tr>`); return $(`#${elementId} tr`).length - 1; });
  39. 39. Composed var addToTable = compose( appendToTable(’personTable'), populateRow, props(['ssn', 'firstname', 'lastname']), findPerson, normalize, trim); 39
  40. 40. Composed var addToTable = compose( appendToTable(’personTable'), populateRow, props(['ssn', 'firstname', 'lastname']), findPerson, normalize, trim); 40
  41. 41. Lift Functional Skills Functional Design Patterns
  42. 42. Memoization • Optimization technique used to avoid unnecessary invocation of a computationally expensive function • Based on the principle of referential transparency • Only applies to pure functions • Implemented using a simple caching layer
  43. 43. Memoization2 43 Function.prototype.memoized = function () { var key = JSON.stringify(arguments); this._cache = this._cache || {}; this._cache[key] = this._cache[key] || this.apply(this, arguments); return this._cache[key]; }; Function.prototype.memoize = function () { var fn = this; if (fn.length === 0 || fn.length > 1) { return fn; } return function () { return fn.memoized.apply(fn, arguments); }; };
  44. 44. var md5 = (function (str) { // algorithm details here... return digest; }).memoize(); var str = ’OO in the large, functional in the small’; md5(str); // 0.733 ms md5(str); // second time: 0.021 ms 44 Memoization3
  45. 45. md5 _cache 'Get Functional!' check cache function key value md5 Get Functional! 96d18935a41d37a54d60ce9976 75cc91 put function key value [empty] contains false memoized 96d18935a41d37a54d60ce997675cc91 run function 96d18...96d18935a41d37a5... 'Get Functional!' check cache contains true get 96d18... 96d18935a41d37a54d60ce997675cc91 First call Second call
  46. 46. Containerizing 46 var Wrapper = function (val) { this._val = val; }; // Map Wrapper.prototype.map = function (f) { return f(this._val); }; // Unit var wrap = (val) => new Wrapper(val); guarded identity map identity returns the same value Wrapper
  47. 47. Containerizing2 var wrappedValue = wrap('Get Functional'); // extract the value var value = wrappedValue.map(toUpper).map(repeat(2)).map(identity); value; //-> 'GET FUNCTIONAL GET FUNCTIONAL'
  48. 48. Functors: next level containers 48 // Map Wrapper.prototype.map = function (f) { return f(this.val); }; // Functor Wrapper.prototype.fmap = function (f) { return wrap(f(this.val)); }; • Data structure that can be mapped over • Lift values into a container so that you can apply functions onto them, place the result back into the container
  49. 49. Functors2 49 var plus = curry((a, b) => a + b); var plus3 = plus(3); var two = wrap(2); var five = two.fmap(plus3); //-> Wrapper(5) two.fmap(plus3).fmap(plus10); //-> Wrapper(15) plus3 fmap Wrapper 2 Wrapper 2 apply function Wrapper 5 wrap
  50. 50. Why do this? 50 Wrapping a potentially null value or a function that can cause the program to fail
  51. 51. Software is unpredictable 51 Exception thrown but contained within the wrapper Exception does not affect any other part of the system
  52. 52. Software must be robust 52 Function throws an exception Exception is propagated and gracefully handled Program flow
  53. 53. Monads 53 Functor + Unit = Monad …and some more
  54. 54. Monads2 54 • Backbone of functional programming • Treat data and operations algebraically • Data type used for applying a sequence of transformations on data (conveyor belt model) • Abstract data flows • Used for error handling, IO, Logging, etc
  55. 55. Error handling and Maybe 55 • Wall-off impurity • Consolidate null-check logic • Consolidated exception throwing • Support compositionally of functions • Centralize logic for providing default values
  56. 56. Maybe Monad2 56 Just object Nothing Maybe Just(value): represents a container that wraps a defined value. Nothing(): represents a container that has no value, or a failure that needs no additional information.
  57. 57. Maybe Monad3 57 class Maybe { static fromNullable(a) { return a !== null ? just(a) : nothing(); } static of(a) { return just(a); } } class Just extends Maybe { map(f) { return of(f(this.value)); } getOrElse() { return this.value; } }
  58. 58. Maybe Monad4 58 class Nothing extends Maybe { map(f) { return this; // noop } get value() { throw new TypeError(`Can't extract the value of a Nothing.`); } getOrElse(other) { return other; } }
  59. 59. Maybe Example 59 Maybe.of(3).map(plus2); //-> Maybe(5) Maybe.of(3).chain(plus2); //-> 5 Maybe.fromNullable(null).map(plus2); //-> Nothing()
  60. 60. Maybe Example2 60 function getCountry(student) { var school = student.school(); if (school !== null ) { var addr = school.address(); if (addr !== null ) { return addr.country(); } } return 'Country does not exist!'; } student; //-> Maybe<Student> var getCountry = (student) => student .map(prop('school')) .map(prop('address')) .map(prop('country')) .getOrElse('Country does not exist!');
  61. 61. Monads abstract data flow 61 cleanInputSSN SSN checkLengthSsn SSN findPerson addToTable(SSN) nullpopulateRow Left null Left appedToTable orElse errorLog skipped skipped props skipped When an error occurs, Maybe safely propagates the error through the components of your code
  62. 62. To recap…
  63. 63. function addToTable(personId) { if(personId!= null) { personId= personId (/^s*|-|s*$/g, ''); if(personId!== 9) { throw new Error('Invalid Input'); } var person= store.get(personId); if (person) { var rowInfo = `<td>${person.ssn}</td> <td>${person.firstname}</td> <td>${person.lastname}</td>`; $(`#${tableId} tr:last`).after(`<tr>${rowInfo}</tr>`); return $(`#${tableId} tr`).length - 1; } else { throw new Error(’Person not found!'); } } else { return 0; From imperative
  64. 64. To functional var addToTable = compose( appendToTable(’personTable'), populateRow, props(['ssn', 'firstname', 'lastname']), findPerson, normalize, trim); 64 • Eliminate side effects! • Reduce complexity! • Code is more testable! • Declarative and easier to read! • Reduce number of bugs!

×