⚡ JS Fácil: Funciones & Asincronía

Una guía visual e interactiva para dominar conceptos clave de JavaScript.

1. Funciones Tradicionales

💡 En resumen: Son bloques de código reutilizables. Reciben datos (parámetros), procesan algo y te devuelven un resultado.
🍳 Analogía: Una máquina de café. Le pones granos (parámetro) y te entrega café servido (resultado).
// 1. Declaración estándar (Tiene Hoisting: puedes llamarla antes de crearla)
function calcularArea(base, altura) {
  return base * altura;
}

// 2. Expresión (Guardada en variable, NO tiene hoisting)
const saludar = function(nombre) {
  return `Hola, ${nombre}`;
};

2. Funciones Arrow (Flecha) =>

💡 En resumen: Una sintaxis moderna, limpia y compacta para escribir funciones rápidamente. 
// Sintaxis Completa (Larga)
const sumar = (a, b) => {
  return a + b;
};

// Sintaxis Corta (Retorno implícito automático en una sola línea)
const duplicar = x => x * 2;

3. Callbacks (Pasar funciones como parámetros)

💡 En resumen: Consiste en enviar una función dentro de otra función como si fuera una variable o un "ingrediente".
🔔 Analogía: Dejarle tu número de teléfono a un taller. No te quedas esperando allí; les dices "llámenme cuando el auto esté listo".
⚠️ ¡Ojo al pasar la función! Debes escribir solo su nombre (ej: miCallback). Si le pones paréntesis miCallback(), la ejecutarás de inmediato en lugar de pasarla como parámetro. 
function procesarUsuario(id, instruccionAlTerminar) {
  console.log(`1. Buscando usuario ${id}...`);

  // Ejecutamos la función recibida agregando los paréntesis ()
  instruccionAlTerminar("Carlos");
}

// Pasamos una función flecha como segundo parámetro:
procesarUsuario(10, (nombre) => {
  console.log(`2. ¡Usuario encontrado: ${nombre}!`);
});
🧪 Probador Interactivo
Haz clic para ver el Callback en acción...

4. Promesas (Promises)

💡 En resumen: Representan un valor que estará disponible ahora, en el futuro o nunca (si ocurre un error).
🎟️ Analogía: El ticket con un número que te dan en la pizzería. No es la pizza en sí, pero garantiza que la recibirás o te avisarán si se acabó.
const obtenerDatos = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("✅ ¡Datos cargados con éxito!");
    }, 1500);
  });
};

// Consumo básico con .then()
obtenerDatos().then(respuesta => console.log(respuesta));
🧪 Probador Interactivo
En espera de tu orden...

5. Async / Await

💡 En resumen: Una forma más clara y fácil de leer para trabajar con Promesas. Hace que el código asíncrono parezca secuencial (de arriba a abajo). 
const pedirServidor = async () => {
  try {
    // El código se "pausa" aquí hasta que obtenerDatos() termine:
    const resultado = await obtenerDatos(); 
    console.log(resultado);
  } catch (error) {
    console.error("Ocurrió un error:", error);
  }
};
🧪 Probador Interactivo
Estado: Inactivo.

6. Aplicación Real: Escuchadores de Eventos

💡 En resumen: Es la aplicación práctica más común de las funciones como parámetro. Le dices al navegador: "Cuando el usuario haga clic en este botón, ejecuta esta función". 
const boton = document.querySelector('button');

// Opción A: Pasando una Arrow Function directamente
boton.addEventListener('click', (evento) => {
  console.log("¡Hiciste clic!");
});

// Opción B: Pasando el nombre de una función existente (SIN paréntesis)
function miManejador() { 
  console.log("Clic detectado"); 
}
boton.addEventListener('click', miManejador);