1. An Introduction to
Functional Programming
With Javascript, the world’s most
popular (functional) language

2. Outline
•
•
•
•
What is functional programming?
Why should we learn it?
What features are necessary to support it?
What patterns are common?
– Underscore/Lo-Dash
• Examples
• Future topics

3. What is Functional Programming?
A programming paradigm/style where the
basic unit of abstraction is the function

4. Motivation for Learning
•
•
•
•
•
Become a better programmer
Be prepared for future technologies
Understand KVDB
Avoid defects
Write clearer code

5. FP Ciriculum
• Tuples
• Lists
• Handling SideEffects
• Closure
• Nested Functions
• First-Class
Functions
• Higher-Order
Functions
• Anonymous
Functions
• Tail Recursion
• Folding
• Partially-Applied
Functions
• Immutability
• Memoization
• Function
Composition
• Pattern Matching
• Currying
• Generics
• Lazy Evaluation
• Delimited
Continuations
• Lambda Calculus
• Higher Kinds
• Monads
• Monad
Comprehension
• State-Passing
Style

6. FP Ciriculum
• Tuples
•
• Lists
•
• Handling Side•
Effects
• Lexical Closure •
• Nested Functions •
• First-Class
•
Functions
• Higher-Order
•
Functions
•
• Anonymous/
•
Literal Functions •
Tail Recursion
Folding
Partially-Applied
Functions
Immutability
Memoization
Function
Composition
Pattern Matching
Currying
Generics
Lazy Evaluation
• Delimited
Continuations
• Lambda Calculus
• Higher Kinds
• Monads
• Monad
Comprehension
• State-Passing
Style

7. Functional Style
Imperative/OO
Functional
Tell the computer what to do
Describe what you want done
Abstraction via objects/
data structures
Abstraction via functions
Re-use via classes/inheritence
Re-use via composition
Iteration/looping
Recursion
function factorial(n) {
var result = 1;
while (n > 1) {
result *= n;
n--;
}
return result;
}
function factorial(n) {
if (n < 2) return 1;
else return
n * factorial(n - 1);
}

8. Mandatory FP Features
•
•
•
•
Anonymous functions / function literals (λ)
First-class functions
Lexical closure
Higher-order functions

9. Why Javascript?
•
•
•
•
Fully supports the functional paradigm
Javascript not well understood by users
Benefits of FP align well with JS users’ needs
Guide us down a better path

10. Anonymous Functions /
Function Literals
x = function(a) {
// ... do something with ‘a’ ...
}
// typeof x === ‘function’

11. First-Class Functions
var mathFuncs =
function(a)
function(b)
function(c)
];
[
{ return a * 2 },
{ return b * b },
{ return c + 2 }
mathFuncs[1](3); // => 9

12. Lexical Closure
var complete = false;
function doSomethingOnce() {
if (!complete) {
// ... something
complete = true;
}
}

13. Higher-Order Functions
function doTwice(action) {
action();
action();
}
doTwice(function() {
console.log('called!');
})

14. Higher-Order Functions
function multiplyBy(num) {
return function(i) {
return i * num;
}
}
var times10 = multiplyBy(10);
times10(5); // 50

15. Higher-Order Functions
function map(array, func) {
var result = [];
for (var i = 0; i < array.length; i++) {
result[i] = func(array[i]);
}
return result;
}
function multiplyBy(num) { ... }
var array = map([1,2,3], multiplyBy(10));

16. Fold/Reduce
var sum = fold(
0,
[1, 2, 3, 4],
function(value, item) {
return value + item;
}
); // sum === 10

17. Fold/Reduce
Parameters to function
Value
Item
0 (initial) 1
1
2
3
3
6
4
Returns
0+1=1
1+2=3
3+3=6
6 + 4 = 10
Remains
[2, 3, 4]
[3, 4]
[4]
[]

18. Fold/Reduce
function fold(init, array, folder) {
var result = init;
for (var i = 0; i < array.length; i++) {
var curr = array[i];
result = folder(result, curr);
}
return result;
}

19. Map as Fold
function map(array, func) {
return foldLeft([], array,
function(a, x) {
a.push(func(x));
return a;
});
}
var a = map([1,2,3], multiplyBy(10));

20. Map as Fold
Parameters to function
Value
Item
[] (initial)
1
[10]
2
[10, 20]
3
Returns
[10]
[10, 20]
[10, 20, 30]
Remains
[2, 3]
[3]
[]

21. Data Encapsulation through Closure
function makeCounter() {
var i = 0;
return function() {
i++;
return i;
}
}
var counter = makeCounter();
counter(); // 1
counter(); // 2

22. Underscore.js
“... the tie to go along with jQuery's tux,
and Backbone.js's suspenders.”
-- http://underscorejs.org

23. Underscore.js Basics
e.g.:
_.<method>(<array>, <function>)
var array = ["hello", "world"];
_.each(array, function(x) {
console.log(x);
});

24. Underscore.js Chaining
e.g.:
_.chain(<array>)
.<method1>(<function>)
.<method2>(<function>)
.value();

25. Underscore.js Chaining
_.chain([1, 2, 3, 4, 5])
.map(function(n) { return n * n })
// [1, 4, 9, 16, 25]
.filter(function(n) { return n % 2 === 0 })
// [4, 16]
.reduce(function(t, n) { return t + n }, 0)
// [20]
.value();
// 20

26. Underscore.js Chaining
_.chain([1, 2, 3, 4, 5])
.map(function(n) { return n * n })
.filter(function(n) { return n % 2 === 0 })
.reduce(function(t, n) { return t + n }, 0)
.value();

27. Next Steps
• Functional Javascript:
– http://shop.oreilly.com/product/0636920028857.do
• Literate underscore.js code:
– http://underscorejs.org/docs/underscore.html
• When you get bored with underscore:
– http://lodash.com/
• When something doesn’t make sense:
– JavaScript: The Good Parts

28. Questions?