Taller de Programación Funcional en JavaScript

Javier Vélez Reyes
@javiervelezreye
Javier.velez.reyes@gmail.com
Taller de Programación
Funcional en JavaScript
Enero 2016

@javiervelezreye 2
Presentación
Taller de Programación Funcional en JavaScript
Licenciado por la UPM desde el año 2001 y doctor en informá;ca por
la UNED desde el año 2009, Javier conjuga sus labores como profesor
e inves;gador con la consultoría y la formación técnica para
empresa. Su línea de trabajo actual se centra en la innovación y
desarrollo de tecnologías para la Web. Además realiza ac;vidades de
evangelización y divulgación en diversas comunidades IT y es
coordinador de varios grupos de ámbito local como NodeJS Madrid o
Madrid JS. Forma parte del programa Polymer Polytechnic Speaker y
es mentor del capítulo de Madrid de Node School.
¿Quién Soy?

javier.velez.reyes@gmail.com
@javiervelezreye
linkedin.com/in/javiervelezreyes
gplus.to/javiervelezreyes
jvelez77
javiervelezreyes
youtube.com/user/javiervelezreyes

Javier Vélez Reyes
@javiervelezreye
Javier.veler.reyes@gmail.com
1 Introducción
§  Introducción
§  Obje;vos de la Programación Funcional
§  Principios de Diseño Funcional
Introducción
Taller de Programación Funcional en JS

@javiervelezreye 4
Introducción
La programación funcional es un viejo conocido dentro del mundo del desarrollo. No obstante,
en los úl;mos años está cogiendo tracción debido, entre otros factores, a la emergencia de
arquitecturas reac;vas, al uso de esquemas funcionales en el marco de Big Data y al creciente
soporte que se le da desde diversas plataformas vigentes de desarrollo. JavaScript ha sido
siempre un lenguaje con fuerte tendencia al diseño funcional. En este texto revisaremos sus
obje;vos y principios y discu;remos los mecanismos, técnicas y patrones empleados
actualmente para construir arquitecturas funcionales haciendo uso de JavaScript.
I. Introducción
Programación
Funcional
Programación
Orientada a Objetos
Arquitecturas
centradas en la
transformación
Variantes
funcionales
Transparencia
Referencial
Inmutabilidad
ComposiEvidad
Puntos de Extensión
Polimórfica Arquitecturas
centradas en la
abstracciones
SusEtuEvidad
Liskoviana
Encapsulación de
estado
Arquitecturas
dirigidas por flujos de
control
Arquitecturas
dirigidas por flujos de
datos

@javiervelezreye 5
Introducción
A. Especificación DeclaraPva
II. ObjePvos de la Programación Funcional
La programación funcional persigue diseñar especificaciones de comportamiento abstracto
que se centren en la descripción de las caracterís;cas de un problema más que en una forma
par;cular de resolverlo. De acuerdo a esto, se en;ende que la responsabilidad de encontrar
una solución para el problema descansa no tanto en manos del programador sino en la
arquitectura funcional subyacente que toma en cuenta dicha especificación.
Qué
Cómo
function total (type) {
return basket.filter (function (e) {
return e.type === type;
}).reduce (function (ac, e) {
return ac + e.amount * e.price;
}, 0);
}
function total (type) {
var result = 0;
for (var idx = 0; idx < basket.length; idx++) {
var item = basket[idx];
if (basket[idx].type === type)
result += item.amount * item.price;
}
return result;
}
var basket = [
{ product: 'oranges', type:'food', amount: 2, price:15 },
{ product: 'bleach' , type:'home', amount: 2, price:15 },
{ product: 'pears' , type:'food', amount: 3, price:45 },
{ product: 'apples' , type:'food', amount: 3, price:25 },
{ product: 'gloves' , type:'home', amount: 1, price:10 }
];
La descripción fluida del esElo
funcional permite entender fácil-
mente la especificación
Aunque operaEvamente es equivalente,
el esElo imperaEvo es más confuso y
resulta más diRcil de entender
Objetos
Funcional

@javiervelezreye 6
Introducción
B. Abstracción Funcional
La programación funcional persigue alcanzar una especiﬁcación de alto nivel que capture
esquemas algorítmicos de aplicación transversal. Como veremos a con;nuación, así se
fomenta la reu;lización y la adaptación idiomá;ca. Esto se consigue con arquitecturas
centradas en la variabilidad funcional y contrasta ortogonalmente con la orientación a objetos.
var vehicles = [new Car(), new Truck(), ...];
var garage = function (vehicles) {
for (v in vehicles)
vehicles[v].test();
};
garage(vehicles);
var phases = [
function body (v) {...},
function paint (v) {...}
];
var test = function (phases) {
function (vehicle) {
return phases.reduce(function (ac, fn) {
return fn(ac);
}, vehicle);
}
};
Abstracción Funcional
Abstracción de Ppos
Objetos
Funcional
V1 V2 V3
Car Truck
Bike
vehicles
body
paint
v
En FP la función es la unidad de abstracción ya que
permite deﬁnir esquemas algorítmicos que
dependen de funciones pasadas como parámetros
En OOP los algoritmos
se distribuyen entre
objetos con implemen-
taciones variantes

