Taller de Programación Funcional en JavaScript

JavierVélezReyes@javiervelezreye

Javier.velez.reyes@gmail.com

TallerdeProgramaciónFuncionalenJavaScript

Enero2016

@javiervelezreye2

PresentaciónTallerdeProgramaciónFuncionalenJavaScript

LicenciadoporlaUPMdesdeelaño2001ydoctoreninformá;caporlaUNEDdesdeelaño2009,Javierconjugasuslaborescomoprofesore inves;gador con la consultoría y la formación técnica paraempresa. Su línea de trabajo actual se centra en la innovación ydesarrollodetecnologíasparalaWeb.Ademásrealizaac;vidadesdeevangelización y divulgación en diversas comunidades IT y escoordinadordevariosgruposdeámbitolocalcomoNodeJSMadridoMadridJS.FormapartedelprogramaPolymerPolytechnicSpeakeryesmentordelcapítulodeMadriddeNodeSchool.

¿QuiénSoy?

javier.velez.reyes@gmail.com

@javiervelezreye

linkedin.com/in/javiervelezreyes

gplus.to/javiervelezreyes

jvelez77

javiervelezreyes

youtube.com/user/javiervelezreyes

Javier.veler.reyes@gmail.com

1Introducción§  Introducción§  Obje;vosdelaProgramaciónFuncional§  PrincipiosdeDiseñoFuncional

Introd

ucción

Tallerd

ramaciónFunciona

@javiervelezreye4

IntroducciónTallerdeProgramaciónFuncionalenJavaScript

Laprogramaciónfuncionalesunviejoconocidodentrodelmundodeldesarrollo.Noobstante,en losúl;mosañosestá cogiendo traccióndebido, entreotros factores, a la emergenciadearquitecturasreac;vas,alusodeesquemasfuncionalesenelmarcodeBigDatayalcrecientesoporte que se le da desde diversas plataformas vigentes de desarrollo. JavaScript ha sidosiempreun lenguajecon fuerte tendenciaaldiseño funcional.Eneste texto revisaremossusobje;vos y principios y discu;remos los mecanismos, técnicas y patrones empleadosactualmenteparaconstruirarquitecturasfuncionaleshaciendousodeJavaScript.

I.Introducción

ProgramaciónFuncional

ProgramaciónOrientadaaObjetos

Arquitecturascentradasenlatransformación

Variantesfuncionales

TransparenciaReferencial

Inmutabilidad

ComposiEvidad

PuntosdeExtensiónPolimórfica Arquitecturas

centradasenlaabstraccionesSusEtuEvidad

LiskovianaEncapsulaciónde

estadoArquitecturas

dirigidasporflujosdecontrol

Arquitecturasdirigidasporflujosde

@javiervelezreye5

A.EspecificaciónDeclaraPva

II.ObjePvosdelaProgramaciónFuncional

La programación funcional persigue diseñar especificaciones de comportamiento abstractoquesecentrenenladescripcióndelascaracterís;casdeunproblemamásqueenunaformapar;cularde resolverlo.Deacuerdoaesto, seen;endeque la responsabilidaddeencontraruna solución para el problema descansa no tanto en manos del programador sino en laarquitecturafuncionalsubyacentequetomaencuentadichaespecificación.

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 esElofuncional permite entender fácil-mentelaespecificación

Aunque operaEvamente es equivalente,el esElo imperaEvo es más confuso yresultamásdiRcildeentender

Objetos

Funcional

@javiervelezreye6

B.AbstracciónFuncional

La programación funcional persigue alcanzar una especificación de alto nivel que captureesquemas algorítmicos de aplicación transversal. Como veremos a con;nuación, así sefomenta la reu;lización y la adaptación idiomá;ca. Esto se consigue con arquitecturascentradasenlavariabilidadfuncionalycontrastaortogonalmenteconlaorientaciónaobjetos.

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ónFuncional

AbstraccióndePposObjetos

Funcional

V1 V2 V3

Car Truck

vehicles

EnFPlafuncióneslaunidaddeabstracciónyaquepermite definir esquemas algorítmicos quedependendefuncionespasadascomoparámetros

En OOP los algoritmosse distribuyen entreobjetos con implemen-tacionesvariantes

@javiervelezreye7

C.ReuPlizaciónFuncional

Como consecuencia de la capacidad de abstracción en la especificación declara;va, laprogramación funcionalalcanzacotaselevadasen la reu;lizaciónde funciones.Esteniveldereu;lizaciónalgorítmicanoseconsigueenotrosparadigmascomoenlaorientaciónaobjetos.

El esquema algorítmico se reuElizasobredisEntasestructurasdedatosycondisEntasaplicacionesfuncionales

