Callbacks

Este profe es maquina loco, se le entiende todo!

Funciones Callback
Una funcion callback es una funcion que es pasada como argumento a otra funcion, para ser llamada(called back) en otro momento.
La funcion que recibe como argumento otras funciones es denominada funcion de orden superior (higher-order function), esta contiene la logica correspondiente para ejecutar adecuadamente la funcion callback.

En el siguiente codigo

setTimeout(console.log('Hello'), 1000)

setTimeout es una higher-order function y console.log es una callback function

Creo que me hacía falta esta clase para comprender definitivamente los callback y las promise. Como recomendación también sería bueno para complementar que vieran los cursos de Sasha en Fundamentos de JS, y el curso profesional de JS con Richard.

Tenemos un grupo de aprendizaje para temas relacionados a la Escuela de Javascript: https://chat.whatsapp.com/LsR1Zt77zIV2bUw30fMQ3M

RESUMEN:

En js las funciones son objetos de primera clase, primer nivel, son ciudadanos de primera clase que puedo usarlos como quiera. Pasarlos como parámetro.

//La asincronia se puede generar mediante en setTimeout
console.log('Iniciando proceso...');
function soyAsincrono(elCallback) {
    console.log("Asigno setTimeout para volver asincrona una función como esta misma: \n " + soyAsincrono);
    setTimeout(function(){
    console.log("Pasaron 3 segundos y me ejecuté");
    elCallback();
    }, 3000)
};

soyAsincrono(function(){console.log("Después de esto demuestro que Soy el primer Callback")});


function hola(nombre, miCallback) {
    setTimeout(function () {
        console.log('Hola, '+ nombre);
        miCallback(nombre);
    }, 1500);
}

function adios(nombre, otroCallback) {
    setTimeout(function() {console.log('Adios', nombre); otroCallback();}, 5000);
}


hola('Alejandro', function (nombre) {
    adios(nombre, function() {
        console.log('Terminando proceso...');
    });
});

hola('Alejandro estás probando  "hola" las funciones independientemente, las pasas vacías', function () {});
adios('Alejandro estás probando "adios" las funciones independientemente, las pasas vacías', function () {});

💚 Me costo entender mucho este tema de callbacks, así que te comparto mis notas profundizando más sobre el tema regresando a lo básico de las funciones. (o′┏▽┓｀o)
.

Callbacks

Para entender los callbacks primero hay que regresar a las funciones y entender su sintaxis:

Una función comienza con la palabra reservada “function” seguido del nombre de la función (“saludar” en este caso), después le sigue una lista de parámetros, estos entre paréntesis y separados por una coma en caso de ser mas de uno (“nombre” y “apellido” en este caso).

Nota: Los parámetros son la lista de variables que proponemos cuando se define una función. Mientras que los argumentos son los valores que se pasan a la función cuando ésta es invocada, estos deben coincidir en numero y separados por coma en caso de ser mas de uno con los parámetros propuestos.

// palabra reservada function + nombre de la función + (parámetro(s))
function saludar(nombre, apellido) {
	return "Hola " + nombre + " " + apellido;
}

// invocación de función + (argumento(s))
saludar("Alexander", "Book");

Nota2: la instrucción “return” especifica el valor devuelto por la función, esta puede o no regresar explícitamente los valores de los parámetros de la función.

Una vez comprendeos la sintaxis básica de lo que es una función, podemos entender que 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.

Un ejemplo sencillo de una función callback es el siguiente: comencemos por declarar una función de nombre “ending” que contenga un mensaje, después declaremos una función “starting” que igual contenga un mensaje, pero, esta va a recibir un solo parámetro, el cual llamaremos “callback”, el cual va a recibir nuestra función ending para posteriormente invocarla dentro de sí misma.

function ending() {
	console.log("Terminando proceso... ");
}

function starting(callback) {
	console.log("Hola, soy una función asíncrona callback");
	callback();
}

console.log("Iniciando proceso... ");
starting(ending);

Nota: entiéndase que el parámetro callback actúa como sustituto de nombre para la función ending en este caso.

Ok ahora hagamos algo un poco mas complejo, declaremos una función de saludo y despedida, donde nuestra función de despedida recibirá como parámetro un valor asignado a nuestra función de saludo, tomando en cuenta que al llamar a la función de saludo esta recibirá dos parámetros, un nombre y nuestra función de despedida para hacer el callback.

