Qué son los Callbacks
Clase 6 de 26 • Curso de Asincronismo con JavaScript
Contenido del curso
Francisco Encabo Servián
student•
hace 4 años
Emerson David Cabrera Salas
student•
hace 4 años
Juan José ospina betancur
student•
hace 4 años
Francisco Encabo Servián
Emerson David Cabrera Salas
Juan José ospina betancur
Maria Gabriela Rodriguez Cuevas
Jonathan Barzola
Jason Steven Méndez Balambá
Matias Diaz
Luis Alfredo Canales
Job Forero
Daniel Romero
Porfirio González López
Sebastian Tamayo Betancur
Mario José Yanez Sifontes
Diego Eduardo Téllez Contreras
Salvador Elias Sánchez Acosta
Stephany Plaza
jorge cartagena
Paul Martin Vargas Portugal
Jose Alejandro Boscan Nava
Jesús Álvarez
Alan Cabrera
Walter Omar Barrios Vazquez
Paul Martin Vargas Portugal
Andrés Felipe Lopez gomez
José Isidro Torres Caldea
Iván Roberto Rivas Celeita
José Rodriguez Romero
Brahayan Ferney González Vanegas
Yerson David Aguilar Martinez
Gabriela Ramírez
Joao Ivan Garduño Salgado
Emerson David Cabrera Salas
Tahiris Goliat
Al principio es difícil entender un callback de esta forma. Piensas, "si ya tengo la función sum, para que hacer un callback, puedo llamarla tal cual y omitir ese paso". Pero piensa que tienes funciones para sumar, restar, multiplicar .....como hacer una calculadora. Las declaras todas en lista, y abajo solo tienes que usar un callback que va tirando de todas a la vez.
function sum(num1, num2) { return num1 + num2; } function rest(num1, num2) { return num1 - num2; } function mult(num1, num2) { return num1 * num2; } function div(num1, num2) { return num1 / num2; } function calc(num1, num2, callback) { return callback(num1, num2); };
Ahora ya tiene sentido!!!!!
Este ejemplo viene genial para comprender aún mejor el concepto de callback!
decía exactamente lo mismo, hasta que vi este ejemplo, muchas gracias
📩 𝗖𝗹𝗮𝘀𝗲 #𝟲: 𝗤𝘂é 𝘀𝗼𝗻 𝗹𝗼𝘀 𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸𝘀 𝟲/𝟮𝟭 📩 . 🪃 Un Callback es una una función que se pasa como argumento de otra función y que será invocada. . ✏️ ++Ejemplos:++ .
callbackindex.jsfunction sum(num1, num2){ return num1 + num2; } function calc(num1, num2, callback) { return callback(num1, num2); }; //No necesariamente se debe llamar callback console.log(calc(2, 2, sum)); //sum debe estar sin () y sin argumentos //
.
Run Code (debe estar instalado la extensión ++Code Runner++).setTimeout que funciona como un ++callback++, en el código está configurado para imprimir el mensaje 2 segundos después de ejecutar el código con Run Code:setTimeout(function (){ console.log('Hola JavaScript'); }, 2000) //la función es anónima por eso no tiene nombre
.
setTimeout con una función que se le pasa por argumento:function gretting(name){ console.log(`Hola ${name}`); } setTimeout(gretting, 2000, 'Maria'); //se pasa primero la función, de segundo el tiempo de espera y el argumento
🆘 Si tienen problemas con conseguir las comillas invertidas `` en el enlace hay varias respuestas: aquí
Maria con los mejores resumenes!
Denles un mes gratis a los que nos hacen resúmenes :D ¡Gracias Maria!
ALT + 96 = `` Para los que no las tengan en su teclado
Gracias.
gracias
Para comprender este tema, hice una función para una orden dentro de un restaurante.
function makingOrder(orden) { console.log(`Ready ${orden}`); } function order(orden, callback) { console.log(`Taking order ${orden}`); setTimeout(() => { callback(orden) }, 3000) console.log(`Doing order ${orden}`,); } order('Burger', makingOrder);
Este pequeño ejercicio me ayudó a entender mejor el callback.
Ya le entendí el tema de Callback y tu ejemplo es muy bueno.
Muy bueno
Hola amigos, hay una extensión en el VSC que nos permite trabajar con las template literals, se llama Template String Converter, que básicamente podemos estar trabajando con cualquier comillas y la extensión detecta cuando queremos hacer esto ${ } y nos cambia nuestras comillas normales a las comillas francesas automáticamente, así pueden usar sus comillas normales y con esta extensión les ayudará a cambiarlas de forma automática. Es util cuando no las tienen de forma normal en su teclado https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converter
Espero les sea de ayuda, Saludos :D
Excelente dato! Gracias!
profesor debo decirle que usted a mejorado su nivel a la hora de explicar la verdad antes me costaba entenderlo pero ahora es mas facil me gusta mucho como explica ahora a mejorado para bien :3
Los callbacks aseguran que una función no se va a ejecutar antes de que se complete una tarea, sino que se ejecutará justo después de que la tarea se haya completado. Nos ayuda a desarrollar código JavaScript asíncrono y nos mantiene a salvo de problemas y errores.
Ejemplo: digamos que necesito que en pantalla se muestre un mensaje solo despues que el usuario haga click en un boton, tenemos el boton:
<button id="callback-btn">
Haga clic aquí
</button>
Esta vez veremos un mensaje en la consola solo cuando el usuario haga clic en el botón:
document.queryselector(
"#callback-btn").addEventListener("click", function() {
console.log("El usuario ha hecho clic en el botón.");
});
Gracias 🥲
Una función de callback es una función que se pasa a otra función como un argumento, que luego se invoca dentro de la función externa para completar algún tipo de rutina o acción.
Ejemplo:
function saludar(nombre) { alert('Hola ' + nombre); } function procesarEntradaUsuario(callback) { var nombre = prompt('Por favor ingresa tu nombre.'); callback(nombre); } procesarEntradaUsuario(saludar);
Les recomiendo esta explicación esta un poco mas sencilla y clara para mi https://www.youtube.com/watch?v=zQVnDW8SaA0&ab_channel=Inform%C3%A1ticaDP Éxito Muchachos!!
"One approach to asynchronous programming is to make functions that perform a slow action take an extra argument, a callback function. The action is started, and when it finishes, the callback function is called with the result." Libro Eloquent JavaScript
Si tienes un tecaldo TKL o 60%, en la distribución en inglés, las comillas francesas las puedes hacer con fn + esc `` Espero te sirva, saludos! :)
También podemos ejecutar el código desde la Terminal de Code, ubicados dentro de la carpeta /src/callback, con el comando node:
node index.js
Código de ejemplo en esta clase:
//index.js function sum(num1, num2) { return num1 + num2; } function calc(a, b, cb) { return cb(a,b); } console.log(calc(10, -8, sum)); setTimeout(function () { console.log('¡Hola JavaScript!') }, 2000); function gretting(name) { console.log(`¡Hola ${name}!`); } setTimeout(gretting, 5000, 'Walter');
Códigos usados en Clase:
function sum(num1, num2) { return num1 + num2; } function calc(num1, num2, callback){ return callback(num1, num2); } console.log(calc(2, 2, sum)); setTimeout(function() { console.log(`Hola JavaScript`) }, 5000); function gretting(nombre){ console.log(`Hola ${nombre}`); } setTimeout(gretting, 2000, `Oscar`)
Muchas gracias por el aporte
Si vienes de Python y entiendes el concepto de "decoradores", esto no se te hará tan complicado. Esto de los Callbacks es un tema un poco enredado, pero te recomiendo practicar con unos 5 o más ejercicios donde te retes a entender la lógica que estás aplicando. 🔥 . Practicando perderás el miedo a código complejo. 💪🏻
muy importante esta comparación que hace.
Claro, ahora si le veo un buen uso.
const sum = (a, b) => a + b; const res = (a, b) => a - b; const mult = (a, b) => a * b; const div = (a, b) => a / b; const calc = (a, b, operation) => operation(a, b); console.log(calc3(4, 5, sum1));
Amigo déjame decirte que tu aporte fue lo único que entendí, después de ver varios videos de apoyo, leer mucho los comentarios, hasta que llego tu comentario... Gracias
<const sum = (a, b) => a + b; const res = (a, b) => a - b; const mult = (a, b) => a * b; const div = (a, b) => a / b; const calc = (a, b, operation) => operation(a, b); console.log(calc(4, 5, res)); >
Aclaración del min 12:10
setTimeOut no es un callback, la documentación menciona que callback es la función que se pasa a otra función y setTimeOut no se está pasando a otra función, por lo tanto no es un callback, la función anónima que tiene dentro si lo es.
Me encanta este tipo de ejercicios, con Run Code, permite entender de manera clara los conceptos
RESUMEN: Con estos ejemplos podemos entender que tenemos una serie de elementos dentro del lenguaje de programación que usan por sí mismos el concepto de "callbacks" . Lo que significa es... tener una función que **recibe **otra función para ser ejecutada, según sea el caso.
Debo admitir que estos conceptos de asincronismo me costaba entenderlos, siempre iba predispuesto a que ere difícil de entender, pero con este curso, la genial explicación de Oscar y los valiosos aportes de la comunidad he aclarado mucho el concepto! Gracias Platzi.
Justo necesito colocar un poco de asíncrono a un proyecto existente en php en mi trabajo y me apareció esta recomendación. 😄 Espero poder aplicar los conceptos a lo que necesito.