var get = function (collection) { return function (filter, reducer, base) { return collection .filter(filter) .reduce(reducer, base); }; };

@javiervelezreye8

D.AdaptaciónFuncional

Una de las virtudes de la programación funcional es la capacidad de poder transformar lamorfologíade las funcionesparaadaptarlasacadaescenariodeaplicaciónreal.Entérminosconcretosestosignificapodercambiarlasignaturadelafunciónyenespeciallaformaenquese proporcionan los parámetros de entrada y resultados de salida. Veremos que existenmecanismostécnicasypatronesparaar;cularesteproceso.

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; } }

parPal

Se invierte el ordende aplica-ción de los parámetros deformatransparente

Setransformalaevaluacióndela funciónparaquepuedaserevaluadaporfases

Se configura parcialmente lafunción para obtener elpredicadodeadulto

@javiervelezreye9

E.DinamicidadFuncional

La programación funcional permite diseñar funciones que sean capaces de construirabstracciones funcionales de forma dinámica en respuesta a la demanda del contexto deaplicación.Comoveremos, esteobje;vo se apoyaenmecanismosdeabstracción y tambiénabundaenlaadaptaciónfuncionalqueacabamosdedescribir.

isAdult('jlopez') isOld('jlopez') isYoung('jlopez')

function greater (x) { return function (y) { return y > x; } }

Se demanda un predicadofuncional que discrimine a losjubilados

Se demanda un predicadofuncional que discrimine a losadultos

Se demanda un predicadofuncional que discrimine a losjóvenes

La función greater es una factoríafuncional que define comporta-mientosdinamicamente

Proveedor

Clientes

var isOld = greater(65) var isYoung = greater(25)

var isAdult = greater(25)

@javiervelezreye10

A.PrincipiodeTransparenciaReferencial

III.PrincipiosdeDiseñoFuncional

Elprincipiodetransparenciareferencialpredicaqueentodaespecificaciónfuncionalcorrecta,cualquierfuncióndebepodersubs;tuirseencualquierámbitodeaplicaciónporsuexpresiónfuncional sin que ello afecte al resultado obtenido. La interpretación de este principio dediseño;enetreslecturascomplementarias.

FuncionesPuras

Dado que el predicado greater sólo depende desusparámetrosdeentradaxey, se tratadeunafunción pura. Por ello,manEene la transparenciareferencialpermiEendosususEtuciónsin impactoenlasemánEcadelcontextodeaplicació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 decomportamiento matemá;co – si su valor de retorno sólodepende de los parámetros de entrada y no del estadoambiental (variables globales, variables retenidas en ámbitoléxico,operacionesdeE/S,etc.).

fEstado

@javiervelezreye11

ComportamientoIdempotente

pop + pop === 2 * pop

Se dice que una función es idempotente si siempre devuelve elmismo resultado para los mismos parámetros de entrada. Ennuestroejemplodeberíaverificarseestaigualdad:

function Stack () { var items = []; return { push: function (e) { items.push(e); }, pop: function () { return items.pop(); } }; }

EsPloOrientadoaObjetos

EsPloFuncionalLa pila manEene el estadointernoylasoperacionespushypopnoresultanidempotentes

El estado se manEene externa-menteysepasacomoparámetroa cada operación con lo que elcomportamientoesidempotente

@javiervelezreye12

AgnosPcismodeEstado

La entrada acumula toda lainformación ambiental enformadeestado

Entrada

Salida

FronterasArquitectónicas

Dentro de la arquitectura el estado esacarreado como parámetro a lo largodelacadenadetransformación

Cadaabstracciónenelámbitoarquitec-tónico es una función pura que hacedepender su salida exclusivamente desusparámetrosdeentrada

Todo problema de aplicación real se caracteriza por un estadointrínseco.Elagnos;cismodeestadononiegaestarealidad.Ensulugar,el principio debe interpretarse como que dentro de las fronteras delsistema el comportamiento funcional sólo puede depender de losparámetrosexplícitamentedefinidosencadafunción.

@javiervelezreye13

B.PrincipiodeInmutabilidaddeDatos

En el modelo de programación impera;va, la opera;va de computo se en;ende como unproceso secuencial y paula;no de transformación del estadomantenido por la arquitecturahardware de la máquina. En programación funcional – y en virtud de la transparenciareferencial – las funciones no dependen del estado ambiental. De ello se colige que elconceptodevariableentendidocomodepositoactualizabledeinformaciónnoexiste.

var x = 1 ... x = x + 1

x@(0) = 1 ... x@(t+1) = x@(t) + 1

En programación imperaEva las variables seenEenden como depósitos de información enmemoriaquepuedenactualizarseduranteelEempode vida del programa. La dimensión Eempo quedaocultayestodificultaelrazonamiento

