JavaScript Funcional

LimaJS - 21/03/2018 @Able

Transcript

1. JavaScript Funcional @lupomontero / LimaJS 21/03/2018 Fol m ?
2. 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
3. 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
4. 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; }
5. Principios de FP • Uso de Funciones Puras • Composición de Funciones / HOFs • Evitar estado cambiante (inmutabilidad) • Evitar el estado compartido
6. 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
7. HOFs const greetPart = greeting => name => `${greeting}, ${name}` const greetHello = greetPart('Hello') greetHello('Heidi') // => 'Hello, Heidi'
8. 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.'
9. Composición (React) const withFooProp = WrappedComponent => props => <WrappedComponent foo={2} {...props} /> const Bar = props => <div>{console.log(props)}</div>; const Baz = withFooProp(Bar) // augmented version of Bar const App = props => ( <div> <Baz baz={2} /> </div> );
10. Inmutabilidad const Bar = props => ( <div> <span>{props.foo}/{props.baz}</span> <button onClick={() => { props.foo = 'WTF'; }} >❤</button> </div> );
11. class Bar extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( <div> <span>{this.props.foo}/{this.props.baz}/{this.state.count}</span> <button onClick={() => { // this.state.count += 1; // WRONG!! this.setState(prevState => ({ count: prevState.count + 1 })); }} >❤</button> </div> ); } }
12. 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; };
13. 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 • ...
14. By the way... JavaScript es un lenguaje de ❤ funcional