Respuesta:

// función de despedida
function chao(nameB) {
	console.log("Adios " + nameB);
}

// función de saludo
function hello(nameA, callback) {
	console.log("Hola " + nameA);
	// callback a la función de despedida
	callback(nameA);
}

hello("Carlos", chao);

Nota: Los ejemplos anteriores son ejemplos de callback sincrónica, ya que se ejecuta inmediatamente.

Agregando asincronía:
Una de las funciones más sencillas para agregar asincrónica a nuestros procesos es ejecutar un “timeout”.

Recordemos que un callback consiste en una función que recibe como parámetro otra función, así que podemos incluir la declaración de la función que se recibirá como parámetro en el mismo llamado de nuestra función callback, de manera que:

function soyAsincrona(callback) {
	setTimeout(() => {
		console.log("Estoy siendo asíncrona");
		callback();
	}, 1000);
}

console.log("Iniciando proceso... ");
soyAsincrona(function () {
	console.log("Terminando proceso... ");
});

Cuando nosotros realizamos funciones asíncronas no tendremos realmente el control de en que momento se ejecutaran o se mostraran, por eso si queremos que una función asíncrona se muestre en un momento determinado después de que sucediera cierto evento, debemos de llamar o invocar esta función asíncrona dentro de otra función, para esto se usan los callbacks, son parámetros que reciben funciones para que se ejecuten dentro de un evento ya determinado.

Creo que la clave de la clase está en:

Dos funciones que son asíncronas, no se ejecutarían una después de otra, sino se llamaran dentro del Callback de la otra

es complejo !!! pero se entiende, hay que practicar.
les dejo mi codigo.

El hecho de tener nuestros eventos asíncronos puede ser un problema de ves en cuando, por lo que si un evento depende de la ejecución previa de otro, una buena solución seria ejecutarlo dentro del evento dependiente. También nuestras funciones pueden compartir variables a lo largo de la ejecución.

El asincronismo como ejemplo de la vida cotidiana:

Vas a un restaurant bar un viernes en la tarde después de una semana de agotamiento laboral, tienes hambre y mucha sed, así que realizas el siguiente pedido al mesero:

1. Un molcajete cielo, mar y tierra para comer.
2. Un tarro de cerveza oscura extra fría, al mismo tiempo que te sirvan el molcajete.

Pero, mientras esperas el platillo fuerte pides:

1. Una botana
2. Una cerveza de bote ligera
   El mesero te sirve la botana y el bote de inmediato

Resulta que hay demasiada gente en el restaurante, ya pasaron 10 minutos, te acabaste la botana y la cerveza ligera, y como aún no te sirven el molcajete, le hablas al mesero y le pides:

1. Otra botana
2. Otro bote de cerveza ligera

El mesero te vuelve a servir la botana y el bote de inmediato

Ya pasaron 20 minutos y estás a punto de cancelar el pedido inicial cuando de pronto te llega tu molcajete y tu tarro de cerveza oscura extra fría.

¡A COMER Y TOMAR QUE EL MUNDO SE VA A ACABAR!

Ahora veamos esto en código:

function servirBotana(numPedido) { // No hay tiempo de espera
	console.log('Pedido '+numPedido+': Botana servida');
}

function servirBoteCervezaLigera (numPedido) { // No hay tiempo de espera
	console.log('Pedido '+numPedido+': Bote de cerveza ligera servido');
}

function servirTarroOscuro (numPedido) { // No hay tiempo de espera
	console.log('Pedido '+numPedido+': Tarro de cerveza oscura servido');
}

function prepararMolcajete(numPedido, callback) { // Tiempo de espera de 20Mins
	setTimeout(function () {
        callback(numPedido);
    }, 6000); // Utilizamos 6 segundos que representan 20 minutos porque no manches xD
}

let numPedido = 1;
console.log('*** Pedido 1 realizado, lo están preparando ....');
prepararMolcajete(numPedido, function (numPedido) {
	console.log('Pedido '+numPedido+': Molcajete servido');
	servirTarroOscuro(numPedido);
    console.log('* Pedido 1 servido');
});