@javiervelezreye 7
Introducción
C. ReuPlización Funcional
Como consecuencia de la capacidad de abstracción en la especiﬁcación declara;va, la
programación funcional alcanza cotas elevadas en la reu;lización de funciones. Este nivel de
reu;lización algorítmica no se consigue en otros paradigmas como en la orientación a objetos.
El esquema algorítmico se reuEliza
sobre disEntas estructuras de datos y
con disEntas aplicaciones funcionales
var users = [
{ name: 'jvelez', sex: 'M', age: 35 },
{ name: 'eperez', sex: 'F', age: 15 },
{ name: 'jlopez', sex: 'M', age: 26 }
];
var adult = function (u) { return u.age > 18; };
var name = function (ac, u) {
ac.push(u.name);
return ac;
};
get(users)(adult, name, []);
var get = function (collection) {
return function (filter, reducer, base) {
return collection
.filter(filter)
.reduce(reducer, base);
};
};
var basket = [
{ product: 'oranges', type: 'F', price:15 },
{ product: 'bleach' , type: 'H', price:15 },
{ product: 'pears' , type: 'F', price:45 },
];
var food = function (p) { return p.type === 'F'; };
var total = function (ac, p) {
return ac + p.price;
};
get(basket)(food, total, 0);

@javiervelezreye 8
Introducción
D. Adaptación Funcional
Una de las virtudes de la programación funcional es la capacidad de poder transformar la
morfología de las funciones para adaptarlas a cada escenario de aplicación real. En términos
concretos esto signiﬁca poder cambiar la signatura de la función y en especial la forma en que
se proporcionan los parámetros de entrada y resultados de salida. Veremos que existen
mecanismos técnicas y patrones para ar;cular este proceso.
function greater (x, y) {
return x > y;
}
function greater (x, y) {
return y > x;
}
reverse
(function greater (x) {
function (y) {
return y > x;
}
})(18)
function greater (x) {
function (y) {
return y > x;
}
}
curry
parPal
Se invierte el orden de aplica-
ción de los parámetros de
forma transparente
Se transforma la evaluación de
la función para que pueda ser
evaluada por fases
Se conﬁgura parcialmente la
función para obtener el
predicado de adulto

@javiervelezreye 9
Introducción
E. Dinamicidad Funcional
La programación funcional permite diseñar funciones que sean capaces de construir
abstracciones funcionales de forma dinámica en respuesta a la demanda del contexto de
aplicación. Como veremos, este obje;vo se apoya en mecanismos de abstracción y también
abunda en la adaptación funcional que acabamos de describir.
isAdult('jlopez')isOld('jlopez') isYoung('jlopez')
function greater (x) {
return function (y) {
return y > x;
}
}
Se demanda un predicado
funcional que discrimine a los
jubilados
adultos
jóvenes
La función greater es una factoría
funcional que deﬁne comporta-
mientos dinamicamente
Proveedor
Clientes
var isOld = greater(65) var isYoung = greater(25)
var isAdult = greater(25)

@javiervelezreye 10
Introducción
A. Principio de Transparencia Referencial
III. Principios de Diseño Funcional
El principio de transparencia referencial predica que en toda especiﬁcación funcional correcta,
cualquier función debe poder subs;tuirse en cualquier ámbito de aplicación por su expresión
funcional sin que ello afecte al resultado obtenido. La interpretación de este principio de
diseño ;ene tres lecturas complementarias.
Funciones Puras
Dado que el predicado greater sólo depende de
sus parámetros de entrada x e y, se trata de una
función pura. Por ello, manEene la transparencia
referencial permiEendo su susEtución sin impacto
en la semánEca del contexto de aplicación
var old = greater(65)
var old = (function greater (x) {
function (y) {
return y > x;
}
})(65);
Se dice que una función es pura – recuerda al es;lo de
comportamiento matemá;co – si su valor de retorno sólo
depende de los parámetros de entrada y no del estado
ambiental (variables globales, variables retenidas en ámbito
léxico, operaciones de E/S, etc.).
f
Estado

@javiervelezreye 11
Introducción
Comportamiento Idempotente
pop + pop === 2 * pop
Se dice que una función es idempotente si siempre devuelve el
mismo resultado para los mismos parámetros de entrada. En
nuestro ejemplo debería veriﬁcarse esta igualdad:
function Stack () {
var items = [];
return {
push: function (e) {
items.push(e);
},
pop: function () {
return items.pop();
}
};
}
function Stack () {
return { stack: [] };
}
function push (s, e) {
return {
stack: s.stack.concat(e),
top: e
};
}
function pop (s) {
var stack = [].concat(s.stack);
var e = stack.pop();
return {
stack: stack,
top: e
};
}
EsPlo Orientado a Objetos
EsPlo Funcional
La pila manEene el estado
interno y las operaciones push y
pop no resultan idempotentes
El estado se manEene externa-
mente y se pasa como parámetro
a cada operación con lo que el
comportamiento es idempotente

@javiervelezreye 12
Introducción
AgnosPcismo de Estado
La entrada acumula toda la
información ambiental en
forma de estado
clean
words
count
Entrada
Salida
Fronteras Arquitectónicas
Dentro de la arquitectura el estado es
acarreado como parámetro a lo largo
de la cadena de transformación
Cada abstracción en el ámbito arquitec-
tónico es una función pura que hace
depender su salida exclusivamente de
sus parámetros de entrada
Todo problema de aplicación real se caracteriza por un estado
intrínseco. El agnos;cismo de estado no niega esta realidad. En su lugar,
el principio debe interpretarse como que dentro de las fronteras del
sistema el comportamiento funcional sólo puede depender de los
parámetros explícitamente deﬁnidos en cada función.

