Los callbacks de JavaScript

Clase 25 de 51 • Fundamentos de JavaScript 2017

Resumen

JavaScript cuando ejecuta código lo hace de manera síncrona, pero una forma que tiene de ejecutar código asíncrono es con las funciones llamadas “Callbacks”
Éstas se ejecutan y nos devuelven el proceso, generalmente después de algún evento de tiempo, al completarse un request o al terminar de leer un archivo.

Recuerda:
-El tiempo que le demos a los procesos es un tiempo mínimo. JavaScript puede no respetarlos, todo depende del peso de las tareas que tengamos en la cola de ejecución.
-Para evitar los cuellos de botella en los procesos y delega tareas pesadas y con mucho tiempo de ejecución a otros microservicios.

David Santiago González Ramos

student•

Comparto un enlace sobre el Callback Hell y cómo evitarlo:

Juan Carlos Correa Herrera

student•

Muy bueno!

Ana Maria Cubides Acosta

student•

gracias, excelente articulo, para complementar la lección!!!

Rolin Azmitia

student•

Entonces, para resumir un poquito:
Un callback es una función que se pasa como parámetro a otra función, y la callback sólo se ejecuta cuando la función primordial/padre se ejecuta.
Ejemplo:

function salute(fullName){
	console.log("Hola "+fullName)
}
/* Esta es la funcion callback, porque depende que la funcion
* getName() se ejecute primero, para poder tener los parametros
* necesarios Y ser invocada
*/ 


function getName(first, last, callback){ 
	var fullName = first + " " + last
	
	callback(fullName)
}
/* Aqui, tenemos a la funcion "padre" de la cual depende la 
*  callback para ser ejecutada, lo que hace es recibir 3 
* parametros: "first" que es el primer nombre, "last" que seria 
* el apellido, y "callback" que es el nombre de la funcion que sera
* nuestro callback, como son parametros no es necesario que 
* se llame callback, es solo por motivos ilustrativos
*/

getName("Rolin", "Azmitia", salute) // Imprime: "Hola Rolin Azmitia"

Eso sería un ejemplo muy básico de que es y como se aplica una callback function en JS, pero espero sea de ayuda para quienes cuesta entender 😉

José Alexis Pérez Olivares

student•

Me lo dejaste más claro así (Y)

Joaquin Garcia Real Joya

student•

Los** callbacks** son un tema un poco complejo, pero bien explicados pueden ayudarte a mejorar tu código.

En Javascript, las funciones son objetos de primera clase, esto es, que las funciones son del tipo objeto y pueden ser usadas como cualquier otro objeto en Javascript (Strings, Arrays, Numeros, etc).

Así que por el simple hecho de ser objetos, las funciones pueden ser almacenadas en variables, pueden ser argumentos de otras funciones, pueden ser creadas dentro de funciones y pueden retornarse desde las funciones.

Por ser objetos de primera clase, podemos pasar una función como argumento y para después ejecutarla o retornarla para ser ejecutada después.

En principio, de esto se tratan los callbacks en Javascript.

Que es un Callback o un Callback Function?

Un callback o callback function, conocido también como high-order function, son funciones que son pasadas como parámetro en otra función(llamemos esta funcionPadre), y el callback function es llamada o ejecutada dentro de la funcionPadre.

Ejemplo:

var friends = ["Mike", "Stacy", "Andy", "Rick"]; friends.forEach(function (eachName, index){ console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick });

En este ejemplo, nosotros pasamos como parámetro una función anónima (una función sin nombre) a el método forEach. Esto en teoría es un callback.

O aún más sencillo, un callback es una función que se ejecutará después, cuándo otra función haya terminado de ejecutarse, de ahí el nombre callback.

Ahora les mostrare un ejemplo más claro de como implementar callback en un día cotidiano:

`//Este es un simple creador de gatos que hace console.log de algunas frases

//Además de que pasaremos el método o función ‘catCreator’ como callback en la función de abajo

//El callback, que es el último parámetro de la función ‘getCatInfo’, será la función ‘catCreator’, que definimos arriba

function getCatInfo(name, age, color1, color2, callback) {
var fullColor = color1 + " and " + color2;

//Siempre es bueno veficar que nuestros callback sean una función, justo como lo hago abajo

if(typeof callback === “function”) {

//Executamos el callback y pasamos le pasamos los parámetro

callback(name, age, fullColor);
}
}`

`//Y aquí simplemente llamamos a la función ‘getCatInfo’ y pasamos los atributos del gato y la función ‘catCreator’ como callback

getCatInfo(‘Catatita’, 15, “white”, “brown”, catCreator)

//Output

“Catatita is your new cat”
“she has 15 years old”
“and she’s white and brown”
“A cat like Catatita, even thoght she’s 15 years old, and with his increadible white and brown color, she’s a lovely cat”

*/
`
Como la función ‘getCatInfo’ solo está manejando datos algunos datos sencillos, le podemos pasar cualquier otro callback, por ejemplo:

`function catAttributes(catName, age, color){
console.log('Cat Name: ${name}, Cat Age: ${age}, Cat Color: ${color} ')
}

getCatInfo(‘Catatita’, 15, “white”, “brown”, catAttributes)

//Output
/*
"Cat Name: CodePen, Cat Age: 15, Cat Color: white and brown "
*/`

Como pueden ver, llamamos la misma función ‘getCatInfo’ y pasamos otra función y pudo realizar otra tarea totalmente diferente.

Como pueden ver hay muchas tareas que podemos realizar sin utilizar tanto código, los ejemplos de arriba fueron sencillos, pero bien utilizados los callbacks pueden ayudarnos a mantener nuestro código más limpio, consistente y escalable.

A pesar de tener problemas como el callback hell, pero esto no es tan común de verlo en el fronted, (y si pasa tenemos las promesas o los generadores), pero si en node.js.

También es importante aclarar que los callbacks nos ayudan a tener un mejor control sobre las funciones que escribimos y cuando queremos que estas se ejecuten.

De igual manera les explico muy rápido y no con código, porque los callbacks nos pueden y nos ayudan bastante.

Imaginemos que tenemos un robot que nos ayuda con las tareas del hogar. A este robot le asignamos un par de tareas, tales como: pedir una pizza, limpiar el piso, lavar las ventas y planchar.

En este caso como nuestro robot no es muy hábil, cuando pida la pizza esperará la media hora hasta que esta llegue y pueda continuar con las demás tareas(Callbacks sincrónos). Esto atrasaría las demás tareas bastante y sería una perdida de tiempo total.

Pero si en cambio le enseñamos a nuestro robot a no esperar por este tipo de tareas en donde no tiene nada que hacer hasta que se terminen para pasar a la siguiente, podremos tener un robot mucho más eficiente(Callbacks asincrónos).

Esto en javascrip, como ejemplo sería el de un botón que queremos que un usuario interactué con el, si no lo hacemos con código asincróno, todas las demás funciones tendrían que esperar hasta que esto suceda! Por esto son tan importantes los callbacks en javascript.

Espero este pequeño aporte les ayude a entender un poco más los callbacks, si no les quedo bien claro del todo.

Les dejo una serie de recursos a los que pueden acceder para tener más información sobre como funcionan los callbacks:

Videos:

What is a callback? ()

Callback Functions in JavaScript ()

Higher-order functions - Part 1 of Functional Programming in JavaScript ()

Handling DOM Events with Callbacks ()

Javascript Callbacks and asynchronous Explained ()

Artículos:

Callbacks in Javascrip ()

JavaScript Callbacks Explained Using Minions ()

Javascript- from callbacks to async/awit ()

Understand JavaScript Callback Functions and Use Them ()

JavaScript: What the heck is a Callback? ()

Victor Hugo Roman Ruiz

student•

Excelente aportación, muchas gracias!!

José Rubial

student•

en la explicacion de los gatos, cual es la diferencia de mandar a catCreator como parametro y despues llamarlo, a llamarlo directamente en esa linea pasando los parametros y ya? ,tal y como llamarias funciones anidadas en cualquier otro lenguaje

Jose Manuel Montaño Saenz

student•

Vengo del futuro, entren al cap “que son y como se implementan el callbacks en…” y "eliminando el callback hell usando promesas…"
hay te explicaran de manera mas sencilla los callbacks, promesas, ejecuciones asincronas y sincronas, etc… lo recomiendo.

José de Jesús Uscanga Molina

student•

No estoy de acuerdo en lo que dice Sasha en el minuto 9:43 , “El navegador no puede leer archivos”, si se puede usando el constructor FileReader

let reader = new FileReader()
reader.readAsText(file)

Freddy Contreras

student•

Interesante, habia programado esto antes en Js pero sin saber exactamente como funcionaba, y ahora entiendo un poco porque no funcionaba correctamente mi código.

Alexis Antonio Moraga Gallardo

student•

Hola les comparto mi repositorio en GitHub con el avance del curso

Repositorio

en el estan los ejercicios realizados en clases comentados ademas de mis notas personales