numPedido = 2;
console.log('* Pedido 2 realizado');
servirBotana(numPedido);
servirBoteCervezaLigera(numPedido);
console.log('* Pedido 2 servido');

numPedido = 3;
setTimeout(function () { // Después de 10 minutos de espera
    console.log('* Pedido 3 realizado');
	servirBotana(numPedido);
	servirBoteCervezaLigera(numPedido);
	console.log('* Pedido 3 servido');
}, 3000); // Utilizamos 3 segundos que representan 10 minutos porque no manches xD

Puntos importantes en este ejemplo:

• Las funciones que no representan tardanza (APIS externas), se ejecutan de inmediato.
• Una vez que se definen los criterios por los cuales el callback será ejecutado, por ejemplo al pasar el tiempo definido por el setTimeout, o al recibir la respuesta del XMLHTTPREQUEST, o al cumplirse el intervalo de setInterval, dicho callback pasa al queue esperando que las funciones regulares (normales, nativas, del core, etc) del callstack se ejecuten por completo.
• Mientras se espera que se cumplan los criterios de dichas funciones asíncronas, se pueden seguir ejecutando otras funciones, incluyendo funciones asíncronas que representen una tardanza menor, como en el caso del 3er pedido de este ejemplo, que se realiza a la mitad de la espera del pedido 1.
• Una vez que el callstack está vacío, el eventloop pasa dicho callback al callstack para que éste sea ejecutado de inmediato.

En este ejemplo sólo se considera el uso de los callbacks, pues es una tema que se complica mucho más que el uso de promesas y fetch. Espero les sirva el aporte.

Vi el tema de callback en 3 cursos diferentes y en este lo pude entender perfectamente. Me gustó como lo explicó.

Si quieren profundizar mas pueden seguir este curso Curso de Asincronismo en Javascript

Callbacks

function hola(nombre, micallback) {
  setTimeout(function() {
    console.log("Hello, " + nombre);
    micallback(nombre);
  }, 1000);
}

function adios(nombre, otrocallback) {
  setTimeout(function() {
    console.log("Adios", nombre);
    otrocallback();
  }, 1000);
}

console.log("Iniciando");
hola("Brando", function(nombre) {
  adios(nombre, function() {
    console.log("Terminando");
  });
});

Hice un pequeño ejemplo para entender mejor esta clase. Creo que con esta clase ya me quedó claro el tema de los callbacks

Recomiendo mucho el curso de V8, se explica muy muy bien la parte de los callbacks

Hey chic@s, he creado un servidor en Discord, para los que se quieran unir. Alli podremos compartir notas de los cursos que estemos haciendo y recursos para profundizar en cada tema. Este es el link: https://discord.gg/bucNSdEQyz, estare dando permisos para crear canales y asi podemos hablar en canales de vos y discutir acerca de lo que querais.

Nunca pares de aprender!

Los callbacks son útiles cuando no sabemos cuanto tiempo va a tardar algo pero cuando termine queremos que pase algo mas

El callback se puede interpretar menos como una función
y mas como la continuación de la función actual, como el .then, como el llamado al siguiente paso

function hola(nombre, param) {
  setTimeout(function() {
    console.log('Hola', nombre)
    param(nombre) //aqui se llama al callback y se manda un parametro
  },1000)
}

console.log('iniciando proceso')

function adios(nombre, param) {
  setTimeout(function() {
    console.log('Adios', nombre)
    param() //aqui se llama al callback
  },1000)
}

//funcion con callback como parametro
hola('Adranuz', function(nombre) {
  adios(nombre, function() {
    console.log('Proceso terminado')
  })
})

ahhhhhhh

Son estos los profesores que uno termina amando Platzi. Que calidad la manera que enseña, se le entiende todooo

Diego de Granda, Carlos Hernandez, Jonathan Alvarez los 3 son una máquinaaa

let person = {
    name: 'Derek',
    lastName: 'Paúl',
    age: 22,
    description: 'description',
}

const extendsTo = (callback, { name, lastName, age }) => {
    setTimeout(function () {
        callback(name, lastName, age);
    },1000);
}

const MyCallback = (nombre, apellido, edad) => {
    console.log(
        `Bienvenido ${nombre} ${apellido}
        Eres mayor de edad, pues tienes: ${edad} años`
    );
}

