CÓMO FUNCIONA EL MOTOR DE JAVASCRIPT

• Manejar peticiones HTTP
• Actualizar la interfaz
• Ejecutar código sin bloquear la página.

¿Por qué es importante entender el motor de JavaScript?

• Escribir código más eficiente y predecible.
• Entender por qué el código asíncrono no bloquea la ejecución.
• Evitar errores clásicos como "Callback Hell" o bloqueos del hilo principal.
• Mejorar significativamente el rendimiento de tus aplicaciones.

Componentes Principales

• Call Stack: Es una estructura de datos LIFO (Last In, First Out). Aquí se ejecuta todo el código síncrono.Cada función que se ejecuta se añade ("push") a la pila. Cuando termina, se elimina ("pop").
  
  

  console.log("Inicio");
  function saludar() {
    console.log("Hola");
  }
  saludar();
  console.log("Fin");
  

  La pila se llena y vacía de arriba hacia abajo de forma ordenada.
• Web APIs: Cuando el código necesita realizar operaciones asíncronas como "setTimeout", "fetch", "eventos del DOM", "localStorage", etc., el motor no las ejecuta en el Call Stack. En su lugar, las delega a las Web APIs del navegador (o a libuv en NodeJS). Estas operaciones se ejecutan fuera del hilo principal de JavaScript.
• Callback Queue: Cuando una operación asíncrona termina, por ejemplo, un "setTimeout" cumple su tiempo) su callback se coloca en esta cola. Es una estructura FIFO (First In, First Out).
• El Event Loop es un proceso constante que vigila dos cosas:
  • Si el Call Stack está vacío.
  • Si hay callbacks en la Callback Queue.
  Cuando el Call Stack está vacío, el Event Loop toma el primer callback de la cola y lo envía al Call Stack para que se ejecute.

Ejemplo

console.log("Inicio");

setTimeout(() => {
  console.log("Tiempo 1");
}, 2000);

setTimeout(() => {
  console.log("Tiempo 2");
}, 1000);

console.log("Fin");

Orden de ejecución

1. Inicio
2. Fin
3. Tiempo 2 (después de 1 segundo)
4. Tiempo 1 (después de 2 segundos)