JavaScript es la columna vertebral de la web y potencia la funcionalidad dinámica del lado del cliente para miles de millones de sitios web y aplicaciones. Pero ¿alguna vez te has preguntado cómo hace JavaScript su magia en segundo plano? En esta publicación, profundizaremos en el funcionamiento interno de la naturaleza de subproceso único de JavaScript y exploraremos el concepto de programación asincrónica.

¿Qué significa un solo subproceso?

Cuando decimos que JavaScript es de "un solo subproceso", significa que tiene una única pila de llamadas. La pila de llamadas es esencialmente la estructura donde JavaScript realiza un seguimiento de las funciones que se ejecutan. Sigue un orden LIFO (Último en entrar, primero en salir), lo que significa que la última función enviada a la pila será la primera en finalizar. A continuación se muestra un ejemplo de cómo funciona esto:

function first() {
    console.log('First function');
}

function second() {
    console.log('Second function');
}

first();
second();

En este ejemplo, la función first() se agrega a la pila y se ejecuta. Una vez que se completa, se retira y la función second() se inserta en la pila y se ejecuta a continuación.

Si bien los lenguajes de un solo subproceso pueden parecer limitados porque solo pueden hacer una cosa a la vez, el uso inteligente de JavaScript de mecanismos asincrónicos le permite simular la multitarea.

El bucle de eventos y la ejecución asincrónica

JavaScript utiliza la ejecución asincrónica para manejar operaciones que pueden tardar mucho en completarse, como solicitudes de red, E/S de archivos o temporizadores. A pesar de tener un solo subproceso, puede gestionar múltiples tareas simultáneamente gracias al bucle de eventos y la cola de devolución de llamadas.

El bucle de eventos

El bucle de eventos es un concepto central en el modelo de concurrencia de JavaScript. Su principal responsabilidad es gestionar cómo JavaScript maneja la ejecución de código asincrónico. Así es como funciona:

1. El código síncrono se ejecuta primero. Cuando se inicia JavaScript, ejecuta todo el código en el ámbito global de forma sincrónica, línea por línea, utilizando la pila de llamadas.

2. Las tareas asincrónicas se envían a las API web (como setTimeout, fetch, etc.) o a las API de Node.js, donde se procesarán en segundo plano.

3. La cola de devolución de llamada es donde se colocan las operaciones asincrónicas una vez que se completan.

4. El bucle de eventos verifica continuamente si la pila de llamadas está vacía. Si la pila está vacía, toma el primer elemento de la cola de devolución de llamadas y lo coloca en la pila de llamadas, lo que permite su ejecución.

La magia del JavaScript asincrónico radica en esta interacción entre el bucle de eventos, la pila de llamadas y la cola de devolución de llamadas. Las operaciones asincrónicas no bloquean la pila de llamadas, lo que significa que JavaScript puede continuar ejecutando otro código mientras espera que se completen las tareas en segundo plano.

Ejemplo: uso de setTimeout

Considere el siguiente ejemplo con una función setTimeout:

console.log('Start');

setTimeout(() => {
    console.log('This runs after 2 seconds');
}, 2000);

console.log('End');

Esto es lo que sucede paso a paso:

1. JavaScript imprime "Inicio".

2. Se llama a la función setTimeout, pero en lugar de bloquear la ejecución durante 2 segundos, se envía a la API web, donde se ejecuta en segundo plano.

3. JavaScript imprime "End", continuando su ejecución sin esperar a que se complete setTimeout.

4. Después de 2 segundos, la función de devolución de llamada dentro de setTimeout se coloca en la cola de devolución de llamada.

5. El bucle de eventos verifica si la pila de llamadas está vacía (que lo está), luego empuja la función de devolución de llamada a la pila y la ejecuta, imprimiendo "Esto se ejecuta después de 2 segundos".

Promesas y Async/Await

Otra forma popular de manejar tareas asincrónicas en JavaScript moderno es a través de Promesas y la sintaxis async/await, que ayuda a que el código sea más legible al evitar devoluciones de llamadas profundamente anidadas (también conocidas como "infierno de devoluciones de llamadas").

Una promesa representa la eventual finalización (o falla) de una operación asincrónica y su valor resultante. Aquí tienes un ejemplo:

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Promise resolved!');
    }, 1000);
});

promise.then(result => {
    console.log(result);  // Output after 1 second: 'Promise resolved!'
});

En lugar de depender de las devoluciones de llamada, podemos usar then() para manejar lo que sucede cuando se resuelve la promesa. Si queremos manejar el código asincrónico de una manera más sincrónica, podemos usar async/await:

async function asyncExample() {
    const result = await promise;
    console.log(result);  // Output after 1 second: 'Promise resolved!'
}

asyncExample();

Esto hace que el código sea más limpio y más fácil de entender, lo que nos permite "esperar" a que se completen las tareas asincrónicas antes de pasar a la siguiente línea de código, aunque JavaScript sigue sin bloquearse internamente.

Componentes clave en el modelo asincrónico de JavaScript

1. Pila de llamadas: donde se ejecuta el código sincrónico.

2. API web/API de Node.js: entornos externos donde se manejan tareas asincrónicas (como solicitudes de red).

3. Cola de devolución de llamadas: una cola donde los resultados de las tareas asíncronas esperan ser enviados a la pila de llamadas para su ejecución.

4. Bucle de eventos: el sistema que coordina entre la pila de llamadas y la cola de devolución de llamadas, garantizando que las tareas se manejen en el orden correcto.

Conclusión

La naturaleza de un solo subproceso de JavaScript puede parecer limitante a primera vista, pero sus capacidades asincrónicas le permiten administrar múltiples tareas de manera eficiente. A través de mecanismos como el bucle de eventos, colas de devolución de llamadas y promesas, JavaScript puede manejar operaciones complejas sin bloqueo mientras mantiene un estilo de codificación intuitivo y sincrónico.