• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Javascript funcional
 

Javascript funcional

on

  • 1,765 views

 

Statistics

Views

Total Views
1,765
Views on SlideShare
1,764
Embed Views
1

Actions

Likes
1
Downloads
17
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Javascript funcional Javascript funcional Presentation Transcript

  • Programación funcional con Javascript Leo Soto M. Lecture & Beer 2010, Continuum.
  • ¿Programación funcional?
  • Scheme? ML? F#? Haskell?
  • Dos principios
  • Principio 1: Olvida las variables. Existen valores y ya.
  • Principio 1: Olvida las variables. Existen valores y ya. ¡Como en matemáticas!
  • variables == bugs
  • x = x + 1
  • x = x + 1 // -x
  • x = x + 1 // -x x - x = x - x + 1
  • x = x + 1 // -x x - x = x - x + 1 0 = 1
  • x = x + 1 // -x x - x = x - x + 1 0 = 1 WTF
  • ¡Pero esta charla no trata sobre ese principio!
  • > var foo = “estamos jodidos”
  • Principio 1I: Las funciones son valores
  • Principio 1I: Las funciones son valores primitivos
  • > var miVariable = 1
  • > var miVariable = 1 > var otraVariable = miVariable
  • > var miVariable = 1 > var otraVariable = miVariable > typeof(miVariable) number
  • > function miFuncion() { return 1 } > typeof(miFuncion) function
  • > function miFuncion() { return 1 } > typeof(miFuncion) function > var otraFuncion = miFuncion; > typeof(otraFuncion) function
  • > function miFuncion() { return 1 } > typeof(miFuncion) function > var otraFuncion = miFuncion; > typeof(otraFuncion) function > typeof(otraFuncion()) number
  • Sintaxis equivalente:
  • > function f(x, y) { ... } > var f = function(x, y) { ... }
  • Higher order functions: Funciones que reciben funciones
  • function time(f) { start = new Date().getTime(); f() end = new Date().getTime(); print(“Milliseconds: ” + (start - end)); }
  • time(function() { var x = 1; for (var i = 2; i < 1000; i++) { x = x * i; } })
  • Higher order functions: Funciones que retornan funciones
  • $(“#edad”).blur( function() { validarRango(this, 18, 65); } );
  • $(“#edad”).blur( validadorRango(18, 65) );
  • function validadorRango(a, b) { return function() { var v = $(this).val(); if (v < a || v > b) { alert(“Fuera de rango”); } } }
  • ¡Closures!
  • function validadorRango(a, b) { return function() { var v = $(this).val(); if (v < a || v > b) { alert(“Fuera de rango”); } } }
  • function validadorRango(a, b) { return function() { var v = $(this).val(); if (v < a || v > b) { alert(“Fuera de rango”); } } } ¡No se ejecuta inmediatamente!
  • 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”!
  • Es como escribir macros, o plantillas
  • function validadorRango(a, b) { return function() { var v = $(this).val(); if (v < a || v > b) { alert(“Fuera de rango”); } } }
  • Primitivas funcionales: map, filter, reduce, any, all, partial
  • map
  • > function double(x) { return x * x } > map([1, 2, 3], double) [2, 4, 6]
  • function map(array, f) { var r = []; for (var i in array) { r.push(f(array[i]); } return r; }
  • reduce
  • > 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
  • function reduce(array, inicial, f) { var r = inicial for (var i in array) { r = f(r, array[i]); } return r; }
  • filter
  • > function par(x) {return x % 2 == 0} > filter([1,2,3,4,5], par) [2, 4]
  • function filter(array, f) { var r = []; for (var i in array) { if (f(array[i])) { r.push(array[i]); } } return r; }
  • any
  • > function par(x) {return x % 2 == 0} > any([1,2,3,4,5], par) true > any([1,3,5], par) false
  • function any(array, f) { for (var i in array) { if (f(array[i])) { return true; } } return false; }
  • all
  • > function par(x) {return x % 2 == 0} > all([1,2,3,4,5], par) false > all([2,4,6], par) true
  • function all(array, f) { for (var i in array) { if (!f(array[i])) { return false; } } return true; }
  • function all(array, f) { return !any(array, function(x) { return !f(x) } }
  • partial
  • > function mul(x, y) { return x * y } > var double = partial(mul, 2) > double(10) 20
  • function partial(f) { var fixedArgs = arguments.splice( 1, arguments.length - 1); return function() { return f.apply( this, fixedArgs.concat(arguments) ); }; }
  • Ejemplos
  • supers = filter(users, function(u) { return u.superuser; } names = map(supers, function(u) { return u.fullName; });
  • function getprop(x) { return function(o) { return o[x]; } }
  • supers = filter(users, getprop(“superuser”)) names = map(supers, getprop(“fullName”))
  • filter(leagues, function(league) { return any(league.users, getprop(“unapproved”)); });
  • reduce( map(users, getprop(“age”)), -1, Math.max )
  • 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...
  • 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); }
  • function first(n, array) { var r = []; for (var i = 0; i < Math.min(array.length, n); i++) { r.push(array[i]); } return r; }
  • var phones = [] for (var i in users) { phones.push( first(2, users.phones) ); }
  • function compose(f, g) { return function(x) { return f(g(x)); } }
  • map(users, compose(partial(first, 2), getprop(“phones”)))
  • map(users, function(u) { return first(2, u.phones); });
  • Implementaciones
  • Javascript 1.6 (Mozilla) array.map, array.filter array.reduce* array.some array.every *Introducido en Javascript 1.8
  • JQuery $.map, $(“.foo”).map $(“.foo”).filter
  • 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
  • ¡Eso!
  • ¿Preguntas?