1. Programación funcional
con Javascript
Leo Soto M.
Lecture & Beer 2010, Continuum.

2. ¿Programación funcional?

3. Scheme? ML? F#? Haskell?

4. Dos principios

5. Principio 1:
Olvida las variables. Existen valores y ya.

6. Principio 1:
Olvida las variables. Existen valores y ya.
¡Como en matemáticas!

7. variables == bugs

8. x = x + 1

9. x = x + 1 // -x

10. x = x + 1 // -x
x - x = x - x + 1

11. x = x + 1 // -x
x - x = x - x + 1
0 = 1

12. x = x + 1 // -x
x - x = x - x + 1
0 = 1
WTF

13. ¡Pero esta charla no trata sobre ese principio!

14. > var foo = “estamos jodidos”

15. Principio 1I:
Las funciones son valores

16. Principio 1I:
Las funciones son valores primitivos

17. > var miVariable = 1

18. > var miVariable = 1
> var otraVariable = miVariable

19. > var miVariable = 1
> var otraVariable = miVariable
> typeof(miVariable)
number

20. > function miFuncion() { return 1 }
> typeof(miFuncion)
function

21. > function miFuncion() { return 1 }
> typeof(miFuncion)
function
> var otraFuncion = miFuncion;
> typeof(otraFuncion)
function

22. > function miFuncion() { return 1 }
> typeof(miFuncion)
function
> var otraFuncion = miFuncion;
> typeof(otraFuncion)
function
> typeof(otraFuncion())
number

23. Sintaxis equivalente:

24. > function f(x, y) { ... }
> var f = function(x, y) { ... }

25. Higher order functions:
Funciones que reciben funciones

26. function time(f) {
start = new Date().getTime();
f()
end = new Date().getTime();
print(“Milliseconds: ” +
(start - end));
}

27. time(function() {
var x = 1;
for (var i = 2; i < 1000; i++) {
x = x * i;
}
})

28. Higher order functions:
Funciones que retornan funciones

29. $(“#edad”).blur(
function() {
validarRango(this, 18, 65);
}
);

30. $(“#edad”).blur(
validadorRango(18, 65)
);

31. function validadorRango(a, b) {
return function() {
var v = $(this).val();
if (v < a || v > b) {
alert(“Fuera de rango”);
}
}
}

32. ¡Closures!

33. function validadorRango(a, b) {
return function() {
var v = $(this).val();
if (v < a || v > b) {
alert(“Fuera de rango”);
}
}
}

34. function validadorRango(a, b) {
return function() {
var v = $(this).val();
if (v < a || v > b) {
alert(“Fuera de rango”);
}
}
}
¡No se ejecuta inmediatamente!

35. function validadorRango(a, b) {
return function() {
var v = $(this).val();
if (v < a || v > b) {
alert(“Fuera de rango”);
}
}
}
¡No se ejecuta inmediatamente!
¡Pero puede acceder a valores de “afuera”!

36. Es como escribir macros, o plantillas

37. function validadorRango(a, b) {
return function() {
var v = $(this).val();
if (v < a || v > b) {
alert(“Fuera de rango”);
}
}
}

38. Primitivas funcionales:
map, filter, reduce,
any, all,
partial

39. map

40. > function double(x) { return 2 * x }
> map([1, 2, 3], double)
[2, 4, 6]

41. function map(array, f) {
var r = [];
for (var i in array) {
r.push(f(array[i]);
}
return r;
}

42. reduce

43. > function sum(x, y) { return x + y }
> function mul(x, y) { return x * y }
> reduce([1, 2, 3, 4], 0, sum)
10
> reduce([1, 2, 3, 4], 1, mul)
24

44. function reduce(array, inicial, f) {
var r = inicial
for (var i in array) {
r = f(r, array[i]);
}
return r;
}

45. filter

46. > function par(x) {return x % 2 == 0}
> filter([1,2,3,4,5], par)
[2, 4]

47. function filter(array, f) {
var r = [];
for (var i in array) {
if (f(array[i])) {
r.push(array[i]);
}
}
return r;
}

48. any

49. > function par(x) {return x % 2 == 0}
> any([1,2,3,4,5], par)
true
> any([1,3,5], par)
false

50. function any(array, f) {
for (var i in array) {
if (f(array[i])) {
return true;
}
}
return false;
}

51. all

52. > function par(x) {return x % 2 == 0}
> all([1,2,3,4,5], par)
false
> all([2,4,6], par)
true

53. function all(array, f) {
for (var i in array) {
if (!f(array[i])) {
return false;
}
}
return true;
}

54. function all(array, f) {
return !any(array, function(x) {
return !f(x)
}
}

55. partial

56. > function mul(x, y) { return x * y }
> var double = partial(mul, 2)
> double(10)
20

57. function partial(f) {
var fixedArgs = arguments.splice(
1, arguments.length - 1);
return function() {
return f.apply(
this,
fixedArgs.concat(arguments)
);
};
}

58. Ejemplos

59. supers = filter(users, function(u) {
return u.superuser;
}
names = map(supers, function(u) {
return u.fullName;
});

60. function getprop(x) {
return function(o) {
return o[x];
}
}

61. supers = filter(users,
getprop(“superuser”))
names = map(supers,
getprop(“fullName”))

62. filter(leagues, function(league) {
return any(league.users,
getprop(“unapproved”));
});

63. reduce(
map(users, getprop(“age”)),
-1,
Math.max
)

64. Familiar feeling?
map(usuarios, f) =~ SELECT f(usuario)
filter(usuarios, f) =~ WHERE f(usuario)
any(usuarios, f) =~ SOME(f(usuario))
all(usuarios, f) =~ ALL(f(usuario))
reduce(usuarios, ...) =~ MAX/MIN/AVG...

65. var phones = []
for (var i in users) {
var user = users[i];
var userPhones = [];
if (user.phones[0]) {
userPhones.push(user.phones[0]);
}
if (user.phones[1]) {
userPhones.push(user.phones[1]);
}
phones.push(userPhones);
}

66. function first(n, array) {
var r = [];
for (var i = 0;
i < Math.min(array.length, n);
i++) {
r.push(array[i]);
}
return r;
}

67. var phones = []
for (var i in users) {
phones.push(
first(2, users.phones)
);
}

68. function compose(f, g) {
return function(x) {
return f(g(x));
}
}

69. map(users,
compose(partial(first, 2),
getprop(“phones”)))

70. map(users, function(u) {
return first(2, u.phones);
});

71. Implementaciones

72. Javascript 1.6 (Mozilla)
array.map,
array.filter
array.reduce*
array.some
array.every
*Introducido en Javascript 1.8

73. JQuery
$.map,
$(“.foo”).map
$(“.foo”).filter

74. Underscore
http://documentcloud.github.com/underscore/
_.map, _.reduce, _.detect, _.all, _.any,
_.sortBy, ...
_.first, _.rest, _.compact, _.flatten,
_.uniq, _.zip, _.intersect, ...
_.invoke, _.pluck, _.tap, ...
_.keys, _.values, ...
_.compose, _.bind, _.memoize

75. ¡Eso!

76. ¿Preguntas?