Laprogramaciónfuncionalponeestrésenqueloscambiosen los datos de un programa deben manifestarse comofuncionessobreladimensiónEempo.Estosignificaqueelconceptodevariablescomodepositodeinformaciónylasoperaciones de actualización sobre ellas no estánpermiEdas

ImperaPvo P.Funcional

En términos prác;cos la aplicación se esteprincipio se traduce en que las funciones nuncadeben actualizar los parámetros de entrada sinogenerarapar;rdeellosresultadosdesalida

function push (s, e) { return s.push(e); } function push(s, e) { return s.concat(e); }

Semodificas

Nosemodificas

EsPloImperaPvo

EsPloFuncional

@javiervelezreye14

C.PrincipiodeComputaciónCentradaenColecciones

Adiferenciade loqueocurreenotrosparadigmascomoenorientaciónaobjetosdonde losdatos seorganizan en formade grafos relacionales, enprogramación funcional éstos debenmodelarsecomocolecciones–arraysodiccionariosenJavaScript–paraqueselespuedasacarpleno par;do1. Se dice que el modelo de computación de la programación funcional estácentradoencolecciones.

SetUn conjunto se modela comoun array o un diccionario debooleanos

[true, false, true, true]

BagUna bolsa se modela como unundiccionariodecontadores

{a: 2, b: 3, c: 1}

BinaryTreeUn array se aplana como unacolección anidada de arrays de3 posiciones, árbol izquierdo,nodo,árbolderecho

HeapUna cola con prioridad es undiccionariodearraysounarraydearrays

{1: [a, c], 2: [b, c, d], 3: [f]}

7 6 4 3

[ [ [[],3,[]], 2, [[],4,[]]], 1, [[[],6,[]], 5, [[],7,[]]] ]

3 [ [a, c], [b, c, d], [f] ]

1 Los diccionarios son una aproximación derepresentación aceptable en tanto quepuedenprocesarsecomocoleccionesdeparesclave-valor

@javiervelezreye15

D.PrincipiodeDiseñoDirigidoporCapas

Laconstruccióndearquitecturasfuncionalessigueunprocesodediseñodirigidoporcapasoniveles de especificación. Desde las abstracciones más generales encontradas en libreríasfuncionalesseconstruyeunnivel idiomá;coqueproponeunesquemaabstractodesoluciónparaelproblemapropuestoysóloentoncesseconcretaeneldominiopar;culardelproblema.

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 ...

NiveldeDominioSe contextualiza el esquemaanterior dentro del dominio deaplicación concretando condatosyfuncionesespecíficas

NivelIdiomáPcoSe crea un esquema funcionalque resuelve la familia deproblemas al que pertenece elproblemaplanteado

NiveldeLibreríaSe uElizan funciones generalesconunaltoniveldeabstracción

NiveldeAb

stracción

ReuPlizaciónTransversalaDominio

2JavaScriptcomoLenguajeFuncional

§  DefiniciónFuncionalporCasos§  DefiniciónporRecursión§  ExpresionesFuncionalesdeInvocaciónInmediataIIFE§  DefiniciónenOrdenSuperior§  Clausuras&RetencióndeVariables JavaScrip

uajeFun

Tallerd

ramaciónFunciona

@javiervelezreye17

JavaScriptcomoLenguajeFuncionalTallerdeProgramaciónFuncionalenJavaScript

Comoyahemoscomentado,losprocesosdeprogramaciónfuncionalconsistenesencialmenteen la definición de una colección de declaraciones funcionales que puedan adaptarse adis;ntosnivelesdeabstracciónyaplicarseconjugadamentepararesolverproblemasdeformadeclara;va. Para ar;cular estas tareas de definición el paradigma funcional ofrece unacoleccióndemecanismosesencialesquerevisamosenestecapítulo.

I.Introducción

TécnicasPF

PatronesPF

Elnivelde lenguajeestá formadopor la colección de mecanismosdeprogramaciónqueproporcionaellenguajedeformanaEva

NiveldeLenguaje

Las deficiencias que por suconcepción presenta el lenguajese deben suplir a este nivel poraplicación de técnicas y patronesde diseño que revisaremos enpróximoscapítulos

NivelIdiomáPcoApp App App

iciónpo

rcasos

recursividad

Expresione

Clausuras

RetenciónVariables

SobrecargaFun

iciónpo

rPatrone

JSFuncional

@javiervelezreye18

A.DefiniciónFuncionalporCasos

II.MecanismosdeProgramaciónFuncional

La forma más sencilla de definir una función es diseñando explícitamente la colección devaloresderetornoquedebedevolverparacadaposibleparámetrodeentrada.Aunqueestemecanismo parece poco flexible aisladamente, cuando se conjuga con otras formas dedefiniciónresultadeaplicaciónfrecuente.

