JavaScript Funcional @lupomontero / LimaJS 21/03/2018 Fol m ? 

Qué es FP? Functional Programming is a programming paradigm, meaning that it is a way of thinking about software construction based on some fundamental, defining principles […] Fuente: https://medium.com/javascript-scene/master-the-javascript-interview-what- is-functional-programming-7f218c68b3a0#.xx2uha5ki 

Declarativo vs Imperativo Qué vs cómo… Recursión/abstracción de control de flujo vs iteración… Aplicación de args vs mutación de valores... Composición vs herencia 

Declarativo vs imperativo const intersection = (a, b) => a.filter(value => b.indexOf(value) > -1); function intersection(a, b) { var result = []; for (var i = 0; i < a.length; i++) { for (var j = 0; j < b.length; j++) { if (a[i] === b[j]) { result.push(a[i]); break; } } } return result; } 

Principios de FP ● Uso de Funciones Puras ● Composición de Funciones / HOFs ● Evitar estado cambiante (inmutabilidad) ● Evitar el estado compartido 

Funciones puras => transparencia referencial ● Dados los mismos inputs siempre retorna lo mismo ● No tiene efectos colaterales // Impura const time = () => Date.now(); time(); // => 1521674192729 time(); // => 1521674402875 // Pura const sum = (a, b) => (a + b); sum(2, 3); // => 5 sum(2, 3); // => 5 

HOFs const greetPart = greeting => name => `${greeting}, ${name}` const greetHello = greetPart('Hello') greetHello('Heidi') // => 'Hello, Heidi' 

Aplicación parcial const partial = (fun, ...args) => (...newArgs) => fun(...args.concat(newArgs)); const greeter = (greeting, separator, emphasis, name) => `${greeting}${separator}${name}${emphasis}`; const greetHello = partial(greeter, 'Hello', ', ', '.'); greetHello('Heidi'); // => 'Hello, Heidi.' 

Composición (React) const withFooProp = WrappedComponent => props => const Bar = props => ; const Baz = withFooProp(Bar) // augmented version of Bar const App = props => ( ); 

Inmutabilidad const Bar = props => ( ); 

class Bar extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( ); } } 

Evitar estado compartido function Foo(opts) { this.x = opts.x; } Foo.prototype.bar = function () { return this.x + 1; }; Foo.prototype.baz = function () { this.x = 0; }; 

FP vs OOP Ventajas FP (rama declarativa) ● Flexibilidad ● Predictabilidad ● Aislamiento/reusabilidad/testabil idad?? (pedacitos más chiquitos e independientes) ● Tiende a ser más conciso y expresivo Ventajas OOP (rama imperativa) ● Más estricto ● Modelo jerárquico intuitivo ● Patrones conocidos ● ... 

By the way... JavaScript es un lenguaje de ❤ funcional