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

Guía de iniciación al data binding en Angular
¿Qué es el databinding?El databinding es la forma que tiene Angular para permitirnos mostrar contenido dinámico en lugar de estático (en inglés, hardcoded). Podríamos[...]
Cómo aprendí a programar cuando estaba «programada» para ser de letras
[tcb-script src="https://player.vimeo.com/api/player.js"][/tcb-script]A nadie le gusta su trabajo. Eso es lo que me decía a mí misma cuando conseguí mi primer[...]
Cómo construir un pop-up con vanilla JavaScript
¿Qué vamos a construir? Vamos a construir una ventana emergente, popup, overlay, dialog o como quieras llamarla, pero esos 3 nombres son[...]
Si crees que este post puede serle útil a alguien, por favor, ¡compártelo!:

Deja un comentario

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

Esta web utiliza cookies para asegurar que se da la mejor experiencia al usuario. Si continúas utilizando este sitio se asume que estás de acuerdo. más información

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

Cerrar