La definición por casos se expresadeclarandoexplícitamenteelvalorquedebe devolver la función para cadaposible valor de los parámetros deentrada

function f (parámetros) { return caso-1 ? resultado-1 : caso-2 ? resultado-2 : resultado-defecto; }

El uso anidado del operadorcondicional permite expresar lospares caso-resultado como unaúnicaexpresiónderetorno

ÚnicaExpresión

EnumeraciónExplícitadecasos

function comparator(x) { return x > 0 ? 1 : x === 0 ? 0 : -1 ; }

function even(n) { return n % 2; }

Se uEliza el operador condicionalanidado para definir cada casofuncional

La definición mediante una únicaexpresión es el escenario mássencillodedefiniciónporcasos

@javiervelezreye19

B.DefiniciónporRecursión

Ladefinicióndefuncionesporrecursiónconsisteen la invocaciónde lapropia funcióncomopartedelprocesodedefinición.Elesquemadedefiniciónrecursivoseapoyaenelmecanismoanterior para dis;nguir entre casos base – aquéllos que devuelven un resultado final – deaquélloscasosrecursivos–dondeelvalorderetornovuelveainvocaralapropiafunció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 ; }

Loscasosbasesonelfinaldelprocesorecursivoysesuponensoluciones inmediatas aproblemassencillos

CasosbaseLos casos recursivos sediseñan invocando a lapropia función sobrevalores de parámetrosque convergen a loscasosbase

Casosrecursivos

Asegúrese de que cada resultadorecursivo converge a alguno de loscasosbase

II.RegladeconvergenciaI.RegladecoberturaAsegúrese de que todos los casosbasedelproblemahansido incluidosexplícitamente en la definición de lafunción

Para diseñar cada caso recursivoasumaquelafunciónpordefinirestáya defin ida para va lo res deparámetrosmáspróximosaloscasosbase

III.Regladeautodefinición

@javiervelezreye20

Enfuncióndecómoseexpresanloscasosrecursivosdeunafunciónpodemosdis;nguirentredos;posdesituaciones.Enlarecursióndirecta,loscasosrecursivosdelafunciónseexpresanen términos de llamadas a ella misma. En la recursión indirecta, la función invoca a otrafunciónquerecurresobrelaprimera.

RecursiónDirecta

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ónIndirecta

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 convergenhacialoscasosbasereduciendoeltamaño del problema en unaunidadacadapaso

Laconvergenciahacialoscasosbaseva incluyendo un operador denegación que se resuelven al llegaralcasobase

@javiervelezreye21

Dadoque la programación funcional no disponede estructuras de control de flujo, la únicaformade resolver problemas que requierenun computo itera;vo es expresarlas a par;r deunaformulaciónrecursiva.Aunquepuederesultarenprincipiomáscomplejo,laexpresividadfuncional aumenta con este ;po de expresiones. Además hay problemas que ;enen unaresolucióninherentementerecursiva.

ProblemadelasTorresdeHanoi

Moverdiscosdeunoenunoparadejarlosenlamisma posición de A en C usando B comoauxiliar. Los discos por encima de uno dadodebensersiempredemenortamañoqueéste.

@javiervelezreye22

C.ExpresionesFuncionaleseInvocaciónInmediata

Noenpocasocasiones lanecesidaddedefinirunafunciónserestringeaunsolousoqueserealiza a con;nuación de su definición. Si encerramos una definición de función entreparéntesisyaplicamosa laexpresión resultanteeloperadorde invocación– losparámetrosactuales a su vez entre parentesis y separados por comas – obtenemos una expresiónfuncionaldeinvocacióninmediataIIFE.

(function f (parámetros-formales) { <<cuerpo de declaración funcional>> })(parámetros-actuales);

La expresión funcional se invocadirectamente por aplicación de losparámetrosactuales

La definición funcional se encierraentreparéntesisparaconverErlaenunaexpresiónevaluable

ExpresiónFuncional InvocaciónInmediata

var cfg = (function config(user) { // getting config from DB return {...} })('jvelez');

Uncpicoejemplode IIFE sedacuandosepretendenrealizarcálculoscomplejosotareasqueseefectuaránunasolavezalolargodelcódigo

LaventajadeesteEpodeconstruccionesesquelafunciónseliberadelamemoriatrassuejecución

@javiervelezreye23

D.DefiniciónenOrdenSuperior

EnJavaScriptlasfuncionessonciudadanosdeprimerorden.Estoquieredecirqueatodoslosefectos no existe ningún;podediferencia entre una función y cualquier valor de otro;poprimi;vo. Esto permite a una función recibir otras funciones como parámetros o devolverfuncionescomoretorno.Estemecanismoseleconoceconelnombredeordensuperior.

FuncionescomoParámetrosaOtrasFunciones

El paso de funciones como parámetros a una funciónpermite que el comportamiento de ésta sea adaptada pormediodelainyeccióndecódigovarianteencadainvocación.Esta aproximación contrasta con la programación por ;posvariantespropiadelaorientaciónaobjetos.

FuncionescomoRetornodeOtrasFunciones

Lasfuncionessoncapacesdegenerardinámicamentefuncionesquedevuelvencomoresultado.Estoesdeespecial interés cuando la función devuelta es elresultado de transformar una función recibida comoargumento.Esteprocesojus;ficaelnombredeordensuperioryaqueseoperaconfuncionesgené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);

@javiervelezreye24

E.Clausuras&RetencióndeVariables

Las funciones que, por medio de los mecanismos de orden superior, devuelven funcionescomoresultadosepuedenexpresarentérminosdevariableslocalesoparámetrospresentesenelentornofuncionaldondesedefinen.Laretencióndevariableseselmecanismomedianteel cual dichas variables y parámetros sonmantenidos durante todo el ;empode vida de lafunciónderetorno.Este;podefuncionessedenominanclausuras.

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 deconstrucciónfuncionalquecapturadeformapermanenteunestadodeconfiguraciónquecondicionasucomportamiento

VariablesRetenidasAl extraer una función fuera de su ámbitoléxicodedefinición semanEeneel contextodevariablesyparámetrosquedichafunciónuEliza.

3TécnicasdeProgramaciónFuncional

§  Abstracción§  Encapsulación§  InmersiónporRecursiónyAcumulación§  EvaluaciónParcial§  ComposiciónFuncional&ComposiciónMonádica TécnicasdeProg

ramaciónFunciona

Tallerd

ramaciónFunciona

@javiervelezreye26

TécnicasdeProgramaciónFuncionalTallerdeProgramaciónFuncionalenJavaScript

Apar;rde losmecanismosqueofrece JavaScript como lenguajedeprogramación sepuedeescribirsoewarebiencentradoenelparadigmafuncional.Noobstante,paraelloesnecesarioconocerunacoleccióndetécnicasbásicasquedescribenformascanónicasdehacer frenteaproblemasrecurrentes.A lo largodeestecapítuloharemosunarevisiónde las técnicasmásrelevantes.

I.Introducción

Lastécnicasdeabstracciónpermitendefinirespecificacionesfuncionalescondiferentesgradosdegeneralidadyreu;lizacióntransversal

AbstracciónEnfuncionallaencapsulacióndeestadoesunmalavecesnecesarioyenmuchasocasionespuedereemplazarseporencapsulacióndecomportamiento

EncapsulaciónLastécnicasdeinmersiónsonunacon-jugacióndeabstracción,encapsulaciónyrecursividadparaobtenercontroldeflujodirigidopordatos

Inmersión

Laevaluaciónparcialpermiteevaluarunafunciónenvariasfasesreduciendopaula;namenteelnúmerodevariableslibres

EvaluaciónParcialLacomposiciónfuncionalpermitear;cularprocesosdesecuenciamientodefuncionesdefinidascomoexpresionesanalí;cas

ComposiciónFuncionalLatransformaciónmonádicapersigueadaptarfuncionesparaconver;rlasentransformacionespurasquesoportenprocesosdecomposición

TransformaciónMonádica

Lainversióndecontrolpermitepermutarentrelasarquitecturasfuncionalescentradasenlosdatosylascentradasenlastransformaciones

InversióndeControl

@javiervelezreye27

A.TécnicasdeAbstracción

II.TécnicasdeProgramaciónFuncional

Una de las técnica de programación funcionalmás comúnmente u;lizadas, en alineamientoconlosprincipiosdediseñopresentadosanteriormente,eslaabstracciónfuncional.Lastareasdeabstraccióndebenentendersecomounprocesodetransformaciónenelqueladefinicióndeunafunciónsereexpresaentérminosmásgeneralesparadarcoberturaaunabanicomásampliodeescenariosdeaplicación.Podemosdis;nguirtresdimensionesdeabstracción.

AbstracciónenAnchura

Suma convencional de dos nú-meros pasados como para-metros

add(x, y)

Combinamediante la función ctodos los parámetros a parErdeunodadoenposiciónp

reduceFrom(p, c)(x, y, …)

reduceFrom

Suma todos los parámetros dela función independientementedelaaridad

addAll(x, y, z, …)

addAll

Suma todos los parámetros delafunciónaparErdeaquélqueocupaunaposiciónp

add(p)(x, y, z, …)

addFromAbstracciónenComportamiento

AbstracciónenAlcance

@javiervelezreye28

B.TécnicasdeEncapsulación

Medianteelusodeclausurasylaretencióndevariablesesposiblecapturar,durantelafasedediseñooejecución,ciertainformaciónqueresultadeu;lidadparaadaptarelcomportamientode la funcióna lo largodel;empo.Esposibledis;nguirentreencapsulacióndeestadoydecomportamiento.

EncapsulacióndeEstado.PilaUndo

Lasvariablesquecapturanelestadoquedanretenidas dentro de la clausura lo quepermite arEcularmodelos de programaciónfuncionalqueevolucionanconelEempo

RetencióndeEstado

Ojo! Las funciones que dependen del estado son enrealidadunamalaprácEcadeprogramacióndeacuerdoalosprincipiosdediseñodelparadigma

DependenciadeEstado

items history

@javiervelezreye29

EncapsulacióndeComportamiento.PilaUndofunction 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 elhistórico las operaciones inversas para luegoinvocarlasdesdelaoperacióndeshacer

Enestecasolavariabledehistóricocapturala colección de operaciones inversas quepermiten deshacer las transacciones segúnhanidosucediendo

RetencióndeComportamiento

OperacionesInversas

items history

undopop pop

poppoppop

@javiervelezreye30

EncapsulacióndeComportamiento.Bus

sub x-y

x+yadd

El productor emite con laoperaciónsenduneventoalosreceptores

send('add', [3,2])

El consumidor ser eg i s t r a en l o seventosdeinterés

receive receive('add', +)

@javiervelezreye31

C.DiseñoporInmersión

Dado que la programación funcional no soporta los esquemas itera;vos propios de laprogramaciónimpera;va,esprecisoorientarloscálculosalarecurrenciaapoyándoseparaelloenparámetrosauxiliares.Lastécnicasdeinmersiónconjuganencapsulaciónyabstracciónconelusodeparámetrosauxiliares.Podemosdis;nguirdiferentes;posdeinmersió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ónporRecorrido

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); }

