Gestión de memoria en TypeScript: cómo funciona el recolector de basura

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

Memoria y recolector de basura en TypeScript: ¿qué se esconde detrás de escena?

\n\n

Imagina que estás construyendo una casa. Compras ladrillos, cemento, acero — pero si no limpias los escombros de construcción, pronto el sitio de construcción se convertirá en un vertedero. Lo mismo sucede en tu código TypeScript. Creas objetos, arrays, closures — y si no liberas memoria a tiempo, la aplicación comienza a ralentizarse y luego se cae por completo con el error Out of Memory.

\n\n

En este artículo, analizaremos cómo funciona la gestión de memoria en TypeScript y su herramienta principal — el recolector de basura. Aprenderás qué mecanismos están detrás de la liberación de memoria, cómo evitar fugas y por qué tu código puede «consumir» megabytes incluso después de que hayas dejado de usarlo.

\n\n

¡Allá vamos!

\n\n

¿Cómo gestiona TypeScript la memoria? Conceptos básicos

\n\n

Empecemos con algo importante: TypeScript no es un lenguaje independiente, sino una extensión de JavaScript. Esto significa que la memoria y el recolector de basura en TypeScript funcionan exactamente igual que en JavaScript. TypeScript no añade nuevos mecanismos de gestión de memoria, pero nos proporciona herramientas (tipos, interfaces) para escribir código más seguro.

\n\n

En JavaScript, la memoria se divide en dos áreas principales:

\n\n
    \n
  • Pila (Stack) — almacena primitivos (números, cadenas, valores booleanos) y referencias a objetos. Se libera automáticamente al salir de una función.
  • \n
  • Montón (Heap) — almacena objetos, arrays, funciones. Aquí es donde trabaja el recolector de basura.
  • \n
\n\n

Cuando escribes:

\n\n
const user = { name: 'Alice', age: 30 };
\n\n

La variable user se almacena en la pila y contiene una referencia al objeto en el montón. Mientras exista la referencia, el objeto está vivo. Tan pronto como la referencia desaparece, el objeto se convierte en «basura».

\n\n

Recolector de basura en TypeScript: ¿cómo funciona?

\n\n

El recolector de basura (Garbage Collector, GC) es un proceso automático que encuentra objetos a los que ya no se hace referencia y libera la memoria que ocupan. Los motores modernos (V8 en Chrome, SpiderMonkey en Firefox) utilizan algoritmos complejos, pero la base es el algoritmo de marcado y barrido (Mark-and-Sweep).

\n\n

Cómo funciona:

\n\n
    \n
  1. El GC comienza desde las «raíces» — objetos globales, variables locales en funciones que se están ejecutando.
  2. \n
  3. Recorre todas las referencias desde las raíces y marca cada objeto alcanzable.
  4. \n
  5. Todos los objetos no marcados se consideran basura y se eliminan.
  6. \n
\n\n

Suena simple, pero en la práctica hay matices. Por ejemplo, las referencias cíclicas:

\n\n
function createCycle() {\n    const obj1: any = {};\n    const obj2: any = {};\n    obj1.ref = obj2;\n    obj2.ref = obj1;\n    return 'done';\n}
\n\n

Antes, estas estructuras provocaban fugas, pero los recolectores de basura modernos manejan muy bien los ciclos — siempre que ambos objetos sean inalcanzables desde las raíces.

\n\n

Fugas de memoria típicas en aplicaciones TypeScript

\n\n

Incluso con un recolector de basura inteligente, se puede «pisar el rastrillo». Estos son los escenarios más comunes que provocan fugas de memoria en TypeScript:

\n\n

1. Temporizadores y manejadores de eventos olvidados

\n\n

Una de las causas más comunes. Te suscribiste a un evento y olvidaste cancelar la suscripción:

\n\n
class TimerComponent {\n    private intervalId: number;\n\n    start() {\n        this.intervalId = window.setInterval(() => {\n            console.log('Tick');\n        }, 1000);\n    }\n\n    // ¡Olvidaste llamar a stop() — el temporizador vivirá para siempre!\n}
\n\n

Solución: siempre limpia los temporizadores y cancela las suscripciones a eventos en el método dispose o ngOnDestroy (para Angular).

\n\n

2. Closures que mantienen referencias

\n\n

Los closures son una herramienta poderosa, pero pueden retener accidentalmente objetos enormes:

\n\n
function createHeavyClosure() {\n    const hugeData = new Array(1000                

Blogs

Book Recommendations