extendsTo(MyCallback, person);```

Example Calbacks

function hello(name, myCallback) {
  setTimeout(() => {
    console.log("hello", name);
    myCallback();
  }, 1500);
}

function speaks(speaksCallback) {
  setTimeout(() => {
    console.log("bla bla bla...");
    speaksCallback();
  }, 2500);
}

function bye(name, otherCallback) {
  setTimeout(() => {
    console.log("bye", name);
    otherCallback();
  }, 100);
}

console.log("Init process");
hello("George", function () {
  speaks(function () {
    bye("George", function () {
      console.log("End process");
    });
  });
});

function hola(nombre, micallback) {
    console.log('soy una funcion asincrona');    
    setTimeout(() => {
        console.log(`hola ${nombre}`);   
        micallback(); 
    }, 1000);
}

function adios(nombre, otrocallback) {
    setTimeout(() => {
        console.log(`Adios ${nombre}`)
        otrocallback();
    }, 1500);
}


console.log('inicia');
hola('francisco' ,() => {
    adios('Francisco', () => console.log('finaliza'))
    console.log('finaliza proceso mi callback');
} )

8- FUNCIONES CON CALLBACKS PARA LLAMAR A OTRAS FUNCIONES
ADEMAS VEREMOS HERENCIA DE PARAMS

function hola(nombre ,miCallback){
setTimeout( ()=>{
console.log(hola ${nombre})
miCallback(nombre); **1 //lGLOSARIO ABAJO DE TODO
},2000 )
};
function adios(nombre,otroCallback){
setTimeout(()=>{
console.log(“adios”, nombre);
otroCallback();
},1000)
}

console.log(“inicia el programa”);
hola(“tomas”,(nombre)=>{
adios(nombre,()=>{
console.log(“finaliza el programa”)
})
})

TEMINAL:
inicia el programa
hola Tomas
adios Tomas
finaliza el programa
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
//ES IMPORTANTISIMO ENCADENARLAS,
//QUE EL CALLBACK DE CADA FUNCION SEA LLAMAR A LA SIGUIENTE FUNCION Y ASI SUCESIVAMENTE!

(SI NO LO ENCADENARIAMOS Y HARIAMOS)
hola(nombre, ()=>{} )
adios(nombre, ()=>{} )
SU OUTPUT SERIA
1adios
2hola

GLOSARIO||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
**1 //le enviamos params via callback a las funciones que encadenaremos

Muy buena la clase y felicito al profesor. Por fin me queda claro este tema.

Ufff. Que bien explicado y eso de programadores asíncronos pues es alentador. 😃

No van a creer, pero llevo 4 años haciendo nodejs. Y hasta ahorita entiendo callbacks complejos. Si me preguntan como sobreviví estos años a sido por async/await.

Me explotó la cabeza

Muy bien explicado, ahora solo falta acordarme de la sintaxis

Hola, si te sale un error en nodemon que dice algo como
+FullyQualifiedErrorId : UnauthorizedAcces

debes en windows buscar “Windows PowerShell” y abrir como administrador, luego escribir

Set-ExecutionPolicy Unrestrict

y luego verificar si funciono escribiendo: Get-ExecutionPolicy
deberia salir “Unrestrict”

Este profesor explica demaciado bien, ojala tenga mas cursos

Callback

Un callback es una función que recibe como argumento otra función y la ejecuta. Cuando pasamos un callback solo pasamos la definición de la función y no la ejecutamos en el parámetro. Es la función contenedora la que elige cuándo ejecutar el callback.

como tal la funcion de los callback es que se ejecute una cosa detras de otra en un orden no?
es correcto esto que estoy haciendo?

function contar(callback, callback1, callback2, callback3){
    callback();
    callback1();
    callback2();
    callback3();
}

contar(function(){
    console.log("1")

    }, function(){
       console.log("2")
       }, function(){
          console.log("3")
            }, function(){
                console.log("4")
});

function hola(nombre, miCallback) {
    // La función setTimeout es la forma más sencilla de ser asíncrona
    setTimeout(() => {
        console.log(`Hola, ${nombre}`)
        miCallback(nombre)
    }, 1500)
}

function adios(nombre, otroCallback) {
    setTimeout(() => {
        console.log(`Adiós, ${nombre}`)
        otroCallback()
    }, 1000)
}

console.log(`Iniciando proceso...`)

hola('Carlos',(nombre) => {
    adios(nombre, () => console.log(`Terminando proceso...`))
})

function hola(nombre, miCallback) {
    setTimeout(function () {
        console.log("Hola, " + nombre);
        miCallback(nombre);
    }, 1000)
}

function adios(nombre, otroCallback) {
    setTimeout( function() {
        console.log("Adios",  nombre);
        otroCallback();
    }, 1000);
}

console.log("Iniciando proceso....");
hola( "Carlos", function (nombre) {
    adios(nombre, function() {
        console.log("Terminando proceso....");
    }); 
});

La principal diferencia entre una función asíncrona y una función síncrona es cómo manejan la ejecución del código mientras esperan a que se completen las operaciones.

• Una función síncrona bloquea el flujo del programa mientras espera a que se complete la operación. Esto significa que ninguna otra instrucción del programa se ejecutará hasta que la función haya finalizado su ejecución.

import fetch from "node-fetch";

function getDataSync() {
  const response = fetch("https://pokeapi.co/api/v2/pokemon/ditto");
  const data = response.json();
  return data;
}

console.log("Iniciando...");
const data = getDataSync();
console.log("Los datos son:", data);
console.log("Terminando...");

/* 
En este ejemplo, la función "getDataSync()" es síncrona y usa el método "fetch()" para realizar una petición HTTP y el método "json()" para parsear la respuesta en formato JSON. El problema es que esta función bloquea el flujo del programa mientras espera a que se complete la petición HTTP. El resultado es que "Iniciando..." se imprimirá en primer lugar, pero "Terminando..." no se imprimirá hasta que la petición HTTP se haya completado y se haya obtenido una respuesta.
*/

• Una función asíncrona, por otro lado, no bloquea el flujo del programa mientras espera a que se complete la operación. En lugar de eso, proporciona una función de “callback” (una función que se ejecuta una vez que la operación ha sido completada) para manejar el resultado, y permite que el programa continúe ejecutando instrucciones mientras espera a que se completen las operaciones asíncronas.

async function getDataAsync() {
  const response = await fetch("https://example.com/data");
  const data = await response.json();
  return data;
}

console.log("Iniciando...");
getDataAsync().then((data) => console.log("Los datos son:", data));
console.log("Terminando...");

/* 
En este ejemplo, la función "getDataAsync()" es asíncrona y usa el método "fetch()" y el método "json()" para realizar una petición HTTP y parsear la respuesta en formato JSON. Utiliza las palabra clave "await" para esperar a que se complete la petición HTTP antes de continuar con la siguiente línea de código.
La diferencia con la función anterior es que en esta ocasión "Terminando..." se imprimirá antes de que la petición HTTP se haya completado y se haya obtenido una respuesta, ya que la función no bloquea el flujo del programa mientras espera a que se complete la petición HTTP.

En resumen, la función síncrona bloquea el flujo del programa mientras espera a que se complete la operación, mientras que la función asíncrona permite que el programa continúe ejecutando instrucciones mientras espera a que se complete la operación.
*/

La verdad un muy buen profe, aquí les comparto un articulo para que complemente los estudiado: https://antonioweb.dev/articulo/funcion-callback-javascript-guia-completa

me perdi, es un espaguetti de código eso xD

Callback. gestionar lo que queremos que sea asíncrono

Carlos habia escrito asincorona en vez de asincrona en el primer ejercicio de ejemplo

callback Hell 😄

Es una función utilizada como parámetro en otra función. es parecido a un parámetro común el detalle esta en que un parámetro común puede ser reemplazado por una variable u objeto NO por una función, Callback lo que permite es no solo llamar variables u objetos si no llamar funciones como parámetros dentro de otra función.

Podian analizar este código, llamo las funciones dentro de ellas y no dentro del llamado, esto es asincrono tambien?:

function soyAsincrona(nombre, fn){
    setTimeout(function(){
        console.log('estoy siendo asincrona')
        fn(nombre, adios)
    },1000)
}
function hola(nombre, fn){
    setTimeout(function(){
        console.log(`Hola ${nombre}`)
        fn(nombre, adios)
    },1000)
}
function adios(nombre){
    setTimeout(function(){
        console.log(`Adios ${nombre}`)
        terminar()
    },1000)
}
function terminar(){
    console.log('Termino proceso')
}

hola('fdo', soyAsincrona)```

