Heap and manage storage JavaScript

La gestión de memoria varía significativamente entre los distintos lenguajes de programación. En los lenguajes de bajo nivel como C o C++, los programadores deben gestionarla manualmente.

Por otro lado, en lenguajes de alto nivel como JavaScript, Python o C#, la gestión de memoria es automática. Esto significa que el espacio se asigna dinámicamente mientras se necesita y se libera automáticamente cuando ya no se requiere, gracias al proceso conocido como Garbage Collection. Sin embargo, en estos últimos, pueden surgir problemas como los memory leaks, que resultan en sobrecargas de memoria. En este artículo, exploraremos cómo abordar estos problemas, pero antes es crucial comprender su funcionamiento.

Para comprender cómo funciona, primero debemos entender los tipos de datos que se utilizan en JavaScript.

Tipos de Datos en JavaScript

Tipos Primitivos: Estos datos se almacenan directamente en la pila (stack).

Tipos de Referencia: Se almacenan en el montón (heap) y se accede a ellos a través de referencias.

Array | Function | Objects

Ahondaremos en las diferencias con un ejemplo concreto:

let name = "José";
let age = 40;
let person = {
  name: "Pablo",
  age: 30
};

let newName = name;
newName = "Lázaro";

let newPerson = person;
newPerson.name = "Jesús";

console.log(name);
console.log(person);
console.log(newName);
console.log(newPerson);

José
{ name: "Jesús", age: 30 }
Lázaro
{ name: "Jesús", age: 30 }

Se destaca que la variable primitiva 'name', con el valor "José", conserva su valor original a pesar de asignarse a 'newName' y ser sobrescrita con "Lázaro". Por otro lado, al realizar la misma operación con el objeto 'person', el valor del nombre cambia en ambas variables. Esto se debe a que no se crea una copia independiente, sino que se accede a través de referencia.

Memory Leak

Una de las herramientas más poderosas para detectar memory leaks en aplicaciones web es el conjunto de herramientas de desarrollo integradas en los navegadores. En particular, las DevTools ofrecen funcionalidades específicas para monitorear el uso de memoria. Para detectar un memory leak, podemos utilizar la pestaña "Memory" o "Memoria" en las DevTools, donde podemos observar el crecimiento inesperado del consumo de memoria durante ciertos períodos de tiempo o acciones del usuario. Por ejemplo, si notamos un aumento constante en el uso de memoria después de cargar una página o realizar ciertas interacciones, esto podría indicar un posible memory leak. Además, las DevTools suelen proporcionar herramientas para realizar análisis más detallados, como la toma de perfiles de memoria y la visualización de la retención de memoria por parte de objetos y elementos del DOM. A continuación, se muestra una captura de pantalla de las DevTools con un ejemplo de un memory leak, donde se puede observar un aumento constante en el uso de memoria después de ciertas acciones en la página web.

Heap and manage storage JavaScript