Hola , en este tutorial quiero desmantelar que que cosas se esconden detrás de esta función.
Bien pero antes de pasar a entender hay que aclarar algunas preguntas como.
¿Qué es esta función?
Es tipo de funciones se les suele llamar HOC Higher-Order-function la cual es una función que puede tomar como parametro una función y retornar una función.
¿Cual es el trabajo de esta función?
En este caso la función wrapFetch tiene como objetivo agregar un poco más de funcionalidad al fetch común y el parámetro que recibe seria el tipo de fetch (el cual es una función) que estemos usando.
Por ejemplo si estuviéramos en node js (server):
Y si estuviéramos en el navegador:
De esta manera hemos puesto un wrapper a fetch el cual agrega un header y transforma el body en json.
Bien pero vamos a ver algunos conceptos que están dentro de esta función, los que mencionare serán:
- Callback
- Clousure
- Hof
Antes de empezar. Durante este tutorial estare utilizando un proyecto base con vite el cual tiene unas cuantas funciones que pueden ayudar ha hacer mas entretenido el tutorial. Puedes clonar el repositorio aqui.
Callback:
Una función callback es una función que se pasa a otra función como un argumento, para que luego pueda ser invocado desde la función externa para poder completar algún tipo de rutina o acción.
la función myFuntion es una función común y corriente que al pasarse a setTimeout este la ejecutara justo después de 3 segundos.
Claro también podríamos hacer lo siguiente:
Pero esto ya sería un función anónima . En javascript una función es un objeto y podemos guardarlo en variables. Los tipos básicos como:
- String,
- Number
- Boolean
pueden integrarse a la lógica del código sin necesidad de guardarlos en variables:
lo mismo podemos hacer con funciones:
Pero en este caso esto no tiene sentido a menos que se auto-ejecute inmediatamente al ser creada.
Los callbacks hacen un gran rol dentro de la programación asíncrona como en el caso anterior nuestro callback se agregara al Call Stack justo cuando pasen los 3 segundos sin interrumpir el hilo de ejecución.
Salida:
Podríamos seguir viendo los callbacks pero puede que quede muy amplio esto.
Clousures:
Javascript es muy guapo y una de las características que lo hace guapo son los clousures y ahora veraz por que.
¿Que son los clousures?
los clousures es una caracteristica de javascript que permiten a las funciones dentro de funciones tener acceso a su escope padre incluso antes de que este se haya cerrado.
Un ejemplo sencillo sería el siguiente:
Nuestra función counter tiene dos funciones dentro, las cuales aumenta la cantidad o disminuyen la cantidad respectivamente lo maravilloso de esto es que al ejecutarse esta función me retorna estas dos funciones.
Ahora podemos usar estas funciones para aumentar el contador. En otros lenguajes normalmente las variables locales solo están disponible al momento de la ejecución entonces sum y rest no tendrían acceso a count , pero este no es el caso de javascript al momento de la creación de las funciones guardan referencia de todas las variables de su alcance léxico.
¿Que es el alcance léxico?
Este vendría hacer el concepto de que un grupo anidado de funciones las funciones internas tienen acceso a las variables y otros recursos de su alcance principal.
En un clousure este alcance existe incluso al momento de ejecutar la función padre osea podemos retornar esas funciones, ejecutarlas después y aún así tener acceso a su alcance léxico.
Y para obtener el mismo resultado anterior podemos hacer lo siguiente:
lo cual sería equivalente a :
Salida:
Bien ahora volvamos a la función count. Ya podemos entender porque sum y rest pueden acceder a count, podemos verlo en acción agregando dos botones.
Salida:
Hof:
Ahora si pasamos a ver que es una Hof. Una hof no es nada más que funciones que hacen cosas con otras funciones ya sea recibiendo una función como parámetro (callback) o retornando una función.
Si bien normalmente podemos abstraer parte lógica a través de funciones.
Con una Higuer Order function podemos abstraer acciones y no solo valores.
Veamos que esta haciendo esta función
- Esta función recibe un parámetro el cual es una función (callback).
- El valor devuelto es una función anónima el cual recibe cualquier cantidad de argumentos y los retorna como un array. Esta función sera el nuevo “sum”.
- Antes de ejecutar la verdadera función imprimimos un mensaje.
- Ejecutamos la verdera función y obtenemos el resultado.
- Pero antes de entregar este resultado vamos mostrar los parámetros de entrada, el nombre de la función y el resultado.
- Ahora si retornamos el resultado.
Podemos decir que noise podría ser aquel hacker que implanta algo malicioso en su víctima y está obteniendo los datos sin que esta se de cuenta dé hecho podríamos plantearlo así.
Salida:
la suma se sigue haciendo pero ademas estamos imprimiendo algunas valores antes de la función, si bien esta función no es muy aplicado a la realidad podríamos ver un ejemplo que si.
El método map junto a otros métodos que facilitan el trabajo con arrays como los son reduce, filtero reduce,son funciones de alto nivel por la sencilla razón que reciben funciones como argumentos.
SI quisiéramos ver como este funciona seria de la siguiente manera:
En este caso map es independiente no esta ligado al objeto Array y lo que hace es recibir un arreglo y ejecutar el callback por cada elemento de este.
Bien, pero podemos un poco más allá esto, por ejemplo que pasaría si yo quiero reutilizar ese callback y aplicarlo a otros arrays.
Para eso he creado esta función que al pasarle un callback me devuelve una función que recibe un array el cual a su vez devuelve un arreglo pero pasado por map con el callback de la primera función. Pero, ¿en qué ayuda esto?.
Ahora hemos podido reutilizar la función para cualquier tipo de array, claro que aquí el ejemplo es muy sencillo. Ahora imaginemos que se quiere obtener todos los pares.
Ahora even nos va ayudar a poder obtener los pares de cualquier array de números. Podemos probar los métodos de la siguiente manera:
Salida:
Fantástico, pero se podría hacer un poco más divertido , puede que esto amountOne(even(nums))en algún momento nos llegue a confundir. Asi que crearemos una función que lo haga mas entendible.
Con esto lo que hacemos es tomar las funciones e ir aplicándolas de derecha a izquierda.
Salida:
Bien ahora si podemos volver a la primera función con todo lo suficiente para entenderlo.
WrapFetch es una función que recibe una función (el fetch original) y devuelve una función que recibe los mismos parámetros que esta, a diferencia que esta la función recibe un json en el body y devuelve un json y así ahorraría hacer este procedimiento en cada petición y ademas podría reutilizarlo tanto en el servidor como en el navegador.
Conclusiones:
- Cuando me hablan de una función anónima no es nada más que una función sin nombre.
- Clousures es una característica de javascript que le permite a las funciones acceder a las variables incluso después de que el escope en el que se ha declarado se cierre.
- Una hof es cualquier función que opera otras funciones ya sea recibiéndolas como parámetro o devolviéndolas.
- Un callback es una función que se pasa como parámetro a otra función para ser ejecutada dentro de la función externa para completar un cierto trabajo o rutina.
