Este profe es maquina loco, se le entiende todo!
Conocer los conceptos básicos de NodeJS
Instalación de Node.js
Node: orígenes y filosofía
EventLoop: asíncrona por diseño
Monohilo: implicaciones en diseño y seguridad
Configurar las variables de entorno en Node.js
Herramientas para ser más felices: Nodemon y PM2
Cómo manejar la asincronía
Callbacks
Callback Hell: refactorizar o sufrir
Promesas
Async/await
Entender los módulos del core
Globals
File system
Console
Errores (try / catch)
Procesos hijo
Módulos nativos en C++
HTTP
OS
Process
Utilizar los módulos y paquetes externos
Gestión de paquetes: NPM y package.json
Construyendo módulos: Require e Import
Módulos útiles
Datos almacenados vs en memoria
Buffers
Streams
Conocer trucos que no quieren que sepas
Benchmarking (console time y timeEnd)
Debugger
Error First Callbacks
Manejar herramientas con Node
Scraping
Automatización de procesos
Aplicaciones de escritorio
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
Paga en 4 cuotas sin intereses
Termina en:
Aportes 182
Preguntas 20
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)
.
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:
Pero, mientras esperas el platillo fuerte pides:
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:
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:
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');
} )
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)
}
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
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.
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.
*/
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 “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.
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!!!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.