by Debjit Biswas

1. <web/F><web/F>
Functional
Programming
with JavaScript

2. <web/F><web/F>
Agenda
1. What
a. are functions?
b. is functional programming?
2. How?
3. Why?
4. Cool Stuff

3. <web/F><web/F>
Ramda lodash-fp

4. <web/F><web/F>
Functions
A relation f from a set A to a set B is
said to be a function if every element
of set A has one and only one image
in set B.

5. <web/F><web/F>
Functional Programming is about using
functions as units of abstraction and
composing them to build a system.

6. <web/F><web/F>
Functional language or a language
facilitating functional programming is one
which supports first-class functions.

7. <web/F><web/F>
R.map(function (n) {
return addOne(n);
}, list);

8. <web/F><web/F>
R.map(function (n) {
return addOne(n);
}, list);
R.map(addOne, list);

9. <web/F><web/F>
$http.get('/list', function(res) {
callback(res);
});

10. <web/F><web/F>
$http.get('/list', function(res) {
callback(res);
});
$http.get('/list', callback);

11. <web/F><web/F>
Example: Searching a list
Declarative
var nameEquals = R.compose(
R.match(new RegExp(value, 'i')), R.prop('name')
);
var filtered = R.filter(nameEquals, list);
Imperative
var filtered = [], i = 0, pattern = new RegExp(value, 'i');
for (i = 0; i < list.length; i += 1) {
if (list[i].name.match(pattern)) filtered.push(list[i]);
}

12. <web/F><web/F>
Higher-order functions
are first-class functions, that can take as
argument or return a function.

13. <web/F><web/F>
Map, Reduce and Filter
are the three most important functions to
work with collections.
Do not use any of these as a loop.

14. <web/F><web/F>
If the input and output collections are always
going to be same length, you probably need map.
var double = (x) => x * 2;
R.map(double, [1, 2, 3]); //=> [2, 4, 6]

15. <web/F><web/F>
If the output collection can have lesser or equal
number of items, you probably need filter.
var isEven = (n) => n % 2 === 0;
R.filter(isEven, [1, 2, 3, 4]); //=> [2, 4]

16. <web/F><web/F>
You probably need reduce when the input is a
collection and the output is a single value.
Reduce is also known as fold.
R.reduce(R.add, 0, [1, 2, 3]); //=> 6

17. <web/F><web/F>
Map, Reduce and Filter are low-level. There
are many others provided by libraries, which
can be a better fit.

18. <web/F><web/F>
Example: Given an array of objects, get only the
‘name’ property values in an array.
R.map(R.prop('a'), [{a: 1}, {a: 2}]);
// pluck :: k -> [{k: v}] -> v
R.pluck('a', [{a: 1}, {a: 2}]); //=> [1, 2]

19. <web/F><web/F>
1. Functions should be simple.
2. They should do and focus on only one thing.
3. Try writing small functions.
4. Do not mix concerns
Ref: Simple Made Easy by Rich Hickey

20. <web/F><web/F>
Create lot of functions
Don’t be afraid to create many small functions.
Abstract whenever two functions seems to do similar
things or some part of them are similar.

21. <web/F><web/F>
Open/closed principle
states "software entities (classes, modules,
functions, etc.) should be open for extension,
but closed for modification"
Ref: https://en.wikipedia.org/wiki/Open/closed_principle

