The document introduces functional programming with JavaScript. It discusses that functional programming uses functions as the basic unit of abstraction. The document outlines key concepts of functional programming like anonymous functions, first-class functions, lexical closure, and higher-order functions. It also covers common functional patterns in Underscore.js like chaining, mapping, filtering and reducing operations. The document provides examples of functional programming concepts and recommends resources to learn more about functional JavaScript.

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?