Elements of Functional Programming in JS

Transcript

1. Elements of Functional Programming in JavaScript

2. What is functional programming? No generally accepted definition, but: •

   Style of building computer programs • Avoids state and mutable data • Functions as arguments and results

3. Benefits of functional programming • More concise, readable code •

   Confident refactor, better reasoning • Better concurrency? • Performance (function inlining)

4. JS has some functional elements • First class functions •

   Anonymous functions (lambdas) • ???

5. JS lacks many functional elements • Tail call optimization •

   Pattern matching • Forced immutability (type system) • No standard methods for FP (IE <=8) ◦ Array#forEach, Array#map, Array#filter, etc...

6. Libraries for FP in JavaScript • Underscore • Lo-Dash •

   Mout.js (for Node.js)

7. Short map syntax var characters = [ { 'id': 1,

   'name': 'barney', 'age': 26 }, { 'id': 2, 'name': 'fred', 'age': 30 } ]; _.map(characters, function(c) { return c['name']; }) // ['barney', 'fred'] _.map(characters, 'name') // ['barney', 'fred']

8. Short filter syntax var characters = [ { 'id': 1,

   'name': 'barney', 'age': 26 }, { 'id': 2, 'name': 'fred', 'age': 30 } ]; _.filter(characters, function(c) { return c.age == 30; }) // [{ 'id': 2, 'name': 'fred', 'age': 30 }] _.filter(characters, { age: 30 }) // [{ 'id': 2, 'name': 'fred', 'age': 30 }]

9. General pattern // function(e) { return e['foo']; } // 'foo'

   _.sortBy(characters, 'name') // function(e) { return e['foo'] == bar; } // { 'foo': bar } _.every(characters, { 'name': 'barney' })

10. GroupBy var words = ['one', 'two', 'three'] _.groupBy(words, 'length'); //

    { '3': ['one', 'two'], '5': ['three'] }

11. IndexBy var users = [ { 'id': 100, 'name': 'Adam'

    }, { 'id': 200, 'name': 'Ala' } ]; var indexedUsers = _.indexBy(users, 'id') indexedUsers[100] // { 'id': 100, 'name': 'Adam' } indexedUsers[200] // { 'id': 100, 'name': 'Ala' }

12. Find var users = [ { 'id': 100, 'name': 'Adam'

    }, { 'id': 200, 'name': 'Ala' } ]; _.find(users, { 'id': 100 }); // { 'id': 100, 'name': 'Adam' }

13. max, min var characters = [ { 'name': 'barney', 'age':

    26 }, { 'name': 'fred', 'age': 30 } ]; _.max(characters, 'age') // { 'name': 'fred', 'age': 30 } _.min(characters, 'age') // { 'name': 'barney', 'age': 26 }

14. reduce var numbers = [1, 2, 3]; _.reduce(numbers, function(sum, element)

    { return sum + element }); // 6

15. Composing functions var characters = [ { 'name': 'barney', 'age':

    26 }, { 'name': 'fred', 'age': 30 }, // ... ]; var ages = _.map(characters, 'age'); // [26, 30] _.reduce(ages, function(a, b) { return a + b }); // [56]

16. Composing functions var characters = [ { 'name': 'barney', 'age':

    26 }, { 'name': 'fred', 'age': 30 }, // ... ]; _(characters) .map('age') .reduce(function(a, b) { return a + b; });

17. Composing functions var characters = [ { 'name': 'barney', 'age':

    26 }, { 'name': 'fred', 'age': 30 }, // ... ]; _(characters) .map('age') .reduce(function(a, b) { return a + b; });

18. Other features • Set operations (difference, union, intersection) • every,

    some, reject, countBy, contains • clone, extend, defaults, merge, mapValues • delay, defer, memoize, once, throttle • now, random, uniqueId, template

19. Promises A+ • Pattern for running async code • Allows

    for return in callbacks • Safely handles exceptions in callbacks • Allows for try/catch -like behavior • Chaining of callbacks, parallel execution promise.then(onSuccess, onFailure)

20. Promises A+ $http.get('/users/1').then(function(user) { return $http.get("/users/posts"); }).then(function(post) { return render(post);

    }).catch(function(reason) { console.log(reason); });

21. Dzięki