LainmersiónderecorridoexEendelafunción introduciendo un nuevoparámetrocuyopropósitoesllevarlacuenta del punto hasta el que se haavanzadoenelvector.

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 unaabstracción que quedasumergidadentrodelamásespecíficaporencapsulación

@javiervelezreye32

C.DiseñoporInmersión

Dado que la programación funcional no soporta los esquemas itera;vos propios de laprogramaciónimpera;va,esprecisoorientarloscálculosalarecurrenciaapoyándoseparaelloenparámetrosauxiliares.Lastécnicasdeinmersiónconjuganencapsulaciónyabstracciónconelusodeparámetrosauxiliares.Podemosdis;nguirdiferentes;posdeinmersión.

II.InmersiónporAcumulación

La acumulación se aplicaaquí para obtener recursi-vidad final buscando laeficienciaenmemoria

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ónpara consolidad un vector formadopor el subconjunto de los elementosparesdelvector

Reducción

TailRecursion

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

@javiervelezreye33

D.EvaluaciónParcial

El uso de clausuras permite transformar una función para que pueda evaluarse demaneraparcial resolviendo sólo algunos de sus parámetros. El resultado es una nueva función conmenosgradosdelibertaddondelosparametrosyaevaluadossefijanaunvalorconcretoyelrestoquedancomovariableslibres.

function color(rr) { return function (gg) { return function (bb) { return [rr, gg, bb] ; }; }; }

I.DimensionesContractuales

A diferencia de lo que ocurre en otrosparadigmas, el diseño funcional deabstracciones;enedosdimensionesdedefinición, la dimensión espacial y ladimensióntemporal.

En la dimensión temporalcada fase conduce a unaetapa de resolución parcialdeparámetros

La dimensión espacial vinculaconvencionalmente valores actualesaparámetros

Desde la fase 1 a la fase 2 seresuelve el parámetro rr yquedan dos dimensiones libresdemovimiento(gg,bb) II.ReducciónDimensional

Cada fase de aplicación temporal deparámetros conduce a una reduccióndimensionalenelespaciodelproblema.

rr = cc

color('cc')('a3')('45')

@javiervelezreye34

Elusodelaevaluaciónparcialpermitequeelprogramadorvayaresolviendodeformafaseadala evaluación de una función a medida que va disponiendo de los argumentos actualesnecesarios.Enestoscasos,eldiseñodelafuncióndebecuidarseparagaran;zarqueelordenenelquesedemandanlosparámetrosalolargodel;empocorrespondeconelesperadoenelcontextoprevistodeuso.

Ejemplo.EvaluaciónporFases