@javiervelezreye 13
Introducción
B. Principio de Inmutabilidad de Datos
En el modelo de programación impera;va, la opera;va de computo se en;ende como un
proceso secuencial y paula;no de transformación del estado mantenido por la arquitectura
hardware de la máquina. En programación funcional – y en virtud de la transparencia
referencial – las funciones no dependen del estado ambiental. De ello se colige que el
concepto de variable entendido como deposito actualizable de información no existe.
var x = 1
...
x = x + 1
x@(0) = 1
...
x@(t+1) = x@(t) + 1
En programación imperaEva las variables se
enEenden como depósitos de información en
memoria que pueden actualizarse durante el Eempo
de vida del programa. La dimensión Eempo queda
oculta y esto dificulta el razonamiento
La programación funcional pone estrés en que los cambios
en los datos de un programa deben manifestarse como
funciones sobre la dimensión Eempo. Esto significa que el
concepto de variables como deposito de información y las
operaciones de actualización sobre ellas no están
permiEdas
ImperaPvo P. Funcional
En términos prác;cos la aplicación se este
principio se traduce en que las funciones nunca
deben actualizar los parámetros de entrada sino
generar a par;r de ellos resultados de salida
function push (s, e) {
return s.push(e);
}
function push(s, e) {
return s.concat(e);
}
Se modifica s
No se modifica s
EsPlo ImperaPvo
EsPlo Funcional

@javiervelezreye 14
Introducción
C. Principio de Computación Centrada en Colecciones
A diferencia de lo que ocurre en otros paradigmas como en orientación a objetos donde los
datos se organizan en forma de grafos relacionales, en programación funcional éstos deben
modelarse como colecciones – arrays o diccionarios en JavaScript – para que se les pueda sacar
pleno par;do1. Se dice que el modelo de computación de la programación funcional está
centrado en colecciones.
Set
Un conjunto se modela como
un array o un diccionario de
booleanos
1
3
4
[true,
false,
true,
true]
Bag
Una bolsa se modela como un
un diccionario de contadores
a
b
c
{a: 2,
b: 3,
c: 1}
a
bb
Binary Tree
Un array se aplana como una
colección anidada de arrays de
3 posiciones, árbol izquierdo,
nodo, árbol derecho
1
52
Heap
Una cola con prioridad es un
diccionario de arrays o un array
de arrays
{1: [a, c],
2: [b, c, d],
3: [f]}
7643
[
[
[[],3,[]],
2,
[[],4,[]]],
1,
[[[],6,[]],
5,
[[],7,[]]]
]
…
a c
b d e
f
1
2
3
[
[a, c],
[b, c, d],
[f]
]
1 Los diccionarios son una aproximación de
representación aceptable en tanto que
pueden procesarse como colecciones de pares
clave-valor

@javiervelezreye 15
Introducción
D. Principio de Diseño Dirigido por Capas
La construcción de arquitecturas funcionales sigue un proceso de diseño dirigido por capas o
niveles de especiﬁcación. Desde las abstracciones más generales encontradas en librerías
funcionales se construye un nivel idiomá;co que propone un esquema abstracto de solución
para el problema propuesto y sólo entonces se concreta en el dominio par;cular del problema.
var users = [{ name: 'jlopez', sex: 'M', age: 26 } ...];
var male = function (u) { return u.age > 18; };
var name = function (ac, u) {
ac.push(u.name);
return ac;
};
get(users)(male, name, []);
var get = function (collection) {
return function (filter, reducer, base) {
return collection
.filter(filter)
.reduce(reducer, base);
};
};
map reduce filter ...
Nivel de Dominio
Se contextualiza el esquema
anterior dentro del dominio de
aplicación concretando con
datos y funciones especíﬁcas
Nivel IdiomáPco
Se crea un esquema funcional
que resuelve la familia de
problemas al que pertenece el
problema planteado
Nivel de Librería
Se uElizan funciones generales
con un alto nivel de abstracción
Nivel de Abstracción
ReuPlización Transversal a Dominio

Javier Vélez Reyes
@javiervelezreye
2 JavaScript
como Lenguaje
Funcional
§  Definición Funcional por Casos
§  Definición por Recursión
§  Expresiones Funcionales de Invocación Inmediata IIFE
§  Definición en Orden Superior
§  Clausuras & Retención de Variables
JavaScript como Lenguaje Funcional

@javiervelezreye 17
Como ya hemos comentado, los procesos de programación funcional consisten esencialmente
en la definición de una colección de declaraciones funcionales que puedan adaptarse a
dis;ntos niveles de abstracción y aplicarse conjugadamente para resolver problemas de forma
declara;va. Para ar;cular estas tareas de definición el paradigma funcional ofrece una
colección de mecanismos esenciales que revisamos en este capítulo.
I. Introducción
Técnicas PF
Patrones PF
El nivel de lenguaje está formado
por la colección de mecanismos
de programación que proporciona
el lenguaje de forma naEva
Nivel de Lenguaje
Las deficiencias que por su
concepción presenta el lenguaje
se deben suplir a este nivel por
aplicación de técnicas y patrones
de diseño que revisaremos en
próximos capítulos
Nivel IdiomáPco
App App App
Definición por casos
recursividad
Expresiones IIFE
Orden Superior
Clausuras
Retención Variables
Sobrecarga Funcional
Definición por Patrones
JS Funcional

