Qué son los Callbacks

Al principio es difícil entender un callback de esta forma. Piensas, “si ya tengo la función sum, para que hacer un callback, puedo llamarla tal cual y omitir ese paso”.
Pero piensa que tienes funciones para sumar, restar, multiplicar …como hacer una calculadora. Las declaras todas en lista, y abajo solo tienes que usar un callback que va tirando de todas a la vez.

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

function rest(num1, num2) {
    return num1 - num2;
}

function mult(num1, num2) {
    return num1 * num2;
}

function div(num1, num2) {
    return num1 / num2;
}

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

Ahora ya tiene sentido!!!

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

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

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

function calc(num1, num2, callback) {
    return callback(num1, num2);
}; //No necesariamente se debe llamar callback

console.log(calc(2, 2, sum)); //sum debe estar sin () y sin argumentos
//

.

• Luego se selecciona el código y al dar click derecho, seleccionar Run Code (debe estar instalado la extensión Code Runner).
• Aparece abajo la consola con la salida de la suma de los 2 números.
• Para el segundo ejemplo, se tiene un setTimeout que funciona como un callback, en el código está configurado para imprimir el mensaje 2 segundos después de ejecutar el código con Run Code:

setTimeout(function (){
   console.log('Hola JavaScript');
}, 2000) 
//la función es anónima por eso no tiene nombre

.

• En el tercer ejemplo tenemos un setTimeout con una función que se le pasa por argumento:

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

setTimeout(gretting, 2000, 'Maria'); //se pasa primero la función, de segundo el tiempo de espera y el argumento

🆘 Si tienen problemas con conseguir las comillas invertidas `` en el enlace hay varias respuestas: aquí

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

Para comprender este tema, hice una función para una orden dentro de un restaurante.

function makingOrder(orden) {
    console.log(`Ready  ${orden}`);
}


function order(orden, callback) {
    console.log(`Taking order ${orden}`);
    setTimeout(() => {
        callback(orden)
    }, 3000)
    console.log(`Doing order ${orden}`,);
}

order('Burger', makingOrder);

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

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

Hola amigos, hay una extensión en el VSC que nos permite trabajar con las template literals, se llama Template String Converter, que básicamente podemos estar trabajando con cualquier comillas y la extensión detecta cuando queremos hacer esto ${ } y nos cambia nuestras comillas normales a las comillas francesas automáticamente, así pueden usar sus comillas normales y con esta extensión les ayudará a cambiarlas de forma automática. Es util cuando no las tienen de forma normal en su teclado https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converter

Espero les sea de ayuda, Saludos 😄

profesor debo decirle que usted a mejorado su nivel a la hora de explicar la verdad antes me costaba entenderlo pero ahora es mas facil me gusta mucho como explica ahora a mejorado para bien :3

Los callbacks aseguran que una función no se va a ejecutar antes de que se complete una tarea, sino que se ejecutará justo después de que la tarea se haya completado. Nos ayuda a desarrollar código JavaScript asíncrono y nos mantiene a salvo de problemas y errores.
Ejemplo: digamos que necesito que en pantalla se muestre un mensaje solo despues que el usuario haga click en un boton, tenemos el boton:
<button id=“callback-btn”>
Haga clic aquí
</button>
Esta vez veremos un mensaje en la consola solo cuando el usuario haga clic en el botón:
document.queryselector(
"#callback-btn").addEventListener(“click”, function() {
console.log(“El usuario ha hecho clic en el botón.”);
});

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

Una función de callback es una función que se pasa a otra función como un argumento, que luego se invoca dentro de la función externa para completar algún tipo de rutina o acción.

Ejemplo:

function saludar(nombre) {
  alert('Hola ' + nombre);
}

function procesarEntradaUsuario(callback) {
  var nombre = prompt('Por favor ingresa tu nombre.');
  callback(nombre);
}

procesarEntradaUsuario(saludar);

Les recomiendo esta explicación esta un poco mas sencilla y clara para mi https://www.youtube.com/watch?v=zQVnDW8SaA0&ab_channel=InformáticaDP Éxito Muchachos!!

"One approach to asynchronous programming is to make functions that perform a slow action take an extra argument, a callback function. The action is started, and when it finishes, the callback function is called with the result."
Libro Eloquent JavaScript

Si tienes un tecaldo TKL o 60%, en la distribución en inglés, las comillas francesas las puedes hacer con fn + esc
``
Espero te sirva, saludos! 😃

También podemos ejecutar el código desde la Terminal de Code, ubicados dentro de la carpeta /src/callback, con el comando node:

node index.js

Código de ejemplo en esta clase:

//index.js

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

function calc(a, b, cb) {
    return cb(a,b);
}

console.log(calc(10, -8, sum));