/*Ejecutar funciones de forma asincrona
*/

setTimeout(function callback(){//01 usamos la funcion setTimeout y le pasamos como callback una funcion llamada callback
  console.log(`ya pasaron 3 segundo`)
},3000)

console.log(`Hola`)

// =========================Ejemplo 02=========================
setTimeout(function callback(){//01 usamos la funcion setTimeout y le pasamos como callback una funcion llamada callback
  console.log(`A`)
},0)

console.log(`B`)//02

// =========================Ejemplo 03=========================
setTimeout(function callback(){//01 usamos la funcion setTimeout y le pasamos como callback una funcion llamada callback
  console.log(`A`)
},1000)

for (var i = 0; i < 1999999999; i++);// 02
//usamos un for muy largo para trabar la pila de ejecucion


console.log(`B`)//03
 /*Por que se ejecuta primero el mensaje b y despues el a?
esto sucede debido a que javascript ejecuta el codigo de manera sincrona, con lo cual lo primero que entra a la pila
es la funcion setTimeout, esta es enviada al navegador, este resuelve el tiempo de espera, y una vez cumplido el tiempo
de espera lo añade a la cola de ejecucion

Mientras esto sucede javascript continua con la siguiente instruccion, y una vez terminadas las tareas pendientes en la pila
javascript revisa la cola de ejecucion entregada por el navegador para ser procesada nuevamente en la pila de ejecucion

es por esto que aunque le pasemos 0 al setTimeout este se ejecuta despues de el mensaje b

pero que pasa si como en el ejemplo 3 tenemos una parte del codigo que traba la ejecucion

en este caso ocurre lo mismo que en el anterior, primero se nos mostrara el mensaje b y luego el a
-> en este jemplo lo primero en cargarse es el setTimeout, el cual es delegado al navegador,
-> posteriora esto pasa con el cilo for
-> luego se ejecuta el console.log con el mensaje b
->Finalmente javascript revisa la ola de ejecucion del navegador y ejecuta la funcion callback con el mensaje a

en este ejemplo en particular el ciclo for traba la pila de ejecucion, con lo cual apesar de estar cumplido el tiempo del
setTimeout este no se ejecutara mientras la pila de ejecucion no este limpio, por lo que tiene que esperar
que termine el ciclo y luego el console.log con el mensaje b antes de poder ejecutarse, apesar de estar su tiempo ya cumplido




Que es un callback
->un callback es una funcion, que le pasamos como parametro a otra funcion, esta segunda funcion, o calback solo se ejecutara
cuabdi la funcion padre se ejecute


 */

Andrés Madrigal

student•

Duda: para evitar el callbackhell hay que modular de tal manera que se resuelva 1 problema a la vez. Agregando delay a las funciones se permite poder ordenar el tiempo en el que se ejecutara los modulos/scripts de nuestra pagina, si se hace ordenando según la prioridad y su peso (de mas ligero a mas pesado) se tendrá los resultados mas óptimos.

Alejo Vera

student•

Hola. Vengo del futuro, y para los que no tienen conocimientos previos, y desconocen lo que es asíncrono, callbacks, les recomiendo adelantarse a los videos de Leonidas (a partir del 28), que les deja los conceptos nuevos mucho más claros para después retomar estos. A seguir estudiando!! 😃

Alejo Vera

student•

SI, porfavor, vienen muy bien tus videos antes de arrancar

Iván Toro

student•

De esta manera, cuando se utiliza un setTimeout() no significa que el callback se ejecutara en x tiempo, significa que se ejecutara en mínimo x tiempo.

Fernando Barahona

student•

El video que dejo @animepowa en el video anterior esta tambien excelente para esto

Fernando Barahona

student•

EL video que linkeo en el video anterior explica esto excelente

Fernando Barahona

student•

El video que dejo @animepowa en el video anterior explica esto excelente

Joel Eduardo Ordoñez Martinez

student•

los callback pueden retornar valores?

Diego Forero

Team Platzi•

Si, un callback es un función que retorna algo después que es invocada.

Joel Eduardo Ordoñez Martinez

student•

alli como seria el caso? si no sabemos en que momento se ejecutara el evento? y a donde lo retorna? si por lo que segun entiendo un callback siempre es un parametro de otra funcion?, por ejemplo como guardo ese return en una variable?

Ramiro

student•

Ejemplo:

setTimeout( () => {
	console.log('A')

},1000)

for(let i=0;i<199000000;i++) ;
console.log('B')

Wilson Montenegro

student•

Pongan una S luego de http: en caso de que no les corra.

