Guía práctica sobre las callback functions

Como posiblemente ya sepas, las funciones son bloques de código re-utilizable. Los métodos también son funciones, pero con la particularidad de estar asociadas a un cierto data type.

A todos los tipos de funciones podemos pasarle parameters (o arguments) cuando los invocamos. Esos parámetros pueden ser de tipo string, number, etc, o pueden ser directamente otra función. Esa "otra función" se llama callback function. 

Una callback function es como una función que se queda expectante, como con un cartelito que dice "llámame, llámame!, pero sólo cuando se ejecute el evento que tengo delante".

Confieso que me costó una barbaridad entender ese concepto .

Sintaxis

Ejemplo con el método forEach

ForEach es un método característico del los arrays, que itera un array de principio a fin para extraer el valor que le pidamos. Este método acepta como parámetro una callback function. 

Lo que hace este método es barrer la array friends, y por cada elemento del array, llamará la función que le pasamos por parámetro. En nuestro caso, le hemos pedido que imprima la frase 'this is one friend', cosa que hará 5 veces (una por cada elemento del array). 

"por cada" = "for each"    

Hasta ahora no le hemos pasado ningún parámetro a nuestra callback function, pero acepta varios. 

1º El valor de cada elemento del array en cada repetición (Dustin, Will, ...)

2º El índice de cada elemento del array en cada repetición (0, 1, ...)

El orden es importante: el primer parámetro es el valor y el segundo el índice. Imprímelos luego como quieras en la consola, pero si no quieres sorpresas, respeta el orden de los parámetros.

No es necesario que definamos nuestra callback function dentro del parámetro de nuestro método, como ocurre en el ejemplo de arriba. También podríamos definirnos una función externa y luego pasársela a nuestro método por parámetro: 

Callback functions en acción

Vamos a hacer una pequeña app para poner en práctica lo visto. Sólo necesitaremos un archivo .html:

Y un archivo javascript al que vincularlo, que por ahora es un archivo en blanco.

1. Dentro del archivo HTML vamos a añadir un simple <ul> con una clase para poder acceder a él a través de javascript.

2. En el archivo sandbox.js nos creamos un array de gente.

Nuestro objetivo es imprimir cada elemento del array, tanto en las dev tools como en el navegador, como si fuera una lista.

Recuerda que por cada elemento del array estaremos pasando una callback function al método forEach. Para poder imprimir cada uno de los elementos, haremos que nuestra función cree una especie de plantilla HTML que se mostrará dentro de nuestro selector <ul>.

3. Añadimos el método forEach a nuestro array de gente, pasándole como callback function cada uno de los elementos del array, a los que llamaremos simplemente person. ¿Tiene sentido, no? Si todos los elementos forman un grupo (array) de gente (people) lo normal es que a cada uno de esos elementos lo llamemos person. 

Entonces, dentro de la función vamos a crear un elemento HTML (un <li>) para cada person. Para eso, antes del forEach nos creamos una variable llamada html y la inicializamos simplemente con unos backticks, porque esa variable es la que vamos a utilizar para insertar un template literal.

4. Ya dentro de la función, vamos a agregar esa variable a cada person (append). Para ello, asignamos el valor de la variable a la variable misma + un <li> que contendrá dentro cada person. Lo que ocurre aquí es que cada vez que se ejecute la callback function, se generará un bloque de código como el que acabamos de crear. Es decir, un <li> por cada person, lo que resultará en una lista de elementos. 

5. Hacemos un console.log de la variable para ver qué nos devuelve la consola.

Como ves, nada especial, nuestros <li> se imprimen en la consola sin mayor añadido.

Pero nosotros lo que queremos es mostrarlos en el navegador. ¡Vamos a ello!

Para eso, vamos a interactuar con el HTML y el javascript para poder sacar la información que necesitamos. 

6. Nos creamos una variable en el sandbox.js a la cual asignaremos el selector <ul> de nuestro HTML. Para eso, no tenemos más que seguir la estructura del querySelector:

const meaningfulVarName = document.querySelector('.CSSclass')

Llamémosla simplemente ul.

Existen muchas maneras de acceder a un elemento del archivo HTML. Esta es una de tantas. Como ves, estamos cogiendo el elemento por su clase de CSS. Podemos hacer esto porque la clase de CSS actúa como un banderín  para javascript, indicándole que puede utilizar dicho elemento haciendo referencia a él con la sintaxis de arriba (el querySelector). 

7. Lo único que nos queda por hacer el asignarle la propiedad innerHTML a nuestra variable ul para que renderice el contenido en el navegador. ¿Qué contenido? El de la variable html, así que ése es el nuevo valor que toma nuestra variable ul. 

Y ¡tachán! Ahora puedes ver la lista de elementos en tu navegador.