Mi comprensión del tema

let hola = (name,callback) => {
    setTimeout(() => {
        console.log(`Hola ${name}`);
        callback();
    }, 1000);
}

let adios = (name, callback) => {
    setTimeout(()=>{
        console.log(`adiós ${name}`);
        callback();
    },1000);
}

console.log('Iniciando saludo');
hola('Juan', () =>{
    adios('Juan', () =>{
        
        console.log(`terminando saludo`);
    });

});

callback.js

function hola(nombre, miCallback) {
    setTimeout(function () {
        console.log('hola ', nombre)
        miCallback(nombre);
    }, 1500)
}

function adios(nombre, otroCallback) {
    setTimeout(function () {
        console.log('adios ', nombre)
        otroCallback();
    }, 1000)
}

console.log('iniciano pro')
hola('thony', function (nombre){
    adios(nombre, function (){
        console.log('terminando pro')
    })
});

// hola('thony', function (){})  //mal hecho
//     adios('thony', function (){
//         console.log('terminando pro')
//     })
// ;

Cabe destacar que Los callbacks tienen un comportamiento sincrono por defecto. Aunque este comportamiento se puede modificar/alterar utilizando métodos asíncronos como setTimeOut. setTimeOut, ejecuta una función o evalúa una expresión después de un número específico de milisegundos

Los callbacks es el inicio de todo, Las promesas por detrás utilizan callbacks, y que buena manera lo ha explicado el profesor.

Algo que siento que debe quedar de todo esto es: podemos controlar el orden de ejecución de nuestros callbacks, anidandolos uno detrás del otro, y a su vez, podemos ir compartiendo la información entre ellos

Me gusta mas este curso que el anterior, el otro estuvo mas orientado a express

Genial como explica este profe! :3

la mejor explicación de que carajos es callback,
en cursos anteriores lo mencionan, por fin lo entiendo,
el profe Carlos que otros cursos tiene ???

Sincrónico = sucede al mismo tiempo. Asincrónico = no sucede al mismo tiempo

Tratando de crear un ejemplo bien esclarecedor conseguí este

Que genera esta salida

Usando Callbacks

Obtenemos esta salida

Recordar que el metodo setTimeout es una funcion que simulamos la tardanza de una peticion, para que se vea el concepto de asincrona porque se segira ejecutando despues de un intervalo de tiempo.

En resumen:
podria llamarse como un evento de cadena.
Ejemplo:
Declaracion de funciones a y b
Para forzar que despues de ejecutar las operaciones de la funcion a se ejecute la funcion b es necesario hacer un evento de cade le llamaria yo, mandando la funcion b a la funcion a para que despues de realizar sus operaciones pueda ejecutar la funcion b,

Conclucion:
un callback se crea cuando insertamos una función como valor de un parámetro de otra función asi de facil .

Este cuate es el exceso! muy buena explicación.

Chicxs , también podemos llamar la ruta de una carpeta o donde tengamos el archivo con dos comandos que me enseño alguien: cd y ls.

cd: Abrimos las carpetas
ls: nos muestra todos los archivos que tenemos en la carpeta
node: llamamos el tipo de archivo

Recuerden que con Tab nos ayuda a autocompletar el nombre de la carpeta o archivo y así evitamos errores.

Otro ejemplo para entender los callback.

function primero (segundo){
    setTimeout(function(){
        console.log("PRIMERO");
        segundo();
    }, 3000);
}

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

primero(segundo);

Nosé si lo veamos mas adelante , pero yo he usado async de JS para trabajar asincronamente

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/async_function

Les comparto esto, saludos

https://www.youtube.com/watch?v=qos3eC3It3A

Un callback es una función que se pasa como parámetro a otra función, para que sea ejecutada dentro de ella.
El callback usualmente utiliza el resultado de la función a donde fue enviada.

function hola(nombre, despedirse) {
    setTimeout(function () {
        console.log('Hola '+ nombre);
        despedirse(nombre);
    }, 1500);
}

function adios(nombre, mensaje_Terminando) {
    setTimeout(function() {
        console.log('Adios ' + nombre);
        mensaje_Terminando();
    }, 1000);
}

function mensaje_Terminando(){
    console.log('Terminando proceso...');
}

