hand Inicio

SERVICIOS

Salir

noched铆a

DESARROLLO WEB con
GATSBY y WORDPRESS

emoji Cursos [24]
emoji Themes Gatsby [5]
emoji Themes WordPress [2]
emoji Blog [83]
emoji Herramientas [11]

Qu茅 son las High Order Functions en JavaScript?

200 palabras
1 minutos
July 5, 2020
blogjavascript

La explicaci贸n es muy simple, funciones que devuelven funciones, pero su potencial se entiende con el concepto de currying

  1. HOC?
  2. Currying

HOC?

Las HOC son literalmente funciones que aceptan y devuelven otras funciones

La frase es algo abstracta, pero es literal, y dicho as铆 parece un concepto muy sencillo

Y lo parece porque lo es:

Vamos a suponer que tenemos un array al que queremos sumarle los valores de otro array

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

Bien, pues vamos a refactorizarlo con una funci贸n que se encargue de esto mismo

js
const sum_arrays = (arr1, arr2) => arr1.map((el, i) => el + arr2[i])
const arr = [5, 6, 7]
const changes = [1, 1, 1]
const new_arr = sum_arrays(arr, changes)
console.log(new_arr) // [6,7,8]
Ver en CodeSandBox

La funci贸n sum_arrays t茅cnicamente ya es una HOC ya que es una funci贸n que nos devuelve un map, que es otra funci贸n

Pero adem谩s es que map() es otra HOC ya que nos devuelve otra funci贸n

En realidad estamos escribiendo con HOCs todo el rato, entonces a qu茅 viene tanto misterio?

Currying

Bien, pues ahora vamos a volver a refactorizar el c贸digo anterior, pero en este caso lo hacemos porque queremos atomizar la funci贸n, no nos gusta que sum_arrays tenga que recibir 2 argumentos, queremos que reciba s贸lo uno

El razonamiento es porque as铆 vamos a poder reutilizar la funci贸n de forma mucho m谩s f谩cil

js
const sum_arrays = arr1 => arr2 => arr1.map((el, i) => el + arr2[i])
const arr = [5, 6, 7]
const changes = [1, 1, 1]
const new_arr = sum_arrays(arr)(changes)
console.log(new_arr) // [6,7,8]
Ver en CodeSandBox

Bien, ya tenemos nuestra funci贸n atomizada y el resultado es exactamente el mismo

La pregunta parece obvia: De qu茅 nos sirve expresar sum_arrays de este modo?

Pues porque nos da mucha versatilidad

Lo puedes ver en el siguiente ejemplo donde cambio la funci贸n del array por algo distinto como cambiar el estado de un usuario

js
const user_status = user => new_status => user.status = new_status
const user1 = {name: 'me', status: 'pending'}
const user2 = {name: 'myself', status: 'pending'}
const updateUser1 = user_status(user1)
const updateUser2 = user_status(user2)
updateUser1('valid')
updateUser2('delete')
console.log(user1) // {name: "me", status: "valid"}
console.log(user2) // {name: "myself", status: "delete"}
Ver en CodeSandBox

Es decir, con nuestra funci贸n atomizada podemos definir funciones m谩s sem谩nticas como updateUser1 y updateUser2 que se componen de la funci贸n m谩s abstracta user_status, y todo queda m谩s legible y m谩s bonito

A esto se le llama currying, y lo bueno de las HOCs es que precisamente son las que permiten escribir en currying

馃檵鈥嶁檪锔

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 馃檹

M谩s entradas

Privacidad
by kuworking.com
[ 2020 >> kuworking ]