22. <web/F><web/F>
Function Composition
var x' = f(x) ;
var x'' = g(x'); } g(f(x));
var h = R.compose(g, f); h(x);

23. <web/F><web/F>
Example
// notDone :: Object -> Boolean
var notDone = function (todo) {
return !todo.done;
}
var notDone =
R.compose(R.not, R.prop('done'));

24. <web/F><web/F>
// wordCount :: String -> Number
var wordCount = function (s) {
return s.split(' ').length;
}
var wordCount = R.compose(
R.length, R.split(' ')
);
wordCount('How many words?') //=> 3

25. <web/F><web/F>
Pass and return functions
If some function accepts many parameters to
perform some part of its operations try to
replace with function instead.

26. <web/F><web/F>
Example: Pass function
function createBuiltFile (packageName, minifier, extension, files) {
...
var name = packageName + '.' + md5(content) + '.' + extension;
...
}
function createBuiltFile (minifier, nameGenerator, files) {
...
var name = nameGenerator(content);
...
}

27. <web/F><web/F>
Pass functions instead of values
when you want to make a function more
generic.

28. <web/F><web/F>
Work with simple data structures such
as Arrays and Objects

29. <web/F><web/F>
Curried Functions
A function that returns a new function until it
receives all its arguments.
Originated by
Moses Schönfinkel
Developed by
Haskell Curry

30. <web/F><web/F>
// add :: Number -> Number -> Number
var add = R.curry(function (x, y) {
return x + y;
});
// addOne :: Number -> Number
var addOne = add(1); addOne(5); //=> 6
A curried function can be easily specialized for
your own needs.

31. <web/F><web/F>
fetchFromServer()
.then(JSON.parse)
.then(function(data){ return data.posts })
.then(function(posts){
return posts.map(function(post){
return post.title;
});
})
fetchFromServer()
.then(JSON.parse)
.then(R.prop('posts'))
.then(R.map(R.prop('title')))
Read: Why Curry Helps?

32. <web/F><web/F>
Partial Application
// propEq :: k -> v -> {k: v} -> Boolean
var idEqZero = R.propEq('id', 0);
in this example we say that R.propEq has been
partially applied.

33. <web/F><web/F>
● Helps you build new functions from old
one.
● Think of it as configuring a function for
your needs.
● It also makes composition easier.

34. <web/F><web/F>
● Declarative
● Easy to reason about
● Easy to test
Why Functional Programming Matters (by John Hughes)

35. <web/F><web/F>
Cool Stuff

36. <web/F><web/F>
Functional null checking
if (x !== null && x !== undefined) {
f(x);
}

37. <web/F><web/F>
Functional null checking
if (x !== null && x !== undefined) {
f(x);
}
Maybe(x).map(f); //=> Maybe(f(x))

38. <web/F><web/F>
Functional null checking
if (x !== null && x !== undefined) {
f(x);
}
R.map(f, Maybe(x)); //=> Maybe(f(x))

39. <web/F><web/F>
Functional null checking
if (x !== null && x !== undefined) {
f(x);
}
R.map(f, Maybe(x)); //=> Maybe(f(x))
var g = R.compose(R.map(f), Maybe);
g(x); //=> Maybe(f(x)) only if x != null

40. <web/F><web/F>
Functional null checking
if (x !== null && x !== undefined) {
f(x);
}
R.map(f, Maybe(x)); //=> Maybe(f(x))

41. <web/F><web/F>
Functional null checking
if (x !== null && x !== undefined) {
f(x);
}
R.map(addOne, Maybe(2)); //=> Maybe(3)
R.map(addOne, [2]) //=> [3]

42. <web/F><web/F>
Both Maybe and Array are Functors.

43. <web/F><web/F>
Functor is something that implements map.
Some Functors are Array, Maybe, Either,
Future and many others.

44. <web/F><web/F>
Fantasy Land Specification
https://github.com/fantasyland/fantasy-land

45. <web/F><web/F>
bilby.js Folktale
ramda-fantasy

46. <web/F><web/F>
● Start writing more functions
● Preferably pure and simple functions
● Glue your functions using higher-order
functions
● Use a functional library
● Discover!

47. <web/F><web/F>
References
Books
● http://functionaljavascript.com/
● https://leanpub.com/javascriptallongesix/
● https://github.com/DrBoolean/mostly-adequate-guide
Talks
● https://www.youtube.com/watch?v=AvgwKjTPMmM
● http://scott.sauyet.com/Javascript/Talk/2014/01/FuncProgTalk/
● https://www.youtube.com/watch?v=m3svKOdZijA

48. <web/F><web/F>
Thank You!
Debjit Biswas
@debjitbis08
https://in.linkedin.com/in/debjitbis08