function despedirse(nombre) {
    adios(nombre, mensaje_Terminando);
}


console.log('Iniciando proceso...');
hola('Julio', despedirse); 

En el anterior código se ha pasado la función “despedirse” como un callback.

no entendi nada de callback

Carlos es el mejor profe que he tenido en Platzi, es muy bueno explicandoooo

Holaaa,
dejo link de grupo para ayudarnos y sacarnos dudas sobre js: https://chat.whatsapp.com/EbXGamz5GRt9C4dN7NNwYa

como consejo le diria que tomaran otros cursos de JS para entender perfetamente lo que dice el profesor, no saben como ayuda y que satisfaccion da entender mucho las arrow function y el saber lo basico de asincronismo

Más allá del nodemon, o del Live Server que ofrece VSCode, para esta primera parte puede ser útil otro complemento, Quokka.

Os dejo un vídeo donde **Fazt **habla sobre ella.
Quokka.js, Curso Práctico de Quokka.js

Un saludo.

Código final de la Clase

function hola(nombre, miCallback) {
    setTimeout(function () {
        console.log("Hola, " + nombre);
        miCallback(nombre);
    }, 1500);
}

function adios(nombre, otroCallback) {
    setTimeout(function () {
        console.log("Adios, " + nombre);
        otroCallback();
    }, 1000);
}

console.log("Iniciando proceso...");
 hola("Carlos", function () {
     adios("Carlos", function () {
         console.log("Terminando proceso...");
     });
 });

Resumiendo:

• Una función en JavaScript puede recibir otra función como un argumento.
• Pasar una funcion como argumento es un concepto de programación poderoso que puede ser usado para notificar de que algo a ocurrido.
• Dependiendo de si se ejecuto una tarea (tanto si falla o no) podemos contralar el ese flujo.
• Procura no anidar demasiados callbacks, esto genera algo llamado callback hell que reduce la legibilidad del codigo.

Leer más

Con lo aprendido en el curso, jugueteando un poco con lo aprendido, programe una pequeña historia (muy mala) a punta de callbacks.
Psdt: La historia solo tiene 8 lineas jaja, pero es trabajo honesto.

Codigo 👇

let nombre = "Mauricio";
let tiemposDeEspera = [1500, 2000, 2500];

function linea1(callback1) {
  setTimeout(function () {
    console.log("Hola,", nombre);
    callback1();
  }, tiemposDeEspera[0]);
}

function linea2(callback2) {
  setTimeout(function () {
    console.log("Te contare una historia...");
    callback2();
  }, tiemposDeEspera[0]);
}
function linea3(callback3) {
  setTimeout(function () {
    console.log("ESTATE ATENTO 👀");
    callback3();
  }, tiemposDeEspera[0]);
}
function linea4(callback4) {
  setTimeout(function () {
    console.log("Habia una vez un raton muy feo.");
    callback4();
  }, tiemposDeEspera[1]);
}
function linea5(callback5) {
  setTimeout(function () {
    console.log("Era tan pero tan feo");
    callback5();
  }, tiemposDeEspera[2]);
}
function linea6(callback6) {
  setTimeout(function () {
    console.log("que un día se desperto");
    callback6();
  }, tiemposDeEspera[2]);
}
function linea7(callback7) {
  setTimeout(function () {
    console.log("se vio al espejo");
    callback7();
  }, tiemposDeEspera[2]);
}
function linea8(callback8) {
  setTimeout(function () {
    console.log("y se murio del susto.");
    callback8();
  }, tiemposDeEspera[1]);
}
function linea9(callback9) {
  setTimeout(function () {
    console.log("FIN");
    callback9();
  }, tiemposDeEspera[0]);
}

console.log("Iniciando historia...");
linea1(function () {
  linea2(function () {
    linea3(function () {
      linea4(function () {
        linea5(function () {
          linea6(function () {
            linea7(function () {
              linea8(function () {
                linea9(function () {
                  console.log("Terminando historia...");
                });
              });
            });
          });
        });
      });
    });
  });
});

Alma bendita, entendí asincronía!!! No lo puedo creer

wow magistral!!

Excelente explicación

Callback en pocas palabras es una función la cual es utilizada como parámetro en otra función, Excelente clase 🤯