@javiervelezreye 18
A. Definición Funcional por Casos
II. Mecanismos de Programación Funcional
La forma más sencilla de definir una función es diseñando explícitamente la colección de
valores de retorno que debe devolver para cada posible parámetro de entrada. Aunque este
mecanismo parece poco flexible aisladamente, cuando se conjuga con otras formas de
definición resulta de aplicación frecuente.
La definición por casos se expresa
declarando explícitamente el valor que
debe devolver la función para cada
posible valor de los parámetros de
entrada
function f (parámetros) {
return caso-1 ? resultado-1 :
caso-2 ? resultado-2 :
resultado-defecto;
}
El uso anidado del operador
condicional permite expresar los
pares caso-resultado como una
única expresión de retorno
Única Expresión
Enumeración Explícita de casos
function comparator(x) {
return x > 0 ? 1 :
x === 0 ? 0 :
-1 ;
}
function even(n) {
return n % 2;
}
Se uEliza el operador condicional
anidado para definir cada caso
funcional
La definición mediante una única
expresión es el escenario más
sencillo de definición por casos

@javiervelezreye 19
B. Definición por Recursión
La definición de funciones por recursión consiste en la invocación de la propia función como
parte del proceso de definición. El esquema de definición recursivo se apoya en el mecanismo
anterior para dis;nguir entre casos base – aquéllos que devuelven un resultado final – de
aquéllos casos recursivos – donde el valor de retorno vuelve a invocar a la propia función.
function f (parámetros) {
return caso-base-1 ? resultado-base-1 :
caso-base-2 ? resultado-base-2 :
caso-recursivo-1 ? resultado-recursivo-1 :
caso-recursivo-2 ? resultado-recursivo-2 :
resultado-defecto ;
}
Los casos base son el final del
proceso recursivo y se suponen
soluciones inmediatas a
problemas sencillos
Casos base
Los casos recursivos se
diseñan invocando a la
propia función sobre
valores de parámetros
que convergen a los
casos base
Casos recursivos
Asegúrese de que cada resultado
recursivo converge a alguno de los
casos base
II. Regla de convergencia I. Regla de cobertura
Asegúrese de que todos los casos
base del problema han sido incluidos
explícitamente en la definición de la
función
Para diseñar cada caso recursivo
asuma que la función por definir está
ya definida para valores de
parámetros más próximos a los casos
base
III. Regla de autodefinición

@javiervelezreye 20
En función de cómo se expresan los casos recursivos de una función podemos dis;nguir entre
dos ;pos de situaciones. En la recursión directa, los casos recursivos de la función se expresan
en términos de llamadas a ella misma. En la recursión indirecta, la función invoca a otra
función que recurre sobre la primera.
Recursión Directa
function factorial (n) {
return n === 0 ? 1 :
n * factorial(n - 1);
}
factorial(4)
= 4 * factorial(3)
= 4 * 3 * factorial(2)
= 4 * 3 * 2 * factorial(1)
= 4 * 3 * 2 * 1 * factorial(0)
= 4 * 3 * 2 * 1 * 1
= 24
Recursión Indirecta
function even (n) {
return n === 0 ? true :
!odd(n-1);
}
function odd (n) {
return n === 0 ? false :
!even(n-1);
}
even(4)
= !odd(3)
= !!even(2)
= !!!odd(1)
= !!!!even(0)
= !!!!true
= true
Los casos recursivos convergen
hacia los casos base reduciendo el
tamaño del problema en una
unidad a cada paso
La convergencia hacia los casos base
va incluyendo un operador de
negación que se resuelven al llegar
al caso base

@javiervelezreye 21
Dado que la programación funcional no dispone de estructuras de control de ﬂujo, la única
forma de resolver problemas que requieren un computo itera;vo es expresarlas a par;r de
una formulación recursiva. Aunque puede resultar en principio más complejo, la expresividad
funcional aumenta con este ;po de expresiones. Además hay problemas que ;enen una
resolución inherentemente recursiva.
Problema de las Torres de Hanoi
Mover discos de uno en uno para dejarlos en la
misma posición de A en C usando B como
auxiliar. Los discos por encima de uno dado
deben ser siempre de menor tamaño que éste.
function hanoi (n, origen, aux, destino) {
if (n === 1) mover(origen, destino);
else {
hanoi(n-1, origen, destino, aux);
mover(origen, destino);
hanoi(n-1, aux, origen, destino);
}
}
function mover (origen, destino) {
destino.push (origen.pop());
}
var A = [4, 3, 2, 1], B = [], C = []
hanoi(A, B, C);
A B C
n-1
1
n-1
1
2
3

@javiervelezreye 22
C. Expresiones Funcionales e Invocación Inmediata
No en pocas ocasiones la necesidad de definir una función se restringe a un solo uso que se
realiza a con;nuación de su definición. Si encerramos una definición de función entre
paréntesis y aplicamos a la expresión resultante el operador de invocación – los parámetros
actuales a su vez entre parentesis y separados por comas – obtenemos una expresión
funcional de invocación inmediata IIFE.
(function f (parámetros-formales) {
<<cuerpo de declaración funcional>>
})(parámetros-actuales);
La expresión funcional se invoca
directamente por aplicación de los
parámetros actuales
La definición funcional se encierra
entre paréntesis para converErla en
una expresión evaluable
Expresión Funcional Invocación Inmediata
var cfg = (function config(user) {
// getting config from DB
return {...}
})('jvelez');
Un cpico ejemplo de IIFE se da cuando
se pretenden realizar cálculos complejos
o tareas que se efectuarán una sola vez
a lo largo del código
La ventaja de este Epo de construcciones
es que la función se libera de la memoria
tras su ejecución

