El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Desarrolladores: Trucos semanales

Entendiendo y generando callbacks con JavaScript

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aprende los mejores trucos y tips, y descubre los conceptos básicos indispensable para todo desarrollador web, independientemente de tu experiencia. Si ya llevas desarrollando por años o si vienes del mundo del diseño y jamás has tocado una sola línea de código, todo lo que aprenderás con esta serie semanal de trucos serán una gran adición a tu actividad profesional y apuntalará tus habilidades como programador o desarrollador. Descubre desde increíbles consejos para que puedas tratar con tu cliente y saber cómo cobrar adecuadamente, hasta cuestiones técnicas claves para organizar y gestionar mejor tu tiempo y proyectos desarrollando.
06:19
  Añadir a marcadores

Transcripción

JavaScript es un lenguaje multifacético que, por su facilidad de uso e implementación, nos permite aprenderlo y usarlo rápidamente. Dentro de las múltiples características que posee, están los llamados callbacks, estas son funciones que se ejecutarán como consecuencia de alguna acción. Muy probablemente te hayas topado con este tipo de funciones, pues la gran mayoría de las funciones las poseen. Por ejemplo, cuando te comunicas con algún servicio remoto y esperas a que lleguen los datos. O, más sencillo aun, cuando con jQuery escuchas el clic de un botón y, después del clic, puedes reaccionar en consecuencia. Los callbacks no son métodos restrictivos a ciertos frameworks o librerías, puesto que puedes hacer que las funciones o métodos que estés creando tengan sus propios callbacks y, por tanto, puedes personalizar la respuesta que desees o esperar hasta que termine cierto proceso para poder continuar con el flujo de tu aplicación o, en su defecto, continuar con el proceso de esta, y cuando el resultado esté listo, poder usarlo sin afectar lo que estés haciendo. Cuando llegue el momento en el desarrollo de tu aplicación donde te preguntes, ¿quiero reaccionar ante tal cosa y no voy a usar eventos tradicionales? es cuando llegó el momento de usar callbacks. Venga, revisemos cómo crear y usar un par de estos. Para explicar el uso de los callbacks, tenemos aquí un ejercicio donde vamos a integrar, en JavaScript, este tipo de operaciones. Lo primero que tenemos aquí es un botón que va a invocar una función llamada hacerCalculos que se encuentra dentro del archivo app.js. Si accedemos a este archivo, aquí encontraremos el esqueleto de la función. Lo que tenemos que hacer primero, es definir la función que me va hacer el callback. En este caso, vamos a hacer una calculadora, entonces, voy a crear una función llamada calculadora, function calculadora. Y, hasta aquí, todo normal, pero ¿cuál es el detalle? La calculadora necesita datos para funcionar, entonces, tendrá que recibir un datoA y después tendrá que recibir un datoB para hacer una operación con dos números. Ahora, acto seguido, tenemos que declarar el callback que va a estar utilizando, es decir, con qué va a responder. Entonces, primero, voy a crear un callback para hacer la suma. En este caso, yo le pondré de nombre callback_suma, así, nada más y, aquí abajo, voy a escribir también el nombre del callback que voy a utilizar. Abro y cierro paréntesis. De esta manera, ya tengo atada la respuesta, sé que esta función va a retornar un valor a través de un callback, y, de hecho, cuando lo probamos vemos cómo me describe como si fuera un callback. Entonces, aquí adentro, simplemente vamos a ejecutar nuestra operación de datoA + datoB. Listo, ya tenemos definida una función que regresa un callback, pero cómo hacemos uso de ello. Bueno, para poder hacer, vamos a la función llamada hacerCalculos y, en medio de los paréntesis, vamos a invocar a esta operación de calculadora. Pero, obviamente, si lo hacemos aquí va a perder un poco el sentido, con lo cual, tendremos que hacer la invocación directamente en esta parte, así que, dentro del cuerpo de la función hacerCalculos, es dónde lo vamos a invocar, así que estaremos llamando la función calculadora. Esta función, como vemos, recibe tres parámetros: un datoA, un datoB y un callback. Vamos a definir el primer datoA, como un número 12, posterior a esto definamos el datoB, como un número 4 y, después de esto, hay que definir un callback. Obviamente, lo que le vamos a enviar va a ser una función porque tenemos que reaccionar en consecuencia, entonces, tendremos que escribir aquí una función. Vamos a escribir function, abrimos y cerramos paréntesis y abrimos y cerramos llaves. Hay que tener cuidado con algo, porque aquí, es dónde va a recibir el dato. Es decir, aquí la comunicación viene directamente de esta función y, se inyecta a esta parte, entonces, lo que va a inyectar es el resultado, así que yo aqui tengo que recibir ese valor, lo voy a poner como "res" de response o respuesta. En teoría, nosotros estamos aquí definiendo una función anónima. Tú puedes definir una función aparte si quieres y solamente invocarla. Y ahora sí, vamos a invocar aquí nosotros un console.log para averiguar cuál fue la respuesta. ¿Se te hacen familiares estas maneras en cómo están escritas estas funciones? Generalmente, declaras muchas funciones anónimas cuando trabajas con JavaScript, bueno, esos son los callbacks y así se declara. Si deseas, puedes acceder a las librerías de donde comúnmente invocas callbacks para que puedas ver que la estructura es muy similar. Así que, ahora actualizamos, pulsamos el botón de calcular y me sale la respuesta, "16". Lo interesante también, es que puedo hacer más callbacks. Por ejemplo, en este caso, quiero hacer un callback de resta, lo único que voy a hacer va a ser agregar aquí otro elemento que sea callback_resta. Voy a duplicar esta línea, porque va a ser exactamente lo mismo, solamente tengo que adaptar la operación que estaremos utilizando y el nombre del callback. Así, ahora, cada vez que nosotros vayamos a ocuparlo, también podemos definir qué hacer con el tercer parámetro. Estamos de acuerdo que este es el parámetro uno, datoA, parámetro dos, datoB y, todo esto, es el parámetro tres, que es el callback de la suma. Entonces, aquí, vamos a agregar una nueva función donde, dicha función, también va a recibir un parámetro, le vamos a llamar igual response, pero es una respuesta a esta función y hagamos lo mismo, vamos a mandar a imprimir en pantalla. Pero, para poder dividirlas, vamos a agregar primero, este espacio, donde nosotros diremos, esta es la suma y esta es la resta. Así, entonces, vamos a probarlo. Actualizamos, ejecutamos y vemos cómo ya tenemos las dos operaciones. Aquí, también puedes identificar algo. Primero la suma y después la resta, quiere decir que con los callbacks, cuando se ejecutan, primero, se ejecuta este callback y, hasta que no termina de ejecutarse la invocación de este callback, no ejecuta la siguiente, entonces lleva un orden y nos permite, también, controlar los flujos de una aplicación. Este tipo de métodos te puede ser muy usable y es muy recomendado también que lo implementes en tus desarrollos