67 lines
2.7 KiB
Markdown
67 lines
2.7 KiB
Markdown
|
---
|
|||
|
title: Function Composition
|
|||
|
localeTitle: Composición de funciones
|
|||
|
---
## Composición de funciones
|
|||
|
|
|||
|
La composición de funciones es la aplicación puntual de una función al resultado de otra. Los desarrolladores lo hacen de forma manual todos los días cuando el nido funciona:
|
|||
|
|
|||
|
```javascript
|
|||
|
compose = (fn1, fn2) => value => fn2(fn1(value))
|
|||
|
```
|
|||
|
|
|||
|
Pero esto es difícil de leer. Hay una mejor manera de utilizar la función de composición. En lugar de leerlos de adentro hacia afuera:
|
|||
|
|
|||
|
```javascript
|
|||
|
add2AndSquare = (n) => square(add2(n))
|
|||
|
```
|
|||
|
|
|||
|
Podemos usar una función de orden superior para encadenarlos de una manera ordenada.
|
|||
|
|
|||
|
```javascript
|
|||
|
add2AndSquare = compose( add2, square)
|
|||
|
```
|
|||
|
|
|||
|
Una implementación simple de componer sería:
|
|||
|
|
|||
|
```javascript
|
|||
|
compose = (f1, f2) => value => f2( f1(value) );
|
|||
|
```
|
|||
|
|
|||
|
Para obtener aún más flexibilidad podemos usar la función reduceRight:
|
|||
|
|
|||
|
```javascript
|
|||
|
compose = (...fns) => (initialVal) => fns.reduceRight((val, fn) => fn(val), initialVal);
|
|||
|
```
|
|||
|
|
|||
|
La lectura de composición de izquierda a derecha permite un encadenamiento claro de las funciones de orden superior. Los ejemplos del mundo real están agregando autenticaciones, registro y propiedades de contexto. Es una técnica que permite la reutilización en el nivel más alto. Aquí hay algunos ejemplos de cómo usarlo:
|
|||
|
|
|||
|
```javascript
|
|||
|
// example
|
|||
|
const add2 = (n) => n + 2;
|
|||
|
const times2 = (n) => n * 2;
|
|||
|
const times2add2 = compose(add2, times2);
|
|||
|
const add6 = compose(add2, add2, add2);
|
|||
|
|
|||
|
times2add2(2); // 6
|
|||
|
add2tiems2(2); // 8
|
|||
|
add6(2); // 8
|
|||
|
```
|
|||
|
|
|||
|
Podría pensar que esta es una programación funcional avanzada y no es relevante para la programación de frontend. Pero también es útil en aplicaciones de una sola página. Por ejemplo, puede agregar comportamiento a un componente React utilizando componentes de orden superior:
|
|||
|
|
|||
|
```javascript
|
|||
|
function logProps(InputComponent) {
|
|||
|
InputComponent.prototype.componentWillReceiveProps = function(nextProps) {
|
|||
|
console.log('Current props: ', this.props);
|
|||
|
console.log('Next props: ', nextProps);
|
|||
|
};
|
|||
|
return InputComponent;
|
|||
|
}
|
|||
|
|
|||
|
// EnhancedComponent will log whenever props are received
|
|||
|
const EnhancedComponent = logProps(InputComponent);
|
|||
|
```
|
|||
|
|
|||
|
En conclusión, la composición de funciones permite la reutilización de la funcionalidad a un nivel muy alto. Si las funciones están bien estructuradas, los desarrolladores pueden crear nuevos comportamientos basados en el comportamiento existente.
|
|||
|
|
|||
|
También aumenta la legibilidad de las implementaciones. En lugar de funciones de anidamiento, puede borrar las funciones de la cadena y crear funciones de orden superior con nombres significativos.
|