@javiervelezreye 23
D. Deﬁnición en Orden Superior
En JavaScript las funciones son ciudadanos de primer orden. Esto quiere decir que a todos los
efectos no existe ningún ;po de diferencia entre una función y cualquier valor de otro ;po
primi;vo. Esto permite a una función recibir otras funciones como parámetros o devolver
funciones como retorno. Este mecanismo se le conoce con el nombre de orden superior.
Funciones como Parámetros a Otras Funciones
El paso de funciones como parámetros a una función
permite que el comportamiento de ésta sea adaptada por
medio de la inyección de código variante en cada invocación.
Esta aproximación contrasta con la programación por ;pos
variantes propia de la orientación a objetos.
Funciones como Retorno de Otras Funciones
Las funciones son capaces de generar dinámicamente
funciones que devuelven como resultado. Esto es de
especial interés cuando la función devuelta es el
resultado de transformar una función recibida como
argumento. Este proceso jus;ﬁca el nombre de orden
superior ya que se opera con funciones genéricas.
function once (fn) {
var called = false;
return function () {
if (!called) {
called = true;
return fn.apply(this, arguments);
}
}
}
var greater = function (x, y) {...};
var less = function (x, y) {...};
var even = function (x) {...};
[1, 4, 3, 2].sort(greater);
[1, 4, 3, 2].sort(less);
[1, 4, 3, 2].filter(even);

@javiervelezreye 24
E. Clausuras & Retención de Variables
Las funciones que, por medio de los mecanismos de orden superior, devuelven funciones
como resultado se pueden expresar en términos de variables locales o parámetros presentes
en el entorno funcional donde se definen. La retención de variables es el mecanismo mediante
el cual dichas variables y parámetros son mantenidos durante todo el ;empo de vida de la
función de retorno. Este ;po de funciones se denominan clausuras.
function Logger(cls) {
var pre = 'Logger';
var post = '...';
return function (message) {
console.log ('%s[%s] - [%s]%s',
pre, cls, message, post);
}
}
var log = Logger('My Script');
Log('starting');
log(1234);
log('end');
function (message) {...}
pre post cls
Clausura
Las clausuras son un mecanismos de
construcción funcional que captura de forma
permanente un estado de configuración que
condiciona su comportamiento
Variables Retenidas
Al extraer una función fuera de su ámbito
léxico de definición se manEene el contexto
de variables y parámetros que dicha función
uEliza.

Javier Vélez Reyes
@javiervelezreye
3 Técnicas de
Programación
Funcional
§  Abstracción
§  Encapsulación
§  Inmersión por Recursión y Acumulación
§  Evaluación Parcial
§  Composición Funcional & Composición Monádica
Técnicas de Programación Funcional

@javiervelezreye 26
A par;r de los mecanismos que ofrece JavaScript como lenguaje de programación se puede
escribir soeware bien centrado en el paradigma funcional. No obstante, para ello es necesario
conocer una colección de técnicas básicas que describen formas canónicas de hacer frente a
problemas recurrentes. A lo largo de este capítulo haremos una revisión de las técnicas más
relevantes.
I. Introducción

Las técnicas de abstracción permiten
definir especificaciones funcionales con
diferentes grados de generalidad y
reu;lización transversal
Abstracción

En funcional la encapsulación de estado
es un mal a veces necesario y en
muchas ocasiones puede reemplazarse
por encapsulación de comportamiento
Encapsulación

Las técnicas de inmersión son una con-
jugación de abstracción, encapsulación
y recursividad para obtener control de
flujo dirigido por datos
Inmersión

La evaluación parcial permite evaluar
una función en varias fases reduciendo
paula;namente el número de variables
libres
Evaluación Parcial

La composición funcional permite
ar;cular procesos de secuenciamiento
de funciones definidas como
expresiones analí;cas
Composición Funcional

La transformación monádica persigue
adaptar funciones para conver;rlas en
transformaciones puras que soporten
procesos de composición
Transformación Monádica

La inversión de control permite
permutar entre las arquitecturas
funcionales centradas en los datos y las
centradas en las transformaciones
Inversión de Control

@javiervelezreye 27
A. Técnicas de Abstracción
II. Técnicas de Programación Funcional
Una de las técnica de programación funcional más comúnmente u;lizadas, en alineamiento
con los principios de diseño presentados anteriormente, es la abstracción funcional. Las tareas
de abstracción deben entenderse como un proceso de transformación en el que la deﬁnición
de una función se reexpresa en términos más generales para dar cobertura a un abanico más
amplio de escenarios de aplicación. Podemos dis;nguir tres dimensiones de abstracción.
Abstracción en
Anchura
Suma convencional de dos nú-
meros pasados como para-
metros
add(x, y)
add
Combina mediante la función c
todos los parámetros a parEr
de uno dado en posición p
reduceFrom(p, c)(x, y, …)
reduceFrom
Suma todos los parámetros de
la función independientemente
de la aridad
addAll(x, y, z, …)
addAll
Suma todos los parámetros de
la función a parEr de aquél que
ocupa una posición p
add(p)(x, y, z, …)
addFrom
Abstracción en
Comportamiento
Abstracción en
Alcance