Se arEcula un proceso de construcción porfasesquepermiteinyectarlaspartesdeunaUri.EsteesquemarecuerdaalpatrónBuilderdeOOPperousandoúnicamentefunciones

var host = schema('http'); var port = host('foo.com'); var path = port(80); var uri = path('index.html'); uri();

Aunque la aplicación de esteesquema induce un estrictoorden en la resolución para-métrica permite resolver porfaseselprocesoconstrucEvoamedida que se dispone de losdatos

@javiervelezreye35

Otro escenario protogpico del uso de la evaluación parcial se da en la comunicación entrefuncionesproveedorasyclientes.Elproveedorresuelveparcialmenteunafunciónreduciendoasí el número de dimensiones y la entrega en respuesta a la demanda de un cliente queresolveráelrestodedimensionesconargumentosactualesensucesivasinvocaciones.Enestecaso, el diseño funcional debe fasearse teniendo en cuenta la intervención primera delproveedoryposteriordelcliente.

TransferenciaProveedor-Consumidor

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!'; } })();

Elproveedorresuelveparcialmenteunafunciónevalylaentregacomoresultadoalafuncióncliente

La función obtenida del proveedorpermite al cliente evaluar reglas queseapoyanenlasvariablesretenidas

rE ctx

function eval(rule) {}

Proveedor

RuleEngineRuleEngine(ctx)

Cliente

@javiervelezreye36

E.ComposiciónFuncional

Dado que en programación funcional las abstracciones sonmeras transformaciones que nopuedenar;cularunalgoritmosecuencial,esfrecuentemodelarelsecuenciamientoenbasealacomposición.Deestamanera,elvalorderetornodeuna funciónsirvedeentradapara lafunciónsubsiguiente.

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!!!') ) );

5 LacascadadecomposiciónfuncionalserecorreensenEdoinversoalnatural.Losdatoscomienzanporlafunciónmásinterna(clean)yatraviesanlacadenadecomposiciónascendentementehastalacima(count).Enelcapítulosiguienteestudiaremospatronesqueconducenaunalecturadescendentemásnatural

La organización composiEva de funcionesconduce a arquitecturas centradas en lastransformaciones que los datos atraviesan encascada

@javiervelezreye37

E.ComposiciónFuncional

Enocasioneslaformaenlaquesedefinenlasabstraccionesfuncionalesnoescompa;bleconlosprocesosdecomposición.Parapoderar;cularadecuadamentedichosprocesosdebemostenerencuentadosreglasdetransformaciónfuncionalquepuedesernecesarioaplicarparaconseguirfuncionescomposi;vas.

El Epo del parámetro de entrada de unafuncióndebesercompaEbleconelEpodelvalor de retorno devuelto por la funciónanterior para que la composición puedaarEcularseconéxito

II.CompaPbilidadRango-Dominio

I.DominioSimpleDado que una función f devuelve un únicovalorderetorno,elnúmerodeparámetrosqueaceptaunafuncióngcuandosecomponeconfdebe ser exactamente uno. ParamiEgar esteproblemaesposible encapsular los resultadosde f en una estructura de datos y/o resolvertodos los parámetros de g menos uno pormediodeevaluaciónparcial

U ElEpodesalidaTdebesercompaEbleconel Epo de entrada U. En términos OOPdiríamosqueTdebesersubEpodeU

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; }

@javiervelezreye38

F.TransformaciónMonádica

Eldiseñodefuncionesdebehacersegaran;zandolaausenciadeefectoscolateralesdemaneraquecadafunciónsólodependadesusparámetrosdeentrada.Sinembargo,enelmundoreales frecuente requerir que una función realice operaciones que dependan del entorno(dependenciasdeestado,operacionesdeE/S,etc.).Lastécnicasdetransformaciónmonádicagaran;zanlaausenciadeefectoscolateralesalavezqueconservanlacapacidadcomposi;va.

Supongamos que tenemos unalibrería de funciones matemáEcasde un solo parámetro que operancon números y devuelven unnúmero.PormoEvosdedepuraciónestas funciones emiten mensajes alaconsola

Dado que la traza por consola seconsidera un efecto colateralindeseable se transforman lasfuncionesenpurasparametrizandolatrazacomovaloranexodesalida

Ejemplo.MonadaEscritor

@javiervelezreye39

Ahora las funciones son puras pero han perdido sucapacidad composiEva puesto que incumplen laregla de compaEbilidad Rango-Dominio. Esnecesario, en primer lugar, crear una función unitque eleve valores unitarios desde el Epo simple(Number)alEpomonádico(valor+log)

Ahora podemos crear una función bind que permita componernuestras funciones anteriores sin necesidad de alterarlas. Estafunción recibeun valormonádico (entrada+ logacumulado) yunadenuestrasfunciones.Lafunciónbindprimerodesenvuelvelamonada,despuésaplicalafunciónpasadacomoparámetroyanexa la traza de la misma al log acumulado. Finalmentedevuelvelaestructuramonádicaconlosresultadosobtenidos

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; }

