Elements of Functional Programming in JS

Lightning talk from Meet.js Wrocław.

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