¿Qué son las HOF's?

Antes de poder aprender que es una HOF, debemos sabes que es una clousure , aunque básicamente es una propiedad de ámbitos léxicos estáticos que te permite usar variables dentro de una función que normalmente retorna otra función y dentro de ella usa una variable o más variables de la función padre como el siguiente ejemplo:

Debounce tiene por parametros un callback y wait, luego crea una variable timer y luego retorna una function anonima que ejectuara el callback luego que pase el tiempo de wait

      
        
      
      function debounce(callback, wait) {
    let timer = null;
    return function (...args) {
        timer = setTimeout(() => callback(...args), wait)
    }
}

const search = debounce(fetchAPI, 1000)
...
    

En este ejemplo lo que hacemos es que luego de ejecutar debounce este se va a eliminar del call stack y esto hace que toda su memoria dentro también lo haga exceptuando lo que retorne la función que en este caso es otra función, pero ahora cuando usemos la otra función que almacenemos y se invoque entonces va a mirar en memoria donde esta timer, primero va a buscar en el scope local al no encontrarla, luego buscara en el scope global, y tampoco lo encontrara entonces ¿Dónde va a buscar 🤔? (si no encuentra ninguna referencia de entonces daría un error), pues en el scope clousure es decir dentro de la referencia de sí misma. entonces ahí puede modificarla y iniciar el setTimeout, otra manera de ver las clousures con como un cofre que se hace cuando una función que está dentro de otra usa alguna variable de la función padre, automáticamente esta se podrá en el cofre de la función hija y cuando se ejecute se lo llevara para leerla y modificarla.

Luego de una pequeña explicación de clousures ahora si podemos ver que es una HOF, estas son las iniciales de High Order Function (Función de Orden Superior), aunque bueno la definición no queda clara sobre que es, y una defincion sencilla podria ser: “Son funciones que operan otras funciones” ( Eloquent Jascript ), esto significa que puede ser pasadas como parámetro y que puede retornar otras funciones esto con el fin de poder reutilizar lógica de funciones en otras funciones, esto en la práctica es un map, filter y un reduce, esto es demotrable haciendo un map desde cero.

      
        
      
      const map = (callback, array) => {
  const newArray = []
  for (let index = 0; index < array.length; index++) {
    newArray[index] = callback(array[index], index, array)
  }
  return newArray
}

const doubles = map((number) => number * 2, [1, 2, 3, 4, 5])
// [2, 4, 6, 8, 10]
    

Aquí vemos que el map recibe una función que va a transformar un array según lo que haga aquella función, esto es una HOF, pero podemos ver también otro tipo de HOF que te permite aumentar la reutilización de las funciones es la siguiente, donde vamos a seguir con el ejemplo del map con algunas modificaciones en su implementación.

El map ahora lo que hace es recibir una funcion y luego retorna otra funcion que recibe el array que va a ser modificada

      
        
      
      const map = (callback) => {
  return (array) => {
    const newArray = []
    for (let index = 0; index < array.length; index++) {
      newArray[index] = callback(array[index], index, array)
    }
    return newArray
  }
}
    

Listo, puede parecer lo mismo, pero ahora podemos reutilizar un método

      
        
      
      const getDoubles = map((number) => number * 2)

getDoubles([1, 2, 3, 4, 5])
// [2, 4, 6, 8, 10]
    

como vemos ahora la función no está ligada al array, por lo cual podemos reusar getDoubles con otros array’s, ahora este no es un ejemplo muy práctico, pero si quisiéramos traer todos los id’s de una lista de usuarios y de imágenes, podríamos hacerlo fácilmente.

      
        
      
      const getIds = map(any => any.id)
...

const usersIds = getIds(usersList)
const imagesIds = getIds(imagesList)
    

Ahora estamos reusando la funcionalidad de una función para distintas listas. Listo has aprendido que con las HOF’s y ya puede tener una idea de como usarla en tus proyectos