@javiervelezreye40

Con las funciones de transformación monádicaunit & bind hemos creado una solución paragaranEzar la composición funcional eliminandolosefectoscolateralesdetrazaporpantalla

bind( bind( unit(3), sqr ), neg );

{ value: 10, log: [ 'cuadrado', 'incremento'] }

ElvalorprimiEvo3,setransformaprimeroalEpomonádicoyluegosecomponeconlafunciónsqreincpormediodelaasistenciaqueproporcionalafunciónbind

@javiervelezreye41

ExistenmuchosEposdeefectoscolateralesquepuedenevitarse por medio de la aplicación de técnicas decomposición monádica. Dado que cada Epo de efectocolateral requiere una lógica unit y bind específica esbuenaideaexpresarestastécnicascomoobjetosdondeunitsecodifiquecomoconstructorybindcomométodomiembrodelprotoEpo

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áEcoesta operaEva resulta cómoda y naturaldebemosserconscientesdequeseapoyaenencapsulacióndeestado

@javiervelezreye42

G.InversióndeControl

Lasprogramaciónfuncionalpermitear;culardos;posdearquitecturascomplementarias.Lasarquitecturascentradasenlosdatosfijanunacoleccióndedatosdeentradayhacenatravesaren torno a ellos una colección de transformaciones funcionales. Ortogonalmente, lasarquitecturascentradasenlatransformaciónestablecenunacadenacomposi;vadefuncionesqueesatravesadapordiversascoleccionesdedatos.Lastécnicasdeinversióndecontrolsonunapasarelaparaconver;runesquemaarquitectónicoenelcontrarioyviceversa.

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

ArquitecturasCentradasenlosDatos

Lasarquitecturascentradasenlosdatosfijanunconjunto de datos y permiten realizartransformaciones pasadas como parámetros enordensuperior

@javiervelezreye43

G.InversióndeControl

Lasprogramaciónfuncionalpermitear;culardos;posdearquitecturascomplementarias.Lasarquitecturascentradasenlosdatosfijanunacoleccióndedatosdeentradayhacenatravesaren torno a ellos una colección de transformaciones funcionales. Ortogonalmente, lasarquitecturascentradasenlatransformaciónestablecenunacadenacomposi;vadefuncionesqueesatravesadapordiversascoleccionesdedatos.Lastécnicasdeinversióndecontrolsonunapasarelaparaconver;runesquemaarquitectónicoenelcontrarioyviceversa.ArquitecturasCentradasenlaTransformación

Lasarquitecturascentradasenlatransformaciónestablecen una cadena de composición detransformaciones funcionales por las queatraviesandisEntascoleccionesdedatos

clean words countS 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 patronesdedicados a establecer transformaciones paraconverEr arquitecturas centradas en los datos aarquitecturas centradas en transformación yviceversa

Javier.velez.reyes@gmail.com

TallerdeProgramaciónFuncionalenJavaScript

Enero2016

Taller de Programación Funcional en JavaScript

Software

Transcript of Taller de Programación Funcional en JavaScript

Introducción a la Programación en Javascript. Clase 1

Programación Web Unidad 4. Procesamiento del lado del cliente. Programación en Javascript.

Una introducción a Erlang - Programación Funcional AvanzadaErlang–concurrenciafuncional Funcional–evaluaciónambiciosa,sistemadetiposligeros. Recursión–explícitaydecola.

Charla congreso web introducción programación funcional en JavaScript

Tema 1: Introducción a la programación funcional.

Programación Funcional

Conceptos adicionales a la programación orientada a objetos con JavaScript

PROGRAMACIÓN ORIETADA A OBJETOS. 2 Introducción Paradigma: Ejemplo ilustrativo, enunciado modelo Programación imperativa Programación funcional

Programación lógica y funcional

02 python Programación orientada a objetos y funcional

La propiedad prototype en la programación orientada a objetos con JavaScript

Técnicas de Programación en Cliente Lenguaje JavaScript.

Unidad III Programación Funcional

El paradigma de programación funcional

PROGRAMACIÓN FUNCIONAL-todoparaalumnos

Manejo de los objetos en JavaScript para la programación orientada a objetos

Temas de “Programación funcional” (curso 2012–13)

Programación en JavaScript - Inicioweb202011.wikispaces.com/file/view/Manual+de+Javascript+I.pdfnecesidades que estaban surgiendo fue Java, que es un lenguaje de propósito general,

Programación funcional con haskell

Temas de “Programación funcional” (curso 2009–10)