Pila de ejecución de JavaScript

Si estás familiarizado con JavaScript, probablemente hayas oído hablar de la pila de ejecución y el bucle de eventos. Estos son dos componentes clave del motor de JavaScript que se utilizan para controlar el flujo de ejecución del código y manejar la asincronía.

¿Qué es la pila de ejecución?

La pila de ejecución en JavaScript es una pila LIFO (Last In, First Out) que se utiliza para almacenar y controlar el contexto de ejecución de una función. Cuando se llama a una función, su contexto de ejecución se añade a la pila de ejecución. A medida que se ejecuta el código, se van añadiendo elementos a la pila y eliminando elementos de la parte superior de la misma.

Ejemplo de pila de ejecución

Para entender mejor cómo funciona la pila de ejecución, veamos un ejemplo. Supongamos que tenemos el siguiente código:

function a() {
  console.log('Función A');
  b();
}

function b() {
  console.log('Función B');
  c();
}

function c() {
  console.log('Función C');
}

a();

Cuando se llama a la función a(), su contexto de ejecución se añade a la pila de ejecución. Dentro de a(), se llama a la función b(), por lo que su contexto de ejecución se añade a la pila de ejecución sobre el de a(). Dentro de b(), se llama a la función c(), por lo que su contexto de ejecución se añade a la pila de ejecución sobre el de b().

En este punto, la pila de ejecución se vería así:

c()
b()
a()

Una vez que la función c() termina de ejecutarse, su contexto de ejecución se elimina de la pila. Luego, la función b() termina de ejecutarse y su contexto de ejecución se elimina de la pila. Por último, la función a() termina de ejecutarse y su contexto de ejecución se elimina de la pila. En este punto, la pila de ejecución estaría vacía.

function a() {
  console.log('Función A');
  b();
  console.log('B sale de la pila, termina ejecución');
}

function b() {
  console.log('Función B');
  c();
  console.log('C sale de la pila, termina ejecución');
}

function c() {
  console.log('Función C');
}

// Función A
// Función B
// Función C
// C sale de la pila
// B sale de la pila

¿Qué es el bucle de eventos?

El bucle de eventos es un mecanismo que se utiliza en JavaScript para manejar la asincronía. En lugar de esperar a que una tarea asíncrona se complete antes de continuar con otra tarea, el bucle de eventos permite que el código siga ejecutándose mientras espera que la tarea asíncrona se complete.

Cuando se ejecuta una tarea asíncrona, como una petición de red o una animación, el código se coloca en una cola de eventos en lugar de en la pila de ejecución. El bucle de eventos se encarga de tomar los elementos de la cola de eventos y ejecutarlos en la pila de ejecución.

Ejemplo de bucle de eventos

Para entender mejor cómo funciona el bucle de eventos, veamos otro ejemplo. Supongamos que tenemos el siguiente código:

console.log('Inicio');

setTimeout(function() {
  console.log('Temporizador');
}, 0);

console.log('Fin');

Cuando se ejecuta este código, primero se imprime 'Inicio' en la consola. A continuación, se llama a la función setTimeout() con un tiempo de espera de 0 milisegundos. A pesar de que el tiempo de espera es 0, la función setTimeout() se ejecutará de forma asíncrona y no se añadirá a la pila de ejecución hasta que todas las otras tareas se completen.

A continuación, se imprime 'Fin' en la consola. Finalmente, cuando todas las tareas se han completado, la función setTimeout() se añade a la cola de eventos y, posteriormente, a la pila de ejecución. En este punto, se imprimirá 'Temporizador' en la consola.

Ejemplos adicionales

Para entender mejor cómo se utilizan la pila de ejecución y el bucle de eventos en situaciones reales, aquí hay algunos ejemplos adicionales:

Ejemplo 1: Botón de carga

Supongamos que tenemos un botón de carga en una página web que, cuando se hace clic, carga una imagen desde un servidor remoto y la muestra en la página. El código para este botón podría verse así:

button.addEventListener('click', function() {
  img.src = '<https://example.com/image.jpg>';
});

Cuando se hace clic en el botón, se añade un evento a la cola de eventos. Este evento se ejecutará después de que todas las otras tareas se completen. Cuando se ejecuta el evento, se carga la imagen desde el servidor y se muestra en la página.

Ejemplo 2: Animación

Supongamos que tenemos una animación que hace que un elemento de la página se desplace de izquierda a derecha. El código para esta animación podría verse así:

function animate() {
  element.style.left = '0';

  setTimeout(function() {
    element.style.left = '100%';
    animate();
  }, 1000);
}

animate();

En este ejemplo, la función animate() se llama a sí misma de forma recursiva utilizando setTimeout(). Cada vez que se llama a la función, se actualiza la posición del elemento y se establece un temporizador para llamar a la función de nuevo después de un segundo. Este patrón de recursión asíncrona es común en las animaciones en JavaScript.

Conclusión

En resumen, la pila de ejecución y el bucle de eventos son dos componentes clave del motor de JavaScript. La pila de ejecución se utiliza para controlar el flujo de ejecución del código, mientras que el bucle de eventos se utiliza para manejar la asincronía. Entender cómo funcionan estos dos componentes es esencial para escribir código eficiente en JavaScript.

Espero que esta introducción a la pila de ejecución y el bucle de eventos te haya resultado útil. Si quieres aprender más sobre JavaScript, te recomiendo que consultes las siguientes fuentes:

• MDN Web Docs

• W3Schools

• JavaScript.info