Iván Darío Sánchez Jiménez

student•

Una senciilla prueba para ver como se ejecutan y se respetan los delay de los setTimeout siempre y cuando las tareas sincronas no interrumpan el procesamiento. En este ejemplo aunque las funciones ingresan en diferente orden a la cola de tareas pero los timeout se ejecutan según lo indicado.

setTimeout(function(){
	console.log(`Ya pasaron 5 segundos`)
},5000)


setTimeout(function(){
	console.log(`Ya pasaron 1 segundos`)
},1000)


setTimeout(function(){
	console.log(`Ya pasaron 3 segundos`)
},3000)

Kevin Antonio Nava Garcia

student•

Gente hasta hoy he seguido todas las clases y he documentado todos los codigos en mi pendrive,pero el mismo ayer se infecto con un virus y se borraron todos los archivos,¿Alguien de aca documento todos los codigos hasta esta clase?, se los agradeceria

Izael Ruelas Garcia

student•

En este link subi los archivos que tengo con las clases de Javascript, no estan ordenados pero puedes descargar los archivos que necesites para continuar con las clases saludos

Kevin Antonio Nava Garcia

student•

Gracias compañero

Javier Eduardo Perez Diaz

student•

Para las persona que quieran reforzar conceptos de asincronia les dejo este enlace

😃

Aaron Pérez Pereira

student•

Osea, para los que no lo tienen del todo claro. Yo (Según mi lógica), veo que cuando se pone 0 ms en el setTimeOut, lo que sucede es:

Se ejecuta el setTimeOut de primero, pasando la función interna (En este caso un console.log) a una especie de “Zona de Espera” por decirlo así.

Vale.

Una vez que está en “La Zona de Espera”, pasan los 0ms tan rápido, que de una mete la función en la Cola de Tareas. Todo eso sucede justo al mismo tiempo que el motor del Navegador sube a la pila de procesos la siguiente instrucción luego del setTimeOut que sería el console.log.

Ya una vez en este punto, el motor del Navegador, por prioridad, ejecuta primero lo que esté en la pila de procesos, y una vez vacía, pregunta si la cola lo está.

Como la cola no lo está, sube la primera instrucción que encuentre a la pila de procesos, y la ejecuta.

Cabe destacar que deben recordar que, en una Pila, lo primero en entrar, es lo ultimo en salir. Mientras que en la cola, lo primero en entrar, es lo primero en salir.

Los callbacks de JavaScript

Estamos renovando el Curso de Fundamentos de Javascript

¿Dónde aprender JS actualizado?

Bases del lenguaje

Bienvenido al curso

Calcula el área de un triángulo. Creando funciones

¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos

Inventar un idioma manipulando strings

¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for

¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while

¿Cuánto tiempo pasó desde tu fecha de nacimiento?

Objetos en JavaScript

Calcular la distancia entre dos puntos - Objetos en JavaScript

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Definiendo la clase Punto - Prototipos en JavaScript

Definiendo la clase Punto - Object.create en JavaScript

Definiendo la clase Punto - Class en JavaScript

Conocimientos intermedios

Entiende el scope de las variables

Operaciones con arrays

Entiende los closures de JavaScript

Estructura del lenguaje

¿Quién es this?

This, _this y los arrow functions

La función bind

call y apply

ECMAScript 5, 2015, 2016, Babel y otros cuentos

ECMAScript: El estándar en el que se basa JavaScript

Babel al rescate: logrando la compatibilidad buscada

Distintas formas de escribir módulos en JavaScript

Procesos asíncronos

No generes un cuello de botella en el EventLoop

Los callbacks de JavaScript

Callback a un servidor externo

Promesas

Async-await

Implementación de set timeout en JavaScript

Implementación de set interval en JavaScript

Cancelando el Timeout y el Timeinterval

Qué son y cómo se implementan el callbacks en JavaScript

Eliminando el callback hell usando promesas en JavaScript

Estructuras de datos y funciones avanzadas

Funciones Recursivas

Memoizacion

Iteradores en JavaScript

Generadores en JavaScript

Estructuras de Datos Inmutables en JavaScript

Creando un paquete para NPM

Requisitos Técnicos

Creando nuestro paquete

Escribiendo el código de nuestro paquete

Testeando el paquete

Publicando el paquete en NPM

Juego de HTML

¿Qué vamos a construir?

Inicializando el juego

A una ronda le sigue otra ronda

Añadir una librería

Cierre del Curso

Desafíos

Crear un modulo para convertir medidas de peso

Crear un juego en HTML, tic tac toe

Crear un tutorial