JavaScript Academy · Lección

La pila de llamadas

Vea cómo se registran las llamadas a funciones.

La pila de llamadas es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué es la pila de llamadas?

La pila de llamadas es la estructura que JavaScript utiliza para saber qué función se está ejecutando y adónde debe volver. Cada llamada a una función se apila; cuando termina, se desapila.

Es una estructura LIFO: el último en entrar es el primero en salir.

Apilar y desapilar

Al llamar a una función, se apila un marco de pila. Cuando devuelve el control, el marco se desapila. Observe el orden de los registros a medida que se anidan las llamadas.

function first() {
  console.log('first start');
  second();
  console.log('first end');
}

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

first();

LIFO en acción

La función llamada más recientemente debe terminar antes de que se reanude la que está debajo. La llamada interna se completa primero, aunque comenzó la última.

function a() {
  console.log('enter a');
  b();
  console.log('exit a');
}
function b() {
  console.log('enter b');
  c();
  console.log('exit b');
}
function c() {
  console.log('c runs');
}
a();

Síncrono significa bloqueante

JavaScript ejecuta una sola cosa a la vez en un único hilo. Mientras haya marcos en la pila, no se ejecuta nada más. El código síncrono bloquea hasta terminar.

console.log('start');

function busy() {
  let sum = 0;
  for (let i = 0; i < 1000; i++) sum += i;
  return sum;
}

console.log(busy());
console.log('end');

Los valores de retorno bajan

A medida que se desapila cada marco, su valor de retorno vuelve a la función que lo esperaba debajo en la pila.

function square(n) {
  return n * n;
}
function sumOfSquares(a, b) {
  return square(a) + square(b);
}

console.log(sumOfSquares(3, 4));

La recursión hace crecer la pila

Cada llamada recursiva añade otro marco. La pila crece hasta alcanzar el caso base y después se vacía marco a marco.

function countdown(n) {
  if (n === 0) {
    console.log('liftoff');
    return;
  }
  console.log(n);
  countdown(n - 1);
}

countdown(3);

Desbordamiento de pila

La pila tiene un tamaño finito. La recursión sin caso base sigue apilando marcos hasta que el motor lanza RangeError: Maximum call stack size exceeded.

function endless(n) {
  return endless(n + 1);
}

try {
  endless(1);
} catch (e) {
  console.log(e.name);
}

El orden de ejecución es predecible

Como la pila sigue estrictamente el orden LIFO y la ejecución es síncrona, el orden de los registros síncronos siempre es determinista. Puede seguirlo manualmente.

function outer() {
  console.log(1);
  inner();
  console.log(3);
}
function inner() {
  console.log(2);
}
outer();
console.log(4);

Dónde entra la asincronía

La pila de llamadas solo ejecuta código síncrono. Funciones como setTimeout delegan el trabajo al entorno, que después coloca las funciones de callback en colas. Esos callbacks solo se ejecutan cuando la pila está vacía.

Este es el puente hacia el bucle de eventos.

console.log('A');
setTimeout(() => console.log('B (later)'), 0);
console.log('C');

La pila debe vaciarse primero

Incluso un temporizador de cero milisegundos espera a que termine todo el código síncrono. El callback no puede ejecutarse mientras queden marcos en la pila.

console.log('sync 1');
setTimeout(() => console.log('timeout'), 0);
console.log('sync 2');
console.log('sync 3');

Por qué importa la pila de llamadas

Comprender la pila de llamadas explica por qué los bucles síncronos largos congelan una página, por qué la recursión puede provocar un desbordamiento y por qué los callbacks asíncronos siempre se ejecutan al final. Es la base de todo lo relacionado con el bucle de eventos.

function compute() {
  return [1, 2, 3].reduce((a, b) => a + b, 0);
}
console.log('before');
console.log(compute());
console.log('after');

Comprobación rápida

¿Qué principio de orden sigue la pila de llamadas?

Repaso: la pila de llamadas

Ha aprendido el núcleo de ejecución del motor:

La pila de llamadas realiza el seguimiento de las funciones en ejecución en orden LIFO.
JavaScript es monohilo y el código síncrono bloquea.
La recursión hace crecer la pila y puede provocar un desbordamiento.
Los callbacks asíncronos esperan hasta que la pila está vacía, lo que nos conduce al bucle de eventos.

Preguntas frecuentes

¿La lección «La pila de llamadas» es gratis?

Sí — el texto completo de «La pila de llamadas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «La pila de llamadas»?

Vea cómo se registran las llamadas a funciones. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «La pila de llamadas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy