Functional Programming in Javascript

A small introduction to functional programming, and how you can start using it in Javascript.

Transcript

1. Will you take the red pill? Functional Programming
2. WTF is functional programming?
3. WTF is functional programming (FP)? • functions everywhere! • higher order functions • takes one or more functions as an input (map, filter) • outputs a function (curry, any curried function) • map, filter, reduce, each etc… • pure functions • composition • currying • and more…
4. WHY FP? • Different way of thinking about your programs • Easy parallelization • More concise (DRY) - avoid spaghetti code • More reliable code • Easy to read (when in the FP mindset) • Easy to refactor (when in the FP mindset) • Easy to test
5. FP languages • Lisp (invented in 1958) • Haskell (named after the famous mathematician Haskell Curry) • Erlang (Ericsson Language) • Elm (works in the browser) • Scala (made popular by Twitter) • F# (Microsoft) • Javascript (has lots of FP properties, but not all)
6. Javascript and FP ✔ higher order functions ✔ lambdas ✘ statically typed ✘ immutable variables ✘ pattern matching
7. A few javascript FP libraries • Ramda • lodash-fp • scoreunder • Functional Reactive Programming (FRP): • bacon.js (functional reactive programming) • RxJS
8. Good news! • You already use a bit of functional programming • Vanilla js: Array.prototype.map, Array.prototype.filter… • JQuery: $.map, $.filter, $.each… • underscore: _.map, _.filter and many more • You’re used to work with functions, anonymous functions…
9. Imperative VS Functional
10. Imperative programming Telling the computer how to do something, and as a result what you want to happen will happen.
11. Functional programming Telling the computer what you would like to happen, and let the it figure out how to do it.
12. A few FP concepts
13. Pure functions “A pure function is one that has no side effects -- it cannot modify the state of anything -- and it is referentially transparent -- when called multiple times with the same inputs, it always gives the same outputs.”
14. //pure, for a given x, the return value will always be the same function add2(x) { return x + 2; }; Pure function example
15. //what if the “two” variable is changed somewhere else? var two = 2; function add2(x) { return x + two; }; //modifies its input, different results if called twice function pushIt(ar) { return ar.push('it') }; Impure functions example
16. Composition “Combine simple functions to build more complicated ones” (g ∘ f )(x) = g(f(x))
17. var add2 = function(x){return x + 2}; var mul3 = function(x){return x * 3}; var add2Mul3 = compose(add2, mul3); add2Mul3(1) => 9 add2Mul3(3) => 15 Composition example
18. Currying “A function that will return a new function until it receives all its arguments”
19. var fn = function(x,y,z){return [x, y, z]}; var curriedFn = curry(fn); fn('a','b','c') curriedFn('a','b','c') curriedFn('a','b')('c') curriedFn('a')('b')('c') // all these functions return ['a', 'b', 'c'] Currying example
20. var curriedFn = function(x) { return function(y) { return function(z) { return [x, y, z]; } } } Currying example
21. Let’s code our FP library! Codename: nano.js
22. nano.js • Inspired by underscore.js and ramda.js • Just a pet library, not for production! • each, map, split, invoke, curry, and, or, propEq, dot, compose, reverse, split, join, where, match, groupBy, countBy, sum • All functions are curried (the collections are the last argument contrary to underscore)
23. Let’s code! • What we will do: • create a unit testing library (unit.js) • create a library with a cool name, testing it with using unit.js • use the library IRL