@javiervelezreye 28
B. Técnicas de Encapsulación
Mediante el uso de clausuras y la retención de variables es posible capturar, durante la fase de
diseño o ejecución, cierta información que resulta de u;lidad para adaptar el comportamiento
de la función a lo largo del ;empo. Es posible dis;nguir entre encapsulación de estado y de
comportamiento.
Encapsulación de Estado. Pila Undo
function Stack () {
var items = [];
var history = [];
return {
push: function (e) {
history.push([].concat(items));
items.push(e);
},
pop: function () {
history.push([].concat(items));
return items.pop();
},
undo: function () {
if (history.length > 0)
items = history.pop();
}
};
}
Las variables que capturan el estado quedan
retenidas dentro de la clausura lo que
permite arEcular modelos de programación
funcional que evolucionan con el Eempo
Retención de Estado
Ojo! Las funciones que dependen del estado son en
realidad una mala prácEca de programación de acuerdo
a los principios de diseño del paradigma
Dependencia de Estado
1
2
3
1
1 2
2 31
items history
undo

@javiervelezreye 29
comportamiento.
Encapsulación de Comportamiento. Pila Undo
function Stack () {
var items = [];
var history = [];
return {
push: function push (e) {
history.push(function(){items.pop()});
items.push(e);
},
pop: function pop () {
var e = items.pop();
history.push(function(){items.push(e);});
return e;
},
undo: function undo() {
if (history.length > 0)
history.pop()(),
}
};
}
Dentro de cada operación, se registran en el
histórico las operaciones inversas para luego
invocarlas desde la operación deshacer
En este caso la variable de histórico captura
la colección de operaciones inversas que
permiten deshacer las transacciones según
han ido sucediendo
Retención de Comportamiento
Operaciones Inversas
1
2
3
pop
items history
undo
pop pop
pop pop pop

@javiervelezreye 30
comportamiento.
Encapsulación de Comportamiento. Bus
function Bus () {
var fns = {};
return {
receive: function (e, fn) {
fns[e] = fn;
},
send: function (e, ctx) {
return fns[e].apply(null, ctx);
}
};
}
var bus = Bus();
bus.receive('add', function (x,y) {return x+y;});
bus.receive('sub', function (x,y) {return x-y;});
bus.send('add', [3,2]);
bus.send('sub', [7,3]);
bus
fn
sub x - y
x + y add
event
El productor emite con la
operación send un evento
a los receptores
send
send('add', [3,2])
El consumidor se
registra en los
eventos de interés
receive receive('add', +)
3+2

@javiervelezreye 31
C. Diseño por Inmersión
Dado que la programación funcional no soporta los esquemas itera;vos propios de la
programación impera;va, es preciso orientar los cálculos a la recurrencia apoyándose para ello
en parámetros auxiliares. Las técnicas de inmersión conjugan encapsulación y abstracción con
el uso de parámetros auxiliares. Podemos dis;nguir diferentes ;pos de inmersión.
function find (v, e) {
var aux = function (v, e, p) {
return (p > v.length) ? -1 :
(v[p] === e) ? p :
aux(v, e, p + 1);
};
return aux(v, e, 0);
}
I. Inmersión por Recorrido
function addAll (v) {
return (function aux(v, p) {
if (p === v.length-1) return v[p];
else return v[p] + aux (v, p+1);
}) (v, 0);
}
La inmersión de recorrido exEende la
función introduciendo un nuevo
parámetro cuyo propósito es llevar la
cuenta del punto hasta el que se ha
avanzado en el vector.
aux([1,2,3], 0) =
1 + aux([1,2,3], 1) =
1 + 2 + aux ([1,2,3], 2) =
1 + 2 + 3 = 6
La técnica se apoya es una
abstracción que queda
sumergida dentro de la más
especíﬁca por encapsulación
321
p>

@javiervelezreye 32
C. Diseño por Inmersión
Dado que la programación funcional no soporta los esquemas itera;vos propios de la
programación impera;va, es preciso orientar los cálculos a la recurrencia apoyándose para ello
en parámetros auxiliares. Las técnicas de inmersión conjugan encapsulación y abstracción con
el uso de parámetros auxiliares. Podemos dis;nguir diferentes ;pos de inmersión.
II. Inmersión por Acumulación
La acumulación se aplica
aquí para obtener recursi-
vidad ﬁnal buscando la
eﬁciencia en memoria
321
p,ac>
function addAll (v) {
return (function aux(v, p, ac) {
if (p === v.length) return ac;
else return aux (v, p+1, v[p]+ac);
})(v, 0, 0);
}
function even (v) {
return (function aux(v, p, ac){
if (p === v.length) return ac;
else {
if (v[p] % 2 === 0) ac.push(v[p]);
return aux(v, p+1, ac);
}
})(v, 0, []);
}
Se uEliza la técnica de acumulación
para consolidad un vector formado
por el subconjunto de los elementos
pares del vector
Reducción
Tail Recursion
aux([1,2,3], 0, 0) =
aux([1,2,3], 1, 1) =
aux ([1,2,3], 2, 3) =
aux ([1,2,3], 3, 6) =
6

@javiervelezreye 33
D. Evaluación Parcial
El uso de clausuras permite transformar una función para que pueda evaluarse de manera
parcial resolviendo sólo algunos de sus parámetros. El resultado es una nueva función con
menos grados de libertad donde los parametros ya evaluados se ﬁjan a un valor concreto y el
resto quedan como variables libres.
function color(rr) {
return function (gg) {
return function (bb) {
return [rr, gg, bb] ;
};
};
}
I. Dimensiones Contractuales
A diferencia de lo que ocurre en otros
paradigmas, el diseño funcional de
abstracciones ;ene dos dimensiones de
deﬁnición, la dimensión espacial y la
dimensión temporal.
En la dimensión temporal
cada fase conduce a una
etapa de resolución parcial
de parámetros
La dimensión espacial vincula
convencionalmente valores actuales
a parámetros
Desde la fase 1 a la fase 2 se
resuelve el parámetro rr y
quedan dos dimensiones libres
de movimiento (gg, bb) II. Reducción Dimensional
Cada fase de aplicación temporal de
parámetros conduce a una reducción
dimensional en el espacio del problema.
bb
gg
rr
bb
gg
rr = cc
color('cc')('a3')('45')

