El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

La gestión de memoria es un aspecto crucial en cualquier lenguaje de programación, y JavaScript no es una excepción. Entender cómo JavaScript maneja la memoria te permitirá escribir código más eficiente y evitar problemas comunes como las fugas de memoria.

Conceptos Clave

Asignación de Memoria

Variables y Objetos: Cuando declaras una variable o creas un objeto, JavaScript asigna memoria para almacenar su valor.
Funciones: Las funciones también requieren memoria para almacenar su código y su contexto de ejecución.

Alcance de Variables

Global: Variables declaradas fuera de cualquier función tienen un alcance global.
Local: Variables declaradas dentro de una función tienen un alcance local y se eliminan cuando la función termina su ejecución.

Recolección de Basura (Garbage Collection)

Automática: JavaScript utiliza un recolector de basura automático para liberar memoria que ya no se utiliza.
Algoritmos: Los algoritmos más comunes son el "Mark-and-Sweep" y el "Reference Counting".

Asignación y Liberación de Memoria

Asignación de Memoria

// Asignación de memoria para una variable
let nombre = "Juan";

// Asignación de memoria para un objeto
let persona = {
    nombre: "Juan",
    edad: 30
};

// Asignación de memoria para una función
function saludar() {
    console.log("Hola");
}

Liberación de Memoria

La liberación de memoria en JavaScript es manejada automáticamente por el recolector de basura. Sin embargo, es importante entender cómo funciona para evitar fugas de memoria.

Ejemplo de Recolección de Basura

function crearObjeto() {
    let objeto = {
        nombre: "Objeto Temporal"
    };
    // El objeto 'objeto' será recolectado por el garbage collector
    // cuando la función termine su ejecución y no haya más referencias a él.
}
crearObjeto();

Fugas de Memoria Comunes

Variables Globales No Intencionadas

function crearFuga() {
    fuga = "Esto es una fuga de memoria"; // 'fuga' se convierte en una variable global
}
crearFuga();

Referencias Cíclicas

function crearCiclo() {
    let objetoA = {};
    let objetoB = {};

    objetoA.ref = objetoB;
    objetoB.ref = objetoA;
}
crearCiclo();
// 'objetoA' y 'objetoB' se referencian mutuamente, creando una referencia cíclica.

Manejo Incorrecto de Listeners de Eventos

let boton = document.getElementById("miBoton");

function manejarClick() {
    console.log("Botón clickeado");
}

boton.addEventListener("click", manejarClick);

// Si no eliminamos el listener, puede causar una fuga de memoria
boton.removeEventListener("click", manejarClick);

Consejos para Evitar Fugas de Memoria

Usa let y const para Declarar Variables:
- Evita variables globales no intencionadas.
Elimina Listeners de Eventos No Necesarios:
- Asegúrate de eliminar los listeners de eventos cuando ya no sean necesarios.
Evita Referencias Cíclicas:
- Asegúrate de que los objetos no se referencien mutuamente sin necesidad.
Usa Herramientas de Depuración:
- Utiliza herramientas como el perfilador de memoria en Chrome DevTools para identificar y solucionar fugas de memoria.

Ejercicio Práctico

Ejercicio 1: Identificar y Corregir Fugas de Memoria

Dado el siguiente código, identifica y corrige las fugas de memoria:

let boton = document.getElementById("miBoton");

function manejarClick() {
    console.log("Botón clickeado");
}

boton.addEventListener("click", manejarClick);

function crearFuga() {
    fuga = "Esto es una fuga de memoria"; // Fuga de memoria
}

crearFuga();

function crearCiclo() {
    let objetoA = {};
    let objetoB = {};

    objetoA.ref = objetoB;
    objetoB.ref = objetoA; // Referencia cíclica
}

crearCiclo();

Solución

let boton = document.getElementById("miBoton");

function manejarClick() {
    console.log("Botón clickeado");
}

boton.addEventListener("click", manejarClick);

// Eliminar el listener cuando ya no sea necesario
boton.removeEventListener("click", manejarClick);

function crearFuga() {
    let fuga = "Esto es una fuga de memoria"; // Usar 'let' para evitar variable global
}

crearFuga();

function crearCiclo() {
    let objetoA = {};
    let objetoB = {};

    objetoA.ref = objetoB;
    objetoB.ref = objetoA;

    // Eliminar referencias cíclicas cuando ya no sean necesarias
    objetoA.ref = null;
    objetoB.ref = null;
}

crearCiclo();

Conclusión

La gestión de memoria en JavaScript es fundamental para escribir código eficiente y evitar problemas de rendimiento. Entender cómo funciona la asignación y liberación de memoria, así como las técnicas para evitar fugas de memoria, te permitirá desarrollar aplicaciones más robustas y eficientes. En el próximo módulo, exploraremos cómo optimizar el rendimiento de JavaScript para mejorar aún más la eficiencia de tus aplicaciones.

Gestión de Memoria

Conceptos Clave

Asignación de Memoria

Alcance de Variables

Recolección de Basura (Garbage Collection)

Asignación y Liberación de Memoria

Asignación de Memoria

Liberación de Memoria

Ejemplo de Recolección de Basura

Fugas de Memoria Comunes

Variables Globales No Intencionadas

Referencias Cíclicas

Manejo Incorrecto de Listeners de Eventos

Consejos para Evitar Fugas de Memoria

Ejercicio Práctico

Ejercicio 1: Identificar y Corregir Fugas de Memoria

Solución

Conclusión

JavaScript: De Principiante a Avanzado

Módulo 1: Introducción a JavaScript

Módulo 2: Estructuras de Control

Módulo 3: Funciones

Módulo 4: Objetos y Arrays

Módulo 5: Objetos y Funciones Avanzadas

Módulo 6: El Modelo de Objetos del Documento (DOM)

Módulo 7: APIs del Navegador y Temas Avanzados

Módulo 8: Pruebas y Depuración

Módulo 9: Rendimiento y Optimización

Módulo 10: Frameworks y Librerías de JavaScript

Módulo 11: Proyecto Final