Elements of Functional Programming in JS

Elements of Functional Programming in JS

Lightning talk from Meet.js Wrocław.

306b63b79c78a1b67e1789790ad2db86?s=128

Adam Stankiewicz

May 27, 2014
Tweet

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