Un callback (llamada de vuelta) es una función que recibe como argumento otra función y la ejecuta.

function saludo(nombre,callback) {
console.log("Hola "+nombre);
setTimeout(()=>{
callback()
}, 2000)
}

function adios(nombre,otroCallback) {
setTimeout(()=>{
console.log("Adios "+nombre);
otroCallback()
}, 3000)
}

console.log(‘Iniciando proceso…’)
saludo(“Juan”,()=>{
console.log(“Que me cuentas?”)
adios(‘Juan’, ()=>{
console.log(“Cuidate!!!”)
})
})

Qué belleza, con esto entendí mucho sobre JS!!!

Gran explicacion !!! 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.

Si lo he entendido bien, en la declaración de la función se llama al callback, y en la llamada a la función se declara el callback.

Javascript delega en el navegador ciertas tareas o asocia funciones que deberán ser ejecutadas al ser completadas. Estas funciones se llaman callback, y una vez que el navegador ha regresado con la respuesta, el callback asociado pasa a la cola de tareas para ser ejecutado, una vez que JavaScript haya terminado todas las instrucciones que estan en la pila de ejecución.

¡Explicas demasiado bien!

No entiendo como utilizar nodemon, lo instale pero no se supone que hay que agregarlo al package.json o algo por el estilo para poder acceder a sus funcionalidades? Muchas gracias

🤯

El famoso callback hell… creo que es el tema de la siguiente clase

Anexo mi codigo

function iniciar(Callback1){
    setTimeout(function(){
        console.log("Iniciando proceso");
        Callback1();
    }, 0)
}

function Hola(nombre, Callback2){    
    setTimeout(function(){
        console.log("Hola,",  nombre);
        Callback2();
    },  0);
}

function Adios(nombre, Callback3){
    setTimeout(function(){
        console.log("Adios,", nombre);
        Callback3();
    },  0);
    
}

function finalizar(Callback4){
    setTimeout(function(){
        console.log("Finalizar programa");
    }, 0);
}

iniciar(function(){
    Hola('Pedro', function(){
        Adios('Pedro', function(){
            finalizar(function(){

            })
        })
    })
    
})

Las funciones son elementos de primer nivel
Al ser ciudadanos de primera clase yo puedo utilizarlas de cualquier forma, por ejemplo pasandolas como parametros a eso llamamos callback

Vi los callback en los fundamentos de Js, y ahora otra vez, está vez ya lo tengo super claro.

genail

callback hell C;

callback again !!!

let name = 'Marco';
const hola = (name, myCallback) => {
    setTimeout(() => {
        console.log(`Hola ${name}`);
        myCallback();
    }, 1000);
}

const adios = (name, otherCallback) =>{
    setTimeout(() => {
        console.log(`Adios ${name}`);
        otherCallback();
    }, 1000);
}
console.log('iniciando proceso...');
    hola(name,()=>{
        adios(name, () =>{
            console.log('finalizando proceso...');
        });
});

function hola (nombre,micallback){
    setTimeout(function() {
        console.log("Hola "+nombre)
        micallback(nombre)
    }, 1000);
}
function hablar(callbackHablar) {
    setTimeout(function() {
        console.log("Bla bla bla")
        callbackHablar()
    })
}
function adios(nombre,otrocallback){
    setTimeout(function() {
        console.log("adios "+nombre)
        otrocallback()
    }, 4000);
}
function conversacion (nombre,veces,callback){
    if(veces > 0) {
        hablar(function () {
            conversacion(nombre,--veces,callback)
        })
    } else {
        adios(nombre,callback)
    }
}

console.log("Iniciando el proceso")
hola('Jair',function (nombre){
    conversacion(nombre,10,function(){
        console.log("Proceso terminado")
    })
})```

las funcioones en nodejs son elementos de primera clase

Un mejor nombre para la clase sería “Callbacks e introducción a Asíncronía”

bueno practique un poco y hice unos ejercicios sigamos 😄

super! 😃

callback hell!

super!!!

super!

Usar callbacks

fasinnante clase we :v

con la asincronia podemos decir quien va primero y quien va despues, para tener control de la ejecucion en el codigo

excelente explicación

al fin entendí este concepto!!! que ya había visto en otros 3 cursos de JS pero no me había quedado del todo claro!

gracias profe Carlitos!!!