setTimeout(function () {
    console.log('¡Hola JavaScript!')
}, 2000);

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

setTimeout(gretting, 5000, 'Walter');

Códigos usados en Clase:

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

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

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

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

setTimeout(gretting, 2000, `Oscar`)

Si vienes de Python y entiendes el concepto de “decoradores”, esto no se te hará tan complicado. Esto de los Callbacks es un tema un poco enredado, pero te recomiendo practicar con unos 5 o más ejercicios donde te retes a entender la lógica que estás aplicando. 🔥
.
Practicando perderás el miedo a código complejo. 💪🏻

Claro, ahora si le veo un buen uso.

const sum = (a, b) => a + b;
const res = (a, b) => a - b;
const mult = (a, b) => a * b;
const div = (a, b) => a / b;
const calc = (a, b, operation) => operation(a, b);
console.log(calc3(4, 5, sum1)); 

Aclaración del min 12:10

setTimeOut no es un callback, la documentación menciona que callback es la función que se pasa a otra función y setTimeOut no se está pasando a otra función, por lo tanto no es un callback, la función anónima que tiene dentro si lo es.

RESUMEN: Con estos ejemplos podemos entender que tenemos una serie de elementos dentro del lenguaje de programación que usan por sí mismos el concepto de “callbacks”
.
Lo que significa es… tener una función que **recibe **otra función para ser ejecutada, según sea el caso.

Debo admitir que estos conceptos de asincronismo me costaba entenderlos, siempre iba predispuesto a que ere difícil de entender, pero con este curso, la genial explicación de Oscar y los valiosos aportes de la comunidad he aclarado mucho el concepto! Gracias Platzi.

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

Callbacks:

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

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

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

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

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

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

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

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

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

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

output:

11
30
{ first: 5, second: 6, sum: 11, multiply: 30 }

¿Qué son los Callbacks?

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

Para entender mejor, aquí hay un ejemplo sencillo:

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

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

hacerAlgo(callback);

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

Los callbacks son especialmente útiles cuando trabajas con operaciones asíncronas, ya que permiten controlar el flujo de ejecución y manejar acciones después de que una operación haya finalizado. Sin embargo, a medida que las aplicaciones se vuelven más complejas, el anidamiento excesivo de callbacks puede conducir a un patrón conocido como “callback hell” (infierno de callbacks), lo que puede dificultar la lectura y el mantenimiento del código.

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

Espero sea de utilidad. 👨‍💻

Justo necesito colocar un poco de asíncrono a un proyecto existente en php en mi trabajo y me apareció esta recomendación. 😄 Espero poder aplicar los conceptos a lo que necesito.

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

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

(It’s like asking someone to call you back when they’re done with something. )

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

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

Código de la clase:

• Call-Back:

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

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

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

• setTimeout:

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

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

setTimeout(grettin, 2000, 'Santiago');

Les comparto lo que estuve practicando

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

function iva(n){
    return n*0.12
}

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

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


console.log(ingresovalores( 20 , 20 , 20 , 20 , 20 , totaligual , 65))
> 

Del curso de Estructuras de Datos con JavaScript me gustó trabajar con la consola del navegador y copiar, pegar, borrar, copiar el código… y ahora soy una especie de mapache al que le disgusta tener que escribir ‘console.log( )’ para ver los resultados.

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

Arg1, 2 y el resto, serán pasados a func | código.

excelente explicación

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

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

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

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

Entendí que en la funcion “nombreCompleto” con ayuda de “juntar” estoy asignando los valores de nombre y apellido a la función “nombre” cuando la mando a llamar como parámetro de la función “nombre completo”.

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

Ejemplo de la documentación:

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

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

ask_for_name(greeting);> 

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

Explicación:

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

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

Comparto mis practicas:

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

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

//Ejemplo 1

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

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

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



//Ejemplo 2

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



//Ejemplo 3

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

setTimeout(saludos, 3000, 'Satoshi');

Mis apuntes:

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

//Ejemplo 1

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

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

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

//Ejemplo 2

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

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

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

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

//---UTILIDAD---

//Calculadora

const sum = (a, b) => a + b;
const res = (a, b) => a - b;
const mult = (a, b) => a * b;
const div = (a, b) => a / b;
const calc = (a, b, operation) => operation(a, b);
console.log(calc(4, 5, res));

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

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

6/26 Qué son los Callbacks

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

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

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

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

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

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

setTimeout(gretting, 2000, 'Oscar');

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

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

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

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

primero();
segundo();

// resultado de consola
//PRIMERO
//SEGUNDO 

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

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

primero();
segundo();

// resultado de consola
//SEGUNDO 
//PRIMERO   ---- acá ya no me sirve el programa 🤢

//// caso 3 lo arreglo con callback 😎