@javiervelezreye 34
El uso de la evaluación parcial permite que el programador vaya resolviendo de forma faseada
la evaluación de una función a medida que va disponiendo de los argumentos actuales
necesarios. En estos casos, el diseño de la función debe cuidarse para garan;zar que el orden
en el que se demandan los parámetros a lo largo del ;empo corresponde con el esperado en el
contexto previsto de uso.
Ejemplo. Evaluación por Fases
function schema (scheme) {
var uri = { scheme : scheme };
return function (host) {
uri.host = host;
return function (port) {
uri.port = port;
return function (path) {
uri.path = path;
return uri;
};
};
};
};
}
Se arEcula un proceso de construcción por
fases que permite inyectar las partes de una
Uri. Este esquema recuerda al patrón Builder
de OOP pero usando únicamente funciones
var host = schema('http');
var port = host('foo.com');
var path = port(80);
var uri = path('index.html');
uri();
Aunque la aplicación de este
esquema induce un estricto
orden en la resolución para-
métrica permite resolver por
fases el proceso construcEvo a
medida que se dispone de los
datos

@javiervelezreye 35
Otro escenario protogpico del uso de la evaluación parcial se da en la comunicación entre
funciones proveedoras y clientes. El proveedor resuelve parcialmente una función reduciendo
así el número de dimensiones y la entrega en respuesta a la demanda de un cliente que
resolverá el resto de dimensiones con argumentos actuales en sucesivas invocaciones. En este
caso, el diseño funcional debe fasearse teniendo en cuenta la intervención primera del
proveedor y posterior del cliente.
Transferencia Proveedor - Consumidor
function RuleEngine (ctx) {
return function eval(rule) {
var args = [].slice.call(arguments);
if (rule.trigger.apply(ctx, args))
return rule.action.apply(ctx, args);
};
};
}
var rE = RuleEngine({age: 18, login: false});
rE ({ trigger: function (age) { return age > this.age; },
action: function () { return this.login = true; } })(19);
rE ({ trigger: function () { return this.login; },
action: function () { return 'Bienvenido!'; } })();
El proveedor resuelve parcialmente
una función eval y la entrega como
resultado a la función cliente
La función obtenida del proveedor
permite al cliente evaluar reglas que
se apoyan en las variables retenidas
rE ctx
function eval(rule) {}
Proveedor
RuleEngine
RuleEngine(ctx)
Cliente

@javiervelezreye 36
E. Composición Funcional
Dado que en programación funcional las abstracciones son meras transformaciones que no
pueden ar;cular un algoritmo secuencial, es frecuente modelar el secuenciamiento en base a
la composición. De esta manera, el valor de retorno de una función sirve de entrada para la
función subsiguiente.
function clean (s){ return s.trim(); }
function words (s){ return s.split(' '); }
function count (s){ return s.length; }
count(
words(
clean('La FP en JS Mola!!!')
)
);
clean
words
count
s
5
La cascada de composición funcional se recorre en senEdo inverso
al natural. Los datos comienzan por la función más interna (clean)
y atraviesan la cadena de composición ascendentemente hasta la
cima (count). En el capítulo siguiente estudiaremos patrones que
conducen a una lectura descendente más natural
La organización composiEva de funciones
conduce a arquitecturas centradas en las
transformaciones que los datos atraviesan en
cascada

@javiervelezreye 37
E. Composición Funcional
En ocasiones la forma en la que se deﬁnen las abstracciones funcionales no es compa;ble con
los procesos de composición. Para poder ar;cular adecuadamente dichos procesos debemos
tener en cuenta dos reglas de transformación funcional que puede ser necesario aplicar para
conseguir funciones composi;vas.
El Epo del parámetro de entrada de una
función debe ser compaEble con el Epo del
valor de retorno devuelto por la función
anterior para que la composición pueda
arEcularse con éxito
II. CompaPbilidad Rango-Dominio
I. Dominio Simple
Dado que una función f devuelve un único
valor de retorno, el número de parámetros que
acepta una función g cuando se compone con f
debe ser exactamente uno. Para miEgar este
problema es posible encapsular los resultados
de f en una estructura de datos y/o resolver
todos los parámetros de g menos uno por
medio de evaluación parcial
F
G
T
UEl Epo de salida T debe ser compaEble con
el Epo de entrada U. En términos OOP
diríamos que T debe ser subEpo de U
count(
words(
clean(s)
)
);
[String]-> Number
String -> [String]
String -> String
neg(
square(
{stack:[3]}
)
);
function square(r) {
var e = r.stack.pop();
return {
value: e*e, stack: r.stack
};
}
function neg(r) {
r.stack.push(-r.value);
return r;
}

@javiervelezreye 38
F. Transformación Monádica
El diseño de funciones debe hacerse garan;zando la ausencia de efectos colaterales de manera
que cada función sólo dependa de sus parámetros de entrada. Sin embargo, en el mundo real
es frecuente requerir que una función realice operaciones que dependan del entorno
(dependencias de estado, operaciones de E/S, etc.). Las técnicas de transformación monádica
garan;zan la ausencia de efectos colaterales a la vez que conservan la capacidad composi;va.

