No tienes acceso a esta clase

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

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

1D
19H
58M
0S

Callbacks

7/31
Recursos

Aportes 182

Preguntas 20

Ordenar por:

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

o inicia sesi贸n.

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 鈥渇unction鈥 seguido del nombre de la funci贸n (鈥渟aludar鈥 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 (鈥渘ombre鈥 y 鈥渁pellido鈥 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 鈥渞eturn鈥 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 鈥渆nding鈥 que contenga un mensaje, despu茅s declaremos una funci贸n 鈥渟tarting鈥 que igual contenga un mensaje, pero, esta va a recibir un solo par谩metro, el cual llamaremos 鈥渃allback鈥, 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 鈥渢imeout鈥.

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(鈥渁dios鈥, nombre);
otroCallback();
},1000)
}

console.log(鈥渋nicia el programa鈥);
hola(鈥渢omas鈥,(nombre)=>{
adios(nombre,()=>{
console.log(鈥渇inaliza 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 鈥淲indows PowerShell鈥 y abrir como administrador, luego escribir

Set-ExecutionPolicy Unrestrict

y luego verificar si funciono escribiendo: Get-ExecutionPolicy
deberia salir 鈥淯nrestrict鈥

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 鈥渃allback鈥 (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

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 鈥渄espedirse鈥 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(鈥業niciando proceso鈥︹)
saludo(鈥淛uan鈥,()=>{
console.log(鈥淨ue me cuentas?鈥)
adios(鈥楯uan鈥, ()=>{
console.log(鈥淐uidate!!!鈥)
})
})

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 鈥淐allbacks 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!!!