function primero (segundo){

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

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

primero(segundo);

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

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

Callback function

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

Here is a quick example:

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

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

processUserInput(greeting);

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

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

setTimeout()

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

Syntax

setTimeout(code)
setTimeout(code, delay)

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

Mis apuntes en Notion💚

/callback

        //Ejemplo

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

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

        //setTimeout 

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

    function saludar (nombre){
        console.log(`hola ${nombre} como estas`)
    }           //funcion tiempo argumentos de funcion 
    setTimeout(saludar, 2000, 'sebas')

const operations = {
  suma: (val1, val2) => val1 + val2,
  substract: (val1, val2) => val1 - val2,
  multiply: (val1, val2) => val1 * val2,
  divide: (val1, val2) => val1 / val2,
}

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

calc(4,2,operations.multiply);

El callback siempre será el último argumento que se pasa a la función que la recibe, esto por convenciones de JavaScript.

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

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

Le comparto este ejemplo que hice utilizando Callbacks consiste en validar la contraseña o el usuario según la función que enviemos como parámetro:

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

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

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


//callback

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


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

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

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

Mi aporte.

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


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

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

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

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



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

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

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

Ejemplo:

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

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

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

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

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

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

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

AltGr + } = ``

Excelente

Descripcion grafica del Asincronismo

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

Consejo: descarguen la extensión en VSC llamada “Template String Converter” la misma convierte las comillas simples o dobles en comillas francesas al momento de detectar que dentro de ellas se introduce ${ } … Un golazo!!!

Otra forma rara de hacer lo de la suma:

function add(a, b, callback) {

  callback(a + b);

}



add(2, 4, function(sum) {

  console.log(sum); // 6

});

Un ejemplo clásico sería addEventListener

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

  // Perform some action on click inside this callback

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

});

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

Usando callback para múltiples operaciones:

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

function rest(num1, num2) {
    return num1 - num2;
}

function mult(num1, num2) {
    return num1 * num2;
}

function div(num1, num2) {
    return num1 / num2;
}

function operAritmetica(num1, num2, callbackCalc) {
    return console.log(callbackCalc(num1, num2));
}

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

calc(10, 2,);

Mi resumen:

Callbacks

Una función de callback es una función que se pasa a otra función como un argumento, que luego se invoca dentro de la función externa para completar algún tipo de rutina o acción.

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

// function calc(num1, num2, callback) {
//   return callback(num1, num2);
// }
function calc(num1, num2, sumNumbers) {
  return sumNumbers(num1, num2);
}
console.log( calc(2, 2, sum) ); //>> 4

1. Al pasar la función como argumento, no se debe colocar los () ya que se estaría invocando directamente y esto causaría un error en el código. Por lo tanto solo se debe ingresar el nombre de la función, para que luego sea invocada dentro de la función externa.

2. No es necesario que la función que se pasa por argumento se llame “callback”, ya que este nombre se utiliza para indicar la referencia de qué es lo que se está haciendo, pero no es obligación y podremos poner un nombre mas acorde a la tarea que realizará la función.

setTimeOut

Nos permite ejecutar código en un tiempo determinado

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

Parámetros de setTimeout:

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

1. functionRef: recibe una función la cual será la tarea a ejecutar,
2. Delay: el tiempo, en milisegundos, que el temporizador debe esperar antes de que se ejecute la función o el código especificado.
3. param1, …, paramN (Opcional): argumentos que pueda necesitar la función.

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

setTimeout(gretting, 2000, 'Gaby');

Lecturas recomendadas

SetTimeOut (MDN)

Callbacks (MDN)

usando arrow functions

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

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

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

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

recursividad DETECTED …

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

Asíncronismo en JS - Notion

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

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

Una forma más corta de hacerlo es usando arrow functions y dejar el return implícito, queda más corto y claro el código

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

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

Mi aporte

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

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

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


// --


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

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

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


// --

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


// -- 

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

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

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

Buah que interesante lo del setTimeout()

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

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


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

}

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

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

Solo se deben agregar como parámetros en la función y luego dárselos como argumentos en la API, dejaré un ejemplo por si a alguien le puede servir, así como dato.

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

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

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

¿Por qué mi consola tarda .5 segundos más que la del profe? :c

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

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

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

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

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

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

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

//result
//They wont pay us

Esta muy genial lo de los callbacks 😮

explicacion sencilla y suficiente para entender callbacks

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

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

Los callbacks los podemos escribir

• Como lo hizo el profe en esta clase

 function tacos(tipo){
    return `Tacos de ${tipo}🌮`;
  }

  function carne(tipo, callback){
     return callback(tipo)
  }
  console.log(carne("Asado", tacos));

• Usando arrow functions

function tacos(tipo, callback){
    return callback (`Tacos de ${tipo}🌮`)
}

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