Supongamos que tenemos una
librería de funciones matemáEcas
de un solo parámetro que operan
con números y devuelven un
número. Por moEvos de depuración
estas funciones emiten mensajes a
la consola
function inv (x) { console.log('invertir'); return 1/x; }
function sqr (x) { console.log('cuadrado'); return x*x; }
function inc (x) { console.log('incremento'); return x+1; }
function dec (x) { console.log('decremento'); return x-1; }
Dado que la traza por consola se
considera un efecto colateral
indeseable se transforman las
funciones en puras parametrizando
la traza como valor anexo de salida
function inv (x) { return { value: 1/x, log: ['invertir'] }; }
function sqr (x) { return { value: x*x, log: ['cuadrado'] }; }
function inc (x) { return { value: x+1, log: ['incrementar'] }; }
function dec (x) { return { value: x-1, log: ['decrementar'] }; }
Ejemplo. Monada Escritor

@javiervelezreye 39

Ahora las funciones son puras pero han perdido su
capacidad composiEva puesto que incumplen la
regla de compaEbilidad Rango-Dominio. Es
necesario, en primer lugar, crear una función unit
que eleve valores unitarios desde el Epo simple
(Number) al Epo monádico (valor + log)
Ahora podemos crear una función bind que permita componer
nuestras funciones anteriores sin necesidad de alterarlas. Esta
función recibe un valor monádico (entrada + log acumulado) y
una de nuestras funciones. La función bind primero desenvuelve
la monada, después aplica la función pasada como parámetro y
anexa la traza de la misma al log acumulado. Finalmente
devuelve la estructura monádica con los resultados obtenidos
function unit (value) {
return {
value: value,
log : []
};
}
function bind (m, fn) {
var r = fn(m.value);
return {
value : r.value,
log : m.log.concat(r.log)
};
return this;
}

@javiervelezreye 40

Con las funciones de transformación monádica
unit & bind hemos creado una solución para
garanEzar la composición funcional eliminando
los efectos colaterales de traza por pantalla
bind(
bind(
unit(3), sqr
), neg
);
unit
sqr
inc
3
{ value: 10,
log: [
'cuadrado',
'incremento']
}
El valor primiEvo 3, se transforma primero al Epo
monádico y luego se compone con la función sqr
e inc por medio de la asistencia que proporciona
la función bind

@javiervelezreye 41

Existen muchos Epos de efectos colaterales que pueden
evitarse por medio de la aplicación de técnicas de
composición monádica. Dado que cada Epo de efecto
colateral requiere una lógica unit y bind especíﬁca es
buena idea expresar estas técnicas como objetos donde
unit se codiﬁque como constructor y bind como método
miembro del protoEpo
function Writer (value) {
this.value = value;
this.log = [];
}
Writer.prototype.bind = function (fn) {
var m = fn(this.value);
var result = new Writer(m.value);
result.log = this.log.concat(m.log);
return result;
};
var r = new Writer(3)
.bind(sqr)
.bind(inc);
Aunque desde un punto de vista pragmáEco
esta operaEva resulta cómoda y natural
debemos ser conscientes de que se apoya en
encapsulación de estado

@javiervelezreye 42
G. Inversión de Control
Las programación funcional permite ar;cular dos ;pos de arquitecturas complementarias. Las
arquitecturas centradas en los datos ﬁjan una colección de datos de entrada y hacen atravesar
en torno a ellos una colección de transformaciones funcionales. Ortogonalmente, las
arquitecturas centradas en la transformación establecen una cadena composi;va de funciones
que es atravesada por diversas colecciones de datos. Las técnicas de inversión de control son
una pasarela para conver;r un esquema arquitectónico en el contrario y viceversa.

data('La FP en JS Mola!!!')
.do(clean)
.do(words)
.do(count);
function data (value) {
return {
value: value,
do: function (fn) {
this.value = fn(this.value);
return this;
}
};
}
count words clean S 5
Arquitecturas Centradas en los Datos
Las arquitecturas centradas en los datos ﬁjan un
conjunto de datos y permiten realizar
transformaciones pasadas como parámetros en
orden superior

@javiervelezreye 43
G. Inversión de Control
Las programación funcional permite ar;cular dos ;pos de arquitecturas complementarias. Las
arquitecturas centradas en los datos ﬁjan una colección de datos de entrada y hacen atravesar
en torno a ellos una colección de transformaciones funcionales. Ortogonalmente, las
arquitecturas centradas en la transformación establecen una cadena composi;va de funciones
que es atravesada por diversas colecciones de datos. Las técnicas de inversión de control son
una pasarela para conver;r un esquema arquitectónico en el contrario y viceversa.

Arquitecturas Centradas en la Transformación
Las arquitecturas centradas en la transformación
establecen una cadena de composición de
transformaciones funcionales por las que
atraviesan disEntas colecciones de datos
clean words count S 5
function clean (s) { return s.trim(); }
function words (s) { return s.split(' '); }
function count (s) { return s.length; }
count(
words(
clean('La FP en JS Mola!!!')
)
);
En el siguiente capítulo estudiaremos patrones
dedicados a establecer transformaciones para
converEr arquitecturas centradas en los datos a
arquitecturas centradas en transformación y
viceversa

Taller de Programación Funcional en JavaScript

Más contenido relacionado

La actualidad más candente (20)

Destacado (8)

Similar a Taller de Programación Funcional en JavaScript (20)

Más de Javier Vélez Reyes (18)

Último (6)

Taller de Programación Funcional en JavaScript