portada callback functions

Guía práctica sobre las callback functions

Última actualización:

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 (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. 

Sintaxis

const myFunct = (myCallbackFunct) => { // do something here let value = 30; myCallbackFunct(value); }; myFunct(value => { // do something console.log(value); }); // 30

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. 

const friends = ['Dustin', 'Will', 'Max', 'Mike', 'El']; friends.forEach(() => { console.log('this is one friend'); }); // 5 this is one friend

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. 😉

const friends = ['Dustin', 'Will', 'Max', 'Mike', 'El']; friends.forEach((person, index) => { console.log(index, person); }); // 0 "Dustin" // 1 "Will" // 2 "Max" // 3 "Mike" // 4 "El"

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: 

const friends = ['Dustin', 'Will', 'Max', 'Mike', 'El']; const logFriends = (person, index) => { console.log(index, person); } friends.forEach(logFriends); // 0 "Dustin" // 1 "Will" // 2 "Max" // 3 "Mike" // 4 "El"

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:

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Functions</title> </head> <body> <h3>Callback functions</h3> <script src="sandbox.js"></script> </body> </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.

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Functions</title> </head> <body> <h3>Callback functions</h3> <ul class="people"></ul> <script src="sandbox.js"></script> </body> </html>

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.

const people = ['Dustin', 'Mike', 'Nancy', 'Max', 'Joyce', 'Jim']; let html = ``; people.forEach(person => { html += `<li>${person}</li>`; }) console.log(html);

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

html output

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. 

const people = ['Dustin', 'Mike', 'Nancy', 'Max', 'Joyce', 'Jim']; const ul = document.querySelector('.people'); let html = ``; people.forEach(person => { html += `<li>${person}</li>`; }) console.log(html); ul.innerHTML = html;

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

callback functions con forEach

THE END!

¡Y con esto terminamos nuestro repaso a a las callback functions! Espero que hayas aprendido algo nuevo 😊.  Si te queda alguna duda, ¡nos vemos en los comentarios!

Y si crees que este post puede serle útil a alguien, ¡compártelo!

Otros artículos que pueden interesarte

Días del 353 al 386
Objetivos versus realidad Y nuevamente, llegó otro día clave. Llegó…y pasó. El pasado 4 de marzo este Reto Computer Geek[...]
Proyecto MeteoApp | Parte #1
¿Qué vamos a construir? Vamos a construir a una app para buscar la predicción meteorológica en cualquier ciudad del mundo,[...]
Días del 2 al 4
"Si buscas resultados distintos no hagas siempre lo mismo" - Albert Einstein Estos días estoy aprendiendo a hacer loops en[...]

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Como toda web legal que se precie, utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestro sitio web. Si continúas utilizando este sitio asumiremos que estás de acuerdo. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar