🖖 Inicio

SERVICIOS

Salir

nochedía

Utilizas JavaScript y no te aprovechas de las High Order Functions?

400 palabras
2 minutos
October 18, 2019
blogjavascript

Si escribes en React o Gatsby ya las has utilizado, pero posiblemente no sepas todo el potencial que tienen

  1. HOC?
  2. HOCs que devuelven funciones

HOC?

Las HOC son literalmente funciones que aceptan y devuelven otras funciones

Sí, es una frase algo abstracta

Vamos a ver un ejemplo simple que está en el curso de css y Gatsby para hacer gradientes dinámicos (aquí)

js
setRgb([rgb[0].map((el, i) => el + newSteps[i]), rgb[1]])

Que simplificada para el ejemplo de aquí

js
const arr = [5, 6, 7]
const changes = [1, 1, 1]
const new_arr = arr.map((el, i) => el + changes[i])

En esta función lo que hacemos es coger todos los elementos de arr y sumarle su valor homónimo del array changes

Bien, pues esto mismo podríamos simplificarlo con una función

js
const arr = [5, 6, 7]
const changes = [1, 1, 1]
const add = (el, i) => el + changes[i]
const new_arr = arr.map((el, i) => add(el, i))

Y esto mismo en realidad lo podemos simplificar más

js
const arr = [5, 6, 7]
const changes = [1, 1, 1]
const add = (el, i) => el + changes[i]
const new_arr = arr.map(add)

Que no se si lo ves, pero en realidad estamos escribiendo lo mismo todo el rato

En la primera versión estamos definiendo una función anónima dentro de map()

En la segunda versión estamos poniéndole nombre a la función y sacándola fuera, aunque con extra de código superfluo

Esto lo eliminamos en la tercera versión

PERO, en los tres casos estamos utilizando una HOC

Nada nuevo bajo el sol

HOCs que devuelven funciones

Pero y qué pasa con las HOCs que devuelven funciones? De esas también tenemos?

No de serie, pero podemos tenerlas

En el ejemplo de arriba podemos definir una HOC que nos abstraiga aún más nuestro código

Qué quiero decir con esto?

Que tal y como está el código arriba, para leerlo y entenderlo, tener que leer arr.map puede ser un drama

Terrible

Apocalíptico

Y por qué? Porque para entender eso tenemos que saber qué significa .map(), y no tenemos porqué saberlo

Pues para solucionarlo y tener un código más entendible podemos hacer lo siguiente

js
const arr = [5, 6, 7]
const changes = [1, 1, 1]
const add = (el, i) => el + changes[i]
const update = a => a.map(add)
const new_arr = update(arr)

Y con esto utilizamos el HOC update() que lo único que hace es encapsular el map() y, sobre todo, dotar de semántica a la función, que ahora ya sabemos que está (update) actualizando el valor

El problema viene cuando queremos aplicar diferentes funciones a la vez

En este caso imaginemos que queremos aplicar dos veces el update

js
const arr = [5, 6, 7]
const changes = [1, 1, 1]
const add = (el, i) => el + changes[i]
const update = a => a.map(add)
const new_arr = update(update(arr))

Ahora imagínate que quieres hacerlo 10 veces

Bueno, ya ves dónde voy no?

Pues para esto tenemos el pipe que nos permite definir una función como producto de muchas funciones

En el caso anterior, imaginemos que queremos repetir 5 veces la función, haríamos lo siguiente

js
const arr = [5, 6, 7]
const changes = [1, 1, 1]
const add = (el, i) => el + changes[i]
const update = a => a.map(add)
const many_updates = pipe(update, update, update, update, update)
const new_arr = many_updates(arr)

Fantástico!

Pero ... qué es pipe()?

Bueno, no es nada, tenemos que definirla nosotros

js
const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x)

Leída de Eric Elliott aquí (aunque este no es su artículo), y que tienes que incluir en el código de arriba

Y todo esto del pipe no termina aquí, esto es potentísimo y de hecho desemboca en diseñar funciones sencillas para poder utilizarlas con pipe() y así simplificar y reutilizar más

Esto merecerá un curso!

Qué tal la entrada?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Newsletter de kuworking, un correo de tanto en cuanto

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]