Qué son los Callbacks

Clase 6 de 26 • Curso de Asincronismo con JavaScript

Francisco Encabo Servián

student•

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

Emerson David Cabrera Salas

student•

Este ejemplo viene genial para comprender aún mejor el concepto de callback!

Juan José ospina betancur

student•

decía exactamente lo mismo, hasta que vi este ejemplo, muchas gracias

Maria Gabriela Rodriguez Cuevas

student•

📩 𝗖𝗹𝗮𝘀𝗲 #𝟲: 𝗤𝘂é 𝘀𝗼𝗻 𝗹𝗼𝘀 𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸𝘀 𝟲/𝟮𝟭 📩 . 🪃 Un Callback es una una función que se pasa como argumento de otra función y que será invocada. . ✏️ ++Ejemplos:++ .

En ++VSC++ crear una carpeta dentro de la carpeta ++src++ llamada callback
Crear dentro de la carpeta ++callback++ el archivo index.js
Dentro de ++index.js++ se coloca la estructura de los que será un ++callback++:

function 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
//

Luego se selecciona el código y al dar click derecho, seleccionar Run Code (debe estar instalado la extensión ++Code Runner++).
Aparece abajo la consola con la salida de la suma de los 2 números.
Para el segundo ejemplo, se tiene un 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

En el tercer ejemplo tenemos un 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í

Jonathan Barzola

student•

Maria con los mejores resumenes!

Jason Steven Méndez Balambá

student•

Denles un mes gratis a los que nos hacen resúmenes :D ¡Gracias Maria!

Matias Diaz

student•

ALT + 96 = `` Para los que no las tengan en su teclado

Luis Alfredo Canales

student•

Gracias.

Job Forero

student•

gracias

Daniel Romero

student•

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);

La orden se toma, una hamburguesa.
Se empieza a preparar la orden.
La orden está lista. 🍔

Este pequeño ejercicio me ayudó a entender mejor el callback.

Porfirio González López

student•

Ya le entendí el tema de Callback y tu ejemplo es muy bueno.

Mario José Yanez Sifontes

student•

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

Diego Eduardo Téllez Contreras

student•

Excelente dato! Gracias!

Salvador Elias Sánchez Acosta

student•

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

Stephany Plaza

student•

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."); });

Como podemos observar, en la linea 1 se selecciona el boto por el metodo query con el ID -En la segunda, se agrega el evento click , toma 2 parámetros. El primero es su tipo, "click", y el segundo parámetro es una función callback, que registra el mensaje en consola ("el usuario ha hecho clic en el boton") cuando el botón es pulsado. En este caso el callback es utilizado para consologuear el mensaje solo despues del click Fuente: freecodecamp

jorge cartagena

student•

Gracias 🥲

Paul Martin Vargas Portugal

student•

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);

Jose Alejandro Boscan Nava

student•

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

Jesús Álvarez

student•

"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

Alan Cabrera

student•

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! :)

Walter Omar Barrios Vazquez

student•

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');

Paul Martin Vargas Portugal

student•

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`)

Andrés Felipe Lopez gomez

student•

Muchas gracias por el aporte

José Isidro Torres Caldea

student•

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. 💪🏻

Iván Roberto Rivas Celeita

student•

muy importante esta comparación que hace.

José Rodriguez Romero

student•

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));

Brahayan Ferney González Vanegas

student•

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)); >

Yerson David Aguilar Martinez

student•

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.

Gabriela Ramírez

student•

Me encanta este tipo de ejercicios, con Run Code, permite entender de manera clara los conceptos

Joao Ivan Garduño Salgado

student•

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.

Emerson David Cabrera Salas

student•

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.

Tahiris Goliat

student•

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.