JavaScript
Explica cómo el Call Stack organiza llamadas con LIFO, crea frames, muestra stack traces y se relaciona con recursividad, bloqueo y código asíncrono.
El Call Stack es la estructura que JavaScript utiliza para organizar las llamadas que están ejecutándose.
Funciona como una pila: la última llamada que entra es la primera que debe terminar.
function greet() {
console.log("Hello");
}
greet();LIFO significa Last In, First Out: lo último en entrar es lo primero en salir.
Imagina una pila de libros. Para retirar el libro inferior, primero debes quitar los que están encima.
En JavaScript ocurre algo similar con las llamadas:
function first() {
second();
}
function second() {
third();
}
function third() {
console.log("End");
}
first();La pila crece así:
contexto superior
contexto superior → first
contexto superior → first → second
contexto superior → first → second → thirdDespués se vacía en orden inverso:
third termina
second termina
first termina
continúa el contexto superiorCada entrada suele representarse como un stack frame o frame de llamada.
Un frame mantiene la información necesaria para esa llamada, por ejemplo:
No necesitas imaginar que toda la información del lenguaje vive literalmente dentro de una pequeña caja. Es un modelo para comprender cómo se organizan las llamadas activas.
function multiply(first, second) {
return first * second;
}
function calculateSubtotal(price, quantity) {
return multiply(price, quantity);
}
const subtotal = calculateSubtotal(25, 4);Se ejecuta el código superior.
[programa]Se llama calculateSubtotal.
[programa, calculateSubtotal]calculateSubtotal llama multiply.
[programa, calculateSubtotal, multiply]multiply devuelve 100 y sale.
[programa, calculateSubtotal]calculateSubtotal devuelve el resultado y sale.
[programa]En el hilo principal, JavaScript ejecuta el frame que está en la parte superior de la pila.
function slowTask() {
let total = 0;
for (let index = 0; index < 1_000_000_000; index++) {
total += index;
}
return total;
}Mientras slowTask ocupa la pila, el hilo no puede continuar con otras instrucciones de JavaScript del mismo contexto de ejecución.
En el navegador, una tarea síncrona demasiado larga puede impedir temporalmente:
El Call Stack no manda automáticamente el trabajo pesado a segundo plano.
console.log("A");
function example() {
console.log("B");
}
example();
console.log("C");Resultado:
A
B
Cexample debe terminar antes de que pueda ejecutarse el último console.log.
Cuando ocurre un error, JavaScript puede mostrar la cadena de llamadas activa.
function validateUser(user) {
if (!user) {
throw new Error("User is required");
}
}
function createOrder(user) {
validateUser(user);
}
function submitOrder() {
createOrder(null);
}
submitOrder();El stack trace puede mostrar una ruta similar a:
validateUser
createOrder
submitOrderSe lee desde el lugar donde ocurrió el error hacia las funciones que condujeron hasta allí.
Esto ayuda a responder:
Una función recursiva se llama a sí misma.
function countdown(number) {
if (number === 0) {
return;
}
countdown(number - 1);
}
countdown(3);La pila contiene temporalmente:
countdown(3)
countdown(2)
countdown(1)
countdown(0)Cuando se alcanza el caso base, las llamadas terminan en orden inverso.
Si una recursión nunca llega a una salida, la pila continúa creciendo.
function repeat() {
repeat();
}
repeat();Finalmente aparece un error similar a:
RangeError: Maximum call stack size exceededTambién puede ocurrir con una recursión válida pero demasiado profunda.
La solución puede requerir:
Estos nombres suelen aparecer juntos, pero representan ideas diferentes.
De forma simplificada:
function createUser() {
const user = {
name: "Nicolás",
};
return user;
}El binding local user forma parte del entorno de la llamada. El objeto puede almacenarse en memoria dinámica y continuar existiendo después de que la función termina porque fue retornado.
No conviene convertir “primitivos en stack y objetos en heap” en una regla absoluta del lenguaje. Los motores pueden optimizar la representación interna. Lo importante es comprender referencias, alcance y tiempo de vida.
console.log("A");
setTimeout(() => {
console.log("B");
}, 0);
console.log("C");El callback del temporizador no entra inmediatamente al Call Stack.
El código síncrono actual termina primero:
A
CMás adelante, cuando el entorno y el Event Loop permiten ejecutar el callback, se crea una llamada nueva y entra al stack:
BEl Call Stack ejecuta funciones; no administra por sí solo temporizadores, solicitudes de red ni colas de tareas.
function loadData() {
fetch("/api/products").then((response) => {
console.log(response);
});
}loadData inicia la operación y termina. El callback de .then se ejecutará posteriormente en una llamada nueva.
Esto evita mantener la llamada original bloqueada mientras llega la respuesta, pero no significa que el código del callback se ejecute en paralelo con el JavaScript del hilo principal.
En las herramientas del navegador puedes pausar el código y revisar la sección Call Stack.
Si la ejecución está dentro de validateStock, podrías ver:
validateStock
processOrder
handleSubmitEsto permite seleccionar cada frame y revisar:
Una pila muy profunda puede revelar funciones excesivamente encadenadas o abstracciones innecesarias.
handleClick
→ processAction
→ executeCommand
→ runOperation
→ performTask
→ updateValueLa profundidad no es automáticamente mala. Frameworks y librerías generan stacks extensos. Sin embargo, en código propio conviene revisar si cada nivel aporta una responsabilidad clara.
¿En qué orden terminan las funciones?
function first() {
second();
console.log("first ends");
}
function second() {
third();
console.log("second ends");
}
function third() {
console.log("third ends");
}
first();third ends
second ends
first endsthird es la última llamada en entrar y, por tanto, la primera en terminar.
El siguiente bloque estudia Funciones, donde aplicaremos estos conceptos a declaraciones, expresiones, parámetros, callbacks, funciones de orden superior y closures.