No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Qu茅 son los Callbacks

6/26
Recursos

Aportes 98

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Al principio es dif铆cil entender un callback de esta forma. Piensas, 鈥渟i 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 鈥omo 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!!!

馃摡 饾棖饾椆饾棶饾榾饾棽 #饾煵: 饾棨饾槀茅 饾榾饾椉饾椈 饾椆饾椉饾榾 饾棖饾棶饾椆饾椆饾棷饾棶饾棸饾椄饾榾 饾煵/饾煯饾煭 馃摡
.
馃獌 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铆

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

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 馃槃

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);
  1. La orden se toma, una hamburguesa.
  2. Se empieza a preparar la orden.
  3. La orden est谩 lista. 馃崝

Este peque帽o ejercicio me ayud贸 a entender mejor el callback.

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=鈥渃allback-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(鈥渃lick鈥, function() {
console.log(鈥淓l 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, 鈥渃lick鈥, y el segundo par谩metro es una funci贸n callback, que registra el mensaje en consola (鈥渆l 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

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谩ticaDP 脡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`)

Si vienes de Python y entiendes el concepto de 鈥渄ecoradores鈥, 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. 馃挭馃徎

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

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.

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 鈥渃allbacks鈥
.
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.

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

Voy a transcribir los siguientes segundos para que confirmen cu谩ntas veces dice lo que ya hab铆a dicho:

Esto en el contexto de haber explicado el ejemplo de MDN:

鈥溾ero, creo que vale la pena que hagamos c贸digo y lo entendamos. A pesar de que aqu铆 tengamos un peque帽o ejemplo que nos permite entender qu茅 va a suceder, en este caso, una funci贸n saludar, una funci贸n procesa entrada de usuario, pero creo que es mejor que vayamos l铆nea por l铆nea entendiendo las particularidades y puedas entender c贸mo funciona un callback; para esto, vamos a irnos a nuestro editor de c贸digo y crearemos nuestras primeras l铆neas de c贸digo para entender correctamente un callback鈥.

Creo que 茅l quiere vender sus cursos como si fuesen CHOCOAVENTURAS, y la verdad es que es un putada porque el tema es muy interesante, y para nada b谩sico.

Esta clase de los callbacks est谩 mucho mejor explicada que la del curso pasado, ahora siento que comprendo mejor este concepto.
Basicamente (seg煤n entiendo) necesitamos los callbacks para asegurar que antes que se ejecute una la funci贸n principal, primero se ejecute el callback que seguramente resolver谩 algo que a funci贸n principal necesita.
.
Supongo que la razon por la cual no se resuelve directamente lo que hace el callback en la funcion principal, es para evitar errores o para que las funciones tengan una sola tarea por hacer

CallBack = Av铆same cuando termines, mientras yo hago otras cosas.

Un callback tambien puede representar una dependencia que sera utilizada dentro de una funcion pero definida en otro lado.
Siguiendo las buenas practicas de Clean Code, la inyeccion de dependencias por parametro desacopla funcionalidades y le da libertad tanto a la funcion como al callback inyectado para modificarse independientemente sin necesidad de modificar la otra.

function calc(first, second, callback) {
  return callback(first, second);
}
function sum(first, second) {
  return first + second;
}
function multiply(first, second) {
  return first * second;
}
function objectify(first, second){
  return {first, second, sum: sum(first, second), multiply: multiply(first, second)}
}

calc(5, 6, sum);
calc(5,6,multiply)
calc(5,6, objectify)

output:

11
30
{ first: 5, second: 6, sum: 11, multiply: 30 }
![](https://static.platzi.com/media/user_upload/image-c3ae2e35-6344-4eb1-92d3-8e54f79bbbd5.jpg)![](https://static.platzi.com/media/user_upload/image-d023fcde-fb4c-46a3-9b5a-b6b1ca5df078.jpg)
por adelantarme y hacerlo por mi cuenta aprend铆 que tambi茅n se pueden pasar los argumentos directamente como llamando la funcion en el setTimeout ```js setTimeout(greeting('Abrahaam'), 2000) ```

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.

Le pregunt茅 a una IA que es un callback (explicado para ni帽os) y me dijo:

Es como pedirle a alguien que te llame de vuelta cuando terminaron de hacer algo.

(It鈥檚 like asking someone to call you back when they鈥檙e done with something. )

En este tipo de explicaciones, siento que al profe Oscar le falta claridad. Me pas贸 en el curso anterior con varias clases. Me he tenido que reforzar en otros videos con otros profesores.

aqui tienen una pagina a mas detalle de setTimeout y setInterval : https://es.javascript.info/settimeout-setinterval

C贸digo de la clase:

  • Call-Back:
function sum(num1, num2){
    return num1 + num2;
};

function calc(num1, num2, sumNumbers) {
    return sumNumbers(num1, num2);
};

console.log(calc(2, 2, sum));
  • setTimeout:
setTimeout(function (){
    console.log('Hola JavaScript');
}, 5000)

function grettin(name) {
    console.log(`Hola ${name}`);
}

setTimeout(grettin, 2000, 'Santiago');

Callbacks:

  • Son la pieza clave para que JavaScript pueda funcionar de forma as铆ncrona.
  • El resto de patrones as铆ncronos en JS est谩 basado en callbacks de un modo u otro, simplemente a帽aden az煤car sint谩ctico para trabajar con ellos m谩s c贸modamente.
  • Es una funci贸n pasada como argumento de otra funci贸n, y que ser谩 invocada para completar alg煤n tipo de acci贸n.
  • Ser谩 ejecutado una vez que una operaci贸n as铆ncrona notifique que ha terminado.
  • Esta ejecuci贸n se har谩 en alg煤n momento futuro, gracias al mecanismo que implementa el bucle de eventos.

Les comparto lo que estuve practicando

<function sum( n1 , n2 ){
    return n1 + n2
}
function rest( n1 , n2 ){
    return n1 - n2
}
function exp(n){
    return n * n 
}
function sos(n1 , n2){
    return sum(exp(n1),exp(n2))
}
function raiz(n) {
    return Math.sqrt(n)
}
function recibirnumero(op , n1 , n2){
    return op( n1 , n2 )
}
//console.log(recibirnumero(sum , 36 , 100))

function iva(n){
    return n*0.12
}

function desc (edad,total){
if (edad >=65){
    return rest(total , (total*0.05) )
}else {
    return total
}}
function totaligual(n1 , n2 , n3 , n4 , n5 , edad){
   return    desc( edad , (rest(  (sum((   sum(   sum( n1 , n2 )  ,   sum( n3 , n4)   )  )  , n5)) ,   iva(sum((   sum(   sum( n1 , n2 )  ,   sum( n3 , n4)   )  )  , n5))  )))
 }

function ingresovalores(n1 , n2 , n3 , n4 , n5 ,op , edad){
    return op(n1 , n2 , n3 , n4 , n5 , edad)
}


console.log(ingresovalores( 20 , 20 , 20 , 20 , 20 , totaligual , 65))
> 
Alguien sabe el por que se puede agregar el valor de name de la nada dentro del setTimeout? ![](https://static.platzi.com/media/user_upload/image-9aeaf090-b941-41c3-b166-70bcd7ef7315.jpg)
Les recomiendo otra extensi贸n de VSCode para visualizar outputs el el editor: Quokka.js A mi gusto funciona mejor que Code Runner, porque no es necesario ejecutar el comando "Run Code". Te muestra los resultados en la misma linea que estas ejecutando el console.log y tambien en la terminal ![](https://static.platzi.com/media/user_upload/image-4cf3461c-c61f-40fa-ba4d-ea0b7df93efd.jpg)

Una funci贸n callback es simplemente una funci贸n que se pasa como argumento a otra funci贸n. La funci贸n que recibe la funci贸n callback como argumento la llama una vez haya completado su tarea principal. Aqu铆 tienes un ejemplo de una funci贸n callback en acci贸n.

Uno de los momentos en los que se usa CALLBACK es cuando en tu c贸digo va a suceder algo que toma x cantidad de tiempo, entonces para que no se da帽e el c贸digo vas a pasar, dentro de esa funci贸n que demora x tiempo, un par谩metro que ser谩 el callback (o sea una funci贸n dentro de otra funci贸n). Lo cual me asegura el orden en que necesito que ocurra, por ejemplo si yo quiero entrar a una casa ajena primero tengo que avisar que llegu茅 y luego me abren la puerta (dif铆cilmente me van a abrir inmediatamente yo avise porque supongamos van a buscar las llaves o deben bajar a abrir) porque si dejan la puerta abierta puede ser peligroso. entonces me aseguro que todo pase en ese orden haciendo la funci贸n de avisar que llegu茅 y luego invoco el callback que abren la puerta.

Arg1, 2 y el resto, ser谩n pasados a func | c贸digo.

```tsx ```

excelente explicaci贸n

驴Qu茅 son los Callbacks?

Los callbacks son una parte fundamental en JavaScript y en muchos lenguajes de programaci贸n en general. Un callback es simplemente una funci贸n que se pasa como argumento a otra funci贸n y se ejecuta despu茅s de que esta 煤ltima haya completado su tarea.
Los callbacks son utilizados principalmente en situaciones as铆ncronas, donde una operaci贸n puede tomar tiempo en completarse, como operaciones de lectura/escritura de archivos, solicitudes de red, animaciones en la interfaz de usuario, etc.

Para entender mejor, aqu铆 hay un ejemplo sencillo:

function hacerAlgo(callback) {
  console.log("Haciendo algo...");
  setTimeout(function() {
    console.log("Tarea completada.");
    callback(); // Llamada al callback despu茅s de completar la tarea
  }, 2000); // Espera 2 segundos simulando una tarea as铆ncrona
}

function callback() {
  console.log("隆Callback ejecutado!");
}

hacerAlgo(callback);


En este ejemplo, la funci贸n hacerAlgo simula una tarea as铆ncrona que toma 2 segundos en completarse utilizando setTimeout. Despu茅s de completarse, invoca la funci贸n de callback pasada como argumento.

Los callbacks son especialmente 煤tiles cuando trabajas con operaciones as铆ncronas, ya que permiten controlar el flujo de ejecuci贸n y manejar acciones despu茅s de que una operaci贸n haya finalizado. Sin embargo, a medida que las aplicaciones se vuelven m谩s complejas, el anidamiento excesivo de callbacks puede conducir a un patr贸n conocido como 鈥渃allback hell鈥 (infierno de callbacks), lo que puede dificultar la lectura y el mantenimiento del c贸digo.

Para abordar este problema, se han desarrollado patrones como Promesas y async/await, que ofrecen una sintaxis m谩s legible y estructurada para manejar la asincron铆a en JavaScript.

Espero sea de utilidad. 馃懆鈥嶐煉

Sinceramente me costo entender este concepto, investigue en otras fuentes y nomas no.
Hasta que por fin lo logre entender con un ejemplo con mi nombre:

function nombre(Nombre, Apellido){
    return `${Nombre}${Apellido}`;
}

function nombreCompleto (Nombre, Apellido, juntar){
    return juntar(Nombre,Apellido);
}

console.log(nombreCompleto('Paulo', 'Valenzuela', nombre));

Entend铆 que en la funcion 鈥渘ombreCompleto鈥 con ayuda de 鈥渏untar鈥 estoy asignando los valores de nombre y apellido a la funci贸n 鈥渘ombre鈥 cuando la mando a llamar como par谩metro de la funci贸n 鈥渘ombre completo鈥.

En su momento no entendia los callbacks hasta que vi un get con express.

Ejemplo de la documentaci贸n:

<function greeting(name){
    alert(`Hi ${name}!!!`);
}

function ask_for_name(callback){
    let name = prompt('Enter your name: ');
    callback(name);
}

ask_for_name(greeting);> 

Usando el debugger de Edge vemos como se va ejecutando el c贸digo.

Explicaci贸n:

  1. Al correr el snippet en la parte de Call Stack vemos que de manera global coloca todo el proyecto como anonymous.
  2. Luego llega a la invocaci贸n de la funci贸n ask_for_name(greeting); que se le est谩 pasando la funci贸n greeting como argumento, tener en cuenta que al pasarle la funci贸n greeting todav铆a no se est谩 invocando.
  3. Al entrar a la funci贸n ask_for_name(callback); ahora ejecuta el prompt que muestra un input para ingresar un nombre.
  4. Ahora llega al callback(name) que es el greeting anteriormente pasado como argumento, pero esta vez ya se est谩 invocando y al cual se le est谩 dando el argumento que necesita, extra铆do de let name para mostrar el alert final.

As铆 lo entend铆 yo, acepto sugerencias y correcciones .

Comparto mis practicas:

const sumar = (num1, num2)=> num1+num2;
const calc =(num1, num2, sum)=>sum(num1,num2);

console.log(calc(2,2,sumar));
En JavaScript, los callbacks son funciones que se pasan como argumentos a otras funciones y se llaman dentro de esas funciones en un momento posterior. Los callbacks permiten ejecutar cierto c贸digo despu茅s de que se haya completado una operaci贸n asincr贸nica o despu茅s de que ocurra un evento espec铆fico. . Aqu铆 tienes un ejemplo pr谩ctico para ilustrar el uso de callbacks en JavaScript. Supongamos que queremos simular una operaci贸n asincr贸nica de descarga de datos de un servidor y luego realizar alguna acci贸n con esos datos una vez que se hayan descargado. ```javascript function descargarDatos(url, callback) { // Simular una demora en la descarga setTimeout(function() { // Supongamos que se descargaron los datos var datos = "Estos son los datos descargados"; // Llamar al callback pas谩ndole los datos descargados callback(datos); }, 2000); // Simular una demora de 2 segundos } function procesarDatos(datos) { console.log("Procesando los datos: " + datos); } // Llamada a la funci贸n descargarDatos con un callback descargarDatos("https://ejemplo.com/datos", procesarDatos); ``` En este ejemplo, tenemos la funci贸n `descargarDatos` que simula una descarga asincr贸nica de datos de un servidor. Recibe una URL y un callback como argumentos. Despu茅s de una demora simulada de 2 segundos, se llama al callback pas谩ndole los datos descargados. . Luego, tenemos la funci贸n `procesarDatos` que simplemente muestra en la consola un mensaje con los datos recibidos. . Finalmente, llamamos a `descargarDatos` pas谩ndole la URL y la funci贸n `procesarDatos` como callback. Cuando los datos se descarguen, se ejecutar谩 el callback y se mostrar谩 el mensaje correspondiente en la consola. . Este es solo un ejemplo b谩sico de c贸mo se usan los callbacks en JavaScript. Los callbacks son ampliamente utilizados en el desarrollo asincr贸nico, como en la manipulaci贸n de eventos, peticiones AJAX, operaciones de lectura/escritura de archivos, entre otros casos en los que se requiere ejecutar c贸digo despu茅s de que ocurra una acci贸n espec铆fica.
//Ejemplo 1

function sum(numero1, numero2) {
    return numero1 + numero2;
}

function calc(numero1, numero2, callback){
    return callback(numero1, numero2);
}

console.log(calc(2, 2, sum));



//Ejemplo 2

setTimeout(function () {
    console.log('Hola JavaScript');
}, 5000)



//Ejemplo 3

function saludos(name) {
    console.log(`Hola ${name}`);
}

setTimeout(saludos, 3000, 'Satoshi');
Saludar en ingl茅s no es gretting, es GREETINGS !

Mis apuntes:

//CALLBACKS: Una funci贸n es pasada como argumento en otra funci贸n.

//Ejemplo 1

function sum(num1, num2) {
    return num1 + num2;
}

function calc(num1, num2, sumNumbers) { //sumNunbers hace referencia al callback...es un nombre cualquiera
    return sumNumbers(num1, num2);
};

console.log(calc(2, 2, sum)); //4 //se invoca a la funci贸n sum sin usar par茅ntesis porque sino se estar铆a llamanda a esa funci贸n de inmediato y saldr铆a error

//Ejemplo 2

setTimeout(function () {
    console.log('Hola JavaScript');
}, 5000)

function gretting(name) {
    console.log(`Hola ${name}`);
}

setTimeout(gretting, 2000, 'Ricardo'); //si es una funci贸n con par谩metro, entonces el tercer argumento es el valor de ese par谩metro

//Entre los dos setTimeout, se devuelve primero el que acabe primero, en este caso Hola Ricardo y luego Hola JavaScript

//---UTILIDAD---

//Calculadora

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

buscar que setTimeout es una funci贸n predefinida me facilito entenderlo.

Los callbacks en JavaScript son funciones que se pasan como argumentos a otra funci贸n y se ejecutan despu茅s de que se complete una tarea. Sirven para asegurarse de que las partes de una tarea que dependen de otras se completen antes de continuar. Un ejemplo ser铆a la carga de un archivo de imagen en una p谩gina web, donde se puede usar un callback para mostrar un mensaje despu茅s de que se haya cargado el archivo. Los callbacks pueden ser un poco complicados al principio, pero son 煤tiles para controlar el flujo de una aplicaci贸n y hacer que el c贸digo sea m谩s eficiente.

6/26 Qu茅 son los Callbacks

// Callback Es una funci贸n que pasa como argumento otra funci贸n y que dentro va a ser utilizada segun sea el caso

function sum(num1, num2) {
    return num1 + num2;
}

function calc(num1, num2, callback) { // no se tiene que llamar necesariamente callback 
    return callback(num1, num2);
};

console.log(calc(2, 2, sum));

setTimeout(function () {       
    console.log('Hola JavaScript');
}, 2000) // Es el tiempo que se demora en responder a la funci贸n

function gretting(name) {
    console.log(`Hola ${name}`);
}

setTimeout(gretting, 2000, 'Oscar');

Bueno, les dejo un aporte, me a costado bastante pero as铆 lo entend铆 mucho mejor

<///-- programa para imprimir en orden primero,segundo...etc--///

/////// Caso donde la vida fuera maravillosa y simple///////

function primero (){
    console.log('PRIMERO');
}
function segundo (){
    console.log('SEGUNDO');
}

primero();
segundo();

// resultado de consola
//PRIMERO
//SEGUNDO 

/////// Caso donde la funcion primero esta en una api y tarda 3 segundos////

function primero (){
    setTimeout(()=>{
        
        console.log('PRIMERO');
    },3000)
}
function segundo (){
    console.log('SEGUNDO');
}

primero();
segundo();

// resultado de consola
//SEGUNDO 
//PRIMERO   ---- ac谩 ya no me sirve el programa 馃あ

//// caso 3 lo arreglo con callback 馃槑

function primero (segundo){

    setTimeout(()=>{
        console.log('PRIMERO');
        segundo();
    },3000)
}

function segundo (){
    console.log('SEGUNDO');
}

primero(segundo);

// resultado de consola
//PRIMERO   
//SEGUNDO  -- el programa tardara 3 segundos pero me aparece en orden la salida, que es como debe ser mi programa> 

Para probar y verificar intercambie en el codigo el console con la primer llamada a suma al final, y como el primer setTimeount tiene 5000 y el segundo 2000 la impresion es exactamente al reves, primero el ultimo console, despues el segundo setTimeout y por ultimo el primet setTimeout.

Callback function

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Here is a quick example:

function greeting(name) {
  alert(`Hello, ${name}`);
}

function processUserInput(callback) {
  const name = prompt("Please enter your name.");
  callback(name);
}

processUserInput(greeting);

The above example is a聽synchronous聽callback, as it is executed immediately.

Note, however, that callbacks are often used to continue code execution after an聽asynchronous聽operation has completed 鈥 these are called asynchronous callbacks. A good example is the callback functions executed inside a聽[.then()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then)聽block chained onto the end of a promise after that promise fulfills or rejects. This structure is used in many modern web APIs, such as聽[fetch()](https://developer.mozilla.org/en-US/docs/Web/API/fetch).

setTimeout()

The global聽setTimeout()聽method sets a timer which executes a function or specified piece of code once the timer expires.

Syntax

setTimeout(code)
setTimeout(code, delay)

setTimeout(functionRef)
setTimeout(functionRef, delay)
setTimeout(functionRef, delay, param1)
setTimeout(functionRef, delay, param1, param2)
setTimeout(functionRef, delay, param1, param2, /* 鈥 ,*/ paramN)
/callback

        //Ejemplo

        function sum (num1, num2){
            return num1 + num2;
        }
        //Ahora vamos a construir una fucion la cual va a resibir el callback que este caso es suma 
        function calc(num1,num2,callback){
             //ahora lo que vamos hacer es retornar la ejecucion de la funcion mas los valores que pasamos como argumentos num1 num2
             return callback(num1,num2);
        }
        //ahora llamaremos la funcion call le pasaremos los 2 valores y num1 y num2 y ademas pasaremos la funcion sum y este tomara los valores de calc

        console.log(calc(2,2, sum));//cabe recalcar que en sum  no le ponemos parentesis solamente el nombre y ya 

        //setTimeout 

        //Nos permite ejecutar codio en un tiempo determinado  duncion + tiempo + argumentos
    setTimeout (function(){//aca llamamos la funcion 
        console.log('hola java');
    }, 2000)//aca ponemos el tiempo en que se demora en mostrar el resultado 

    function saludar (nombre){
        console.log(`hola ${nombre} como estas`)
    }           //funcion tiempo argumentos de funcion 
    setTimeout(saludar, 2000, 'sebas')
const operations = {
  suma: (val1, val2) => val1 + val2,
  substract: (val1, val2) => val1 - val2,
  multiply: (val1, val2) => val1 * val2,
  divide: (val1, val2) => val1 / val2,
}

function calc(val1, val2, operation) {
  return console.log(operation(val1, val2));
}

calc(4,2,operations.multiply);

El callback siempre ser谩 el 煤ltimo argumento que se pasa a la funci贸n que la recibe, esto por convenciones de JavaScript.

function calc(param1, param2, param3, callback) {
  return callback(param1, param2, param3);
}

Con este peque帽o ejercicio puse en practica el ejemplo de los callbacks utilizando setInterval para mostrar la hora por consola.

Le comparto este ejemplo que hice utilizando Callbacks consiste en validar la contrase帽a o el usuario seg煤n la funci贸n que enviemos como par谩metro:

(solo es un ejemplo as铆 no se validan las credenciales)


//validar contrase帽a 
function validarContrasena(cnst){
    if (cnst == "agosto1234"){
        console.log("Contrase帽a correcta")
    }else{
        console.log("Contrase帽a incorrecta")
    }  
}

//validar usuario
function validarUsuario(user){
    if (user == "geoannycode"){
        console.log("Usuario correcto")
    }else{
        console.log("Usuario incorrecto")
    }
}


//callback

function ingresoDatos(dato,callback){
    callback(dato);
}


//verificar usuario:
ingresoDatos("geoannycode", validarUsuario);

//verificar contrase帽a: 
ingresoDatos("agosto1234", validarContrasena);

Si no quieres instalar nada en tu VS Code tambi茅n puedes ocupar las Dev Tools de Google Chrome. En resources y New snippet, puedes crear un archivo y correrlo directament todo desde el navegador.

Mi aporte.

function modify(array, callback) { //En este caso se crea una funci贸n llamada 'modify' la cual recibe como par谩metros un array y un callback, dentro de modify hice un push e invoqu茅 al callback//


    //Se estpa haciendo algo con la funci贸n modify//
    console.log(array);
    array.push('Ariel');

    //Despu茅s de hacer algo, se invoca el callback, que puede recibir un setTimeOut//

    setTimeout(() => {
        callback(array); 
    }, 1000);
    
}

const names = ['Pepe', 'Leticia', 'Gustavo', 'Teresa']; //Este es el par谩metro 'array' de la funci贸n modify, al mismo tiempo lo asignamos como par谩metro al callback.//



modify(names, function (array) { //Aqu铆 al momento de invocar a modify, recibe como argumentos el array de const names y el callback, este aparece en forma de funci贸n dentro de la invocaci贸n con un setTimeout.//

    setTimeout(() => {
        console.log(`He modificado el array, ahora es de ${array.length} elementos`);
    }, 1000);
   
}); 

Un ejemplo com煤n de uso de un callback en JavaScript es cuando se utiliza la funci贸n setTimeout(). Esta funci贸n recibe dos argumentos: una funci贸n (que es el callback) y un tiempo en milisegundos. La funci贸n setTimeout() espera el tiempo especificado y luego ejecuta el callback.

Ejemplo:

let name = "Juan";
setTimeout(function() {
  console.log("Hola " + name + " despu茅s de 3 segundos");
}, 3000);

Otro ejemplo con base en el que est谩 en la documentaci贸n oficial para que se pueda entender un poquito mejor la funci贸n de los callbacks:

function saludar(nombre) {
  console.log('Hola ' + nombre);
}

function despedir(nombre) {
	console.log('Adi贸s ' + nombre);
}

function procesarEntrada(nombre, funcionCallback) {
  funcionCallback(nombre);
}

procesarEntrada('Daniel', saludar); // Hola Daniel
procesarEntrada('Daniel', despedir); // Adi贸s Daniel

B谩sicamente, se trata de mandar a ejecutar una funci贸n desde otra funci贸n, pasando el nombre de la funci贸n a ejecutar como argumento de la funci贸n principal (o enviando directamente la funci贸n an贸nima completa como uno de los argumentos en el llamado la funci贸n principal, como en el primer ejemplo del setTimeOut de la clase).

AltGr + } = ``

Excelente

Descripcion grafica del Asincronismo

comillas francesas en layout la-latin1_utf-8 en linux;
ctrl + shift + u, y escribimos 60 + return(enter), En el proceso puedes observar como aparece una u subrayada, es ah铆 donde ingresamos el c贸digo del car谩cter que deseamos en este caso las comillas francesas tienen el c贸digo 60.

Consejo: descarguen la extensi贸n en VSC llamada 鈥淭emplate String Converter鈥 la misma convierte las comillas simples o dobles en comillas francesas al momento de detectar que dentro de ellas se introduce ${ } 鈥 Un golazo!!!

Otra forma rara de hacer lo de la suma:

function add(a, b, callback) {

  callback(a + b);

}



add(2, 4, function(sum) {

  console.log(sum); // 6

});

Un ejemplo cl谩sico ser铆a addEventListener

btn.addEventListener('click', () => {

  // Perform some action on click inside this callback

  console.log('I was clicked!');

});

Una muy buena explicaci贸n por parte del profe y explicar como se pasan los argumentos a otra funci贸n tambi茅n estuvo genial.

Usando callback para m煤ltiples operaciones:

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 operAritmetica(num1, num2, callbackCalc) {
    return console.log(callbackCalc(num1, num2));
}

function calc(num1, num2) {
    operAritmetica(num1, num2, sum);
    operAritmetica(num1, num2, rest);
    operAritmetica(num1, num2, mult);
    operAritmetica(num1, num2, div);
 };

calc(10, 2,);

Mi resumen:

Callbacks

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.

// Example 1
function sum(num1, num2) {
  return num1 + num2;
}

// function calc(num1, num2, callback) {
//   return callback(num1, num2);
// }
function calc(num1, num2, sumNumbers) {
  return sumNumbers(num1, num2);
}
console.log( calc(2, 2, sum) ); //>> 4
  1. Al pasar la funci贸n como argumento, no se debe colocar los () ya que se estar铆a invocando directamente y esto causar铆a un error en el c贸digo. Por lo tanto solo se debe ingresar el nombre de la funci贸n, para que luego sea invocada dentro de la funci贸n externa.

  2. No es necesario que la funci贸n que se pasa por argumento se llame 鈥渃allback鈥, ya que este nombre se utiliza para indicar la referencia de qu茅 es lo que se est谩 haciendo, pero no es obligaci贸n y podremos poner un nombre mas acorde a la tarea que realizar谩 la funci贸n.

setTimeOut

Nos permite ejecutar c贸digo en un tiempo determinado

setTimeout(function (){
  console.log('Hola JavaScript');
}, 2000);
// Hola JavaScript
// [Done] exited with code=0 in 2.11 seconds

Par谩metros de setTimeout:

setTimeout( functionRef, delay, param1, param2, /* 鈥 ,*/ paramN)

  1. functionRef: recibe una funci贸n la cual ser谩 la tarea a ejecutar,
  2. Delay: el tiempo, en milisegundos, que el temporizador debe esperar antes de que se ejecute la funci贸n o el c贸digo especificado.
  3. param1, 鈥, paramN (Opcional): argumentos que pueda necesitar la funci贸n.
function gretting(name) {
  console.log(`Hola ${name}`);
}

setTimeout(gretting, 2000, 'Gaby');

Lecturas recomendadas

SetTimeOut (MDN)

Callbacks (MDN)

usando arrow functions

// Ej1
const sum = (num1, num2) => num1 + num2;
const calc = (num1, num2, callback) => callback(num1, num2);

console.log(calc(2, 2, sum)); 

// Ej2
setTimeout(() => console.log('Hola JavaScript'), 5000);

// Ej3
const gretting = name => console.log(`Hola ${name}`);
setTimeout(gretting, 2000, 'Oscar');

recursividad DETECTED 鈥

脫scar Barajas es un excelente profesor. Este tema se me empezaba a dificultar.

La comilla francesa en el teclado latino de PC se hace presionando altgr + cierre de objeto, 茅sta ultima debe presionarse 2 veces para que aparezcan las comillas; la tecla altgr es el alt que est谩 a la derecha de la barra espaciadora

Como se llama la extensi贸n de VS Code que tiene que le muestra para autocompletar el c贸digo?

Una forma m谩s corta de hacerlo es usando arrow functions y dejar el return impl铆cito, queda m谩s corto y claro el c贸digo

const sum = ( num1, num2 ) => ( num1 + num2 )
const calc = ( num1, num2, callback ) => ( callback( num1, num2 ) )

console.log( calc( 2, 2, sum ) );

Mi aporte

function sum(num1, num2) {
    return num1 + num2;
} 

function calc(num1, num2, sumNumbers) {
    return sumNumbers(num1, num2)
}

console.log(calc(2, 2, sum));
// -> 4


// --


function greeting(name) {
return `Hi ${name}`;
}

function processName(name, callback) {
return callback(name);
}

console.log(processName('Fabio', greeting));
// -> Hi Fabio


// --

// Receives  function, argument and time
setTimeout(() => {
    console.log('Hi JavaScript')
}, 5000);
// -> (in 5 seconds) Hi JavaScript


// -- 

function greeting (name) {
    console.log(`Hi ${name}`)
};

// setTimeout(greeting, 2000, 'Fabio')

setTimeout(() => {
    return greeting('Fabio');
}, 1000)

Buah que interesante lo del setTimeout()

una de las cosas que me cofunde, es que el Maestro use mismos nombres de variables entre funciones, confundiendo al lector de ha cual de todas las existentes re refieren.

function suma(a,b){
return a+b;
}


function nuevaSuma(n1,n2,callback)
{
    return callback(n1,n2);

}

console.log(nuevaSuma(2,3,suma));

Me pregunte si se pod铆an agregar mas argumentos a la API y si se puede.

Solo se deben agregar como par谩metros en la funci贸n y luego d谩rselos como argumentos en la API, dejar茅 un ejemplo por si a alguien le puede servir, as铆 como dato.

function saludo(name, age, country) {
    
    console.log(`Hola ${name}, tienes ${age} a帽os y vives en ${country}`);
}

setTimeout(saludo, 2000, 'Juan', 20, 'Colombia');

El resultado en la consola seria: Hola Juan, tienes 20 a帽os y vives en Colombia

驴Por qu茅 mi consola tarda .5 segundos m谩s que la del profe? :c

Que alguien me corrija si estoy en lo incorrecto, pero el m茅todo addListener maneja as铆ncronismo con callback, por lo que ejecuta las l铆neas antes del addListener, ejecuta las siguientes y solo ejecuta addListener hasta que ocurra el evento, dejo el siguiente ejemplo para el que le sea de ayuda:

function seeya(callback){
    console.log("Har茅 una despedida, pero antes, un callback");
    setTimeout(function(){
        console.log("隆Realizando callback!");
        callback()
    },1000)
    console.log("Me ejecuto antes porque estamos haciendo un callback");
}
function addition(){
    const a = 10;
    const b = 20;
    console.log(a,b);
}
console.log("-----INICIO-----");
console.log(`隆Hola! He creado este peque帽o algoritmo para poder reforzar conocimientos en calbacks con JavaScript, por favor introduce tu nombre`);
const input = process.openStdin();
input.addListener("data", (data) => { /* Data es el nombre del evento */
    console.log(`Hola ${data}`);
    seeya(addition) /* Llama a despedida */
})
console.log("-----FIN-----");

Prueben a correrlo en sus maquinas y quiz谩s les pueda ayudar un poco.

Por si aun tienes dudas sobre los callbacks este video te ayudar谩. https://www.youtube.com/watch?v=zQVnDW8SaA0

function paint(typePincel, color, place) {
    return console.log("We painted " + place + " color: " + color + " with: " + typePincel);
}

function painter(order,typePincel, color, place, painting) {
    if (order === true) {
    return painting(typePincel, color, place)
    }else {
        return console.log("they wont pay us")
    }
}

painter(false,"dagger", "blue", "kitchen", paint)

//result
//They wont pay us

Esta muy genial lo de los callbacks 馃槷

explicacion sencilla y suficiente para entender callbacks

Que capo eres Oscar, entend铆 cada conceptop que mencionaste!!!

Me gusta mucho cuando emp茅zamos a escribir codigo, es la mejor forma de entender un callback.

Los callbacks los podemos escribir

  • Como lo hizo el profe en esta clase
 function tacos(tipo){
    return `Tacos de ${tipo}馃尞`;
  }

  function carne(tipo, callback){
     return callback(tipo)
  }
  console.log(carne("Asado", tacos));
  • Usando arrow functions
function tacos(tipo, callback){
    return callback (`Tacos de ${tipo}馃尞`)
}

tacos( "Asado", (resultado) => console.log(resultado)  )

function multiply(a, b) {

    return a * b;
}

function calc(a, b, callBack) {
    console.log(callBack(a, b));;
}



setTimeout(calc, 2000, 4, 5, multiply)

Impresionante c贸mo explica Oscar, por lejos el mejor profesor de Platzi. Muchas gracias!!

Arrow Functions

Para los callback pueden usar una cosa conocida como 鈥淎rrow Functions鈥 que simplemente es una manera mas breve de escribir funciones an贸nimas, la manera de escribirlas es la siguiente:

// M茅todo 1

(parametros) => {
	//c贸digo de tu funci贸n
}

// M茅todo 2

const mi_arrow_fun = () => { 
	// c贸digo de tu funci贸n
} 

debemos tener cuidado en como las utilizamos, si las implementamos como menciono en 鈥淢etodo 1鈥 la funcion va a ejecutarse de forma autom谩tica al correr el cogido.

Con el 鈥淢茅todo 2鈥 podemos controlar que no ocurra lo anterior sin embargo, no podremos llamar a la funci贸n en una parte del c贸digo antes de declarar la arrow function:

console.log(funcion1()); // Esto nos dar谩 un error ya que la funcion1 aun no se encuentra declarada.

const funcion1 = () => {
	// codigo de la funcion
}

console.log(funcion1()); // Para este punto estamos llamando la funci贸n una vez que ha sido declarada as铆 que no abra error.

Por consiguiente las arrow functions nos permiten tener funciones an贸nimas escritas de una forma mas breve, aunque pudi茅ramos decir que tienen la misma funcionalidad.

Es as铆 que podemos implementar uno de los ejemplos hecho en clases con arrow function de la siguiente manera:

const saludo = (name) =>{
    console.log("Hola " + name);
}

setTimeout(saludo, 2000, 'mi nombre')

o igual de la siguiente manera


setTimeout((name)  =>  {
    console.log(name);
}, 2000, "Mi nombre")