JavaScript Garbage Collection

JavaScript Garbage Collection

JavaScript has automatic garbage collection (GC), meaning developers don’t manually allocate and free memory like in C or C++. However, understanding how GC works helps in writing memory-efficient code and avoiding memory leaks.

1. How Does JavaScript Manage Memory?

Memory Lifecycle in JavaScript:

1. Allocation → Memory is allocated for variables, objects, and functions.
2. Usage → The program accesses and modifies data.
3. Garbage Collection → Unused memory is automatically freed.

Example:

function createUser() {
    let user = { name: "Alice" }; // Memory allocated for object
    return user;
}
let person = createUser(); // person references the object

🔹 The object { name: "Alice" } remains in memory as long as it is referenced.

2. How Does JavaScript’s Garbage Collector Work?

JavaScript uses a Garbage Collector (GC) to remove unused objects and free up memory. The most common GC algorithm in modern JavaScript engines is Mark-and-Sweep.

Mark-and-Sweep Algorithm

1. Mark Phase → The GC marks all reachable (used) objects.
2. Sweep Phase → The GC removes unmarked (unused) objects from memory.

Example:

let user = { name: "Alice" }; // Object is created
user = null; // The object is now unreachable
// The GC will eventually remove it

🔹 When we set user = null, the { name: "Alice" } object is no longer referenced, so GC removes it.

3. How JavaScript Determines If an Object is Unreachable

Garbage Collection Based on Reachability

An object is considered reachable if:

• It can be accessed from the root (window, globalThis, or global in Node.js).
• It is referenced by another reachable object.

Example:

let user = {
    name: "Alice",
    address: {
        city: "New York"
    }
};
user = null; // Both objects become unreachable

🔹 The user object and its nested address objects are removed from memory.

4. Common Memory Leaks and How to Avoid Them

Even with automatic garbage collection, memory leaks can still happen! 🚨

1. Unused Global Variables

Global variables never get collected unless explicitly set to null.
🔴 Memory Leak Example:

window.leak = "I will never be collected!";

✅ Fix: Remove global references:

window.leak = null;

2. Unclosed Intervals and Timeouts

🔴 Memory Leak Example:

setInterval(() => {
    console.log("Running...");
}, 1000); // Runs forever, keeps function in memory

✅ Fix: Clear intervals when not needed:

let interval = setInterval(() => console.log("Running..."), 1000);
clearInterval(interval); // Frees memory

3. Detached DOM Elements

Removing elements from the DOM without removing event listeners causes memory leaks.
🔴 Memory Leak Example:

let button = document.getElementById("myButton");
button.addEventListener("click", () => console.log("Clicked"));
document.body.removeChild(button); // Button is gone, but the event listener remains!

✅ Fix: Remove event listeners before deleting elements:

button.removeEventListener("click", () => console.log("Clicked"));
document.body.removeChild(button);

4. Closures Holding References

Closures capture variables, sometimes preventing garbage collection.
🔴 Memory Leak Example:

function outer() {
    let bigObject = { data: new Array(1000000).fill("x") };

    return function inner() {
        console.log(bigObject.data[0]); // `bigObject` is never freed
    };
}
let leakyFunction = outer();

✅ Fix: Nullify unused references:

let leakyFunction = outer();
leakyFunction = null; // Garbage collector will clean up `bigObject`

5. Tools to Detect Memory Leaks 🛠️

Chrome DevTools (Memory Tab)

1. Open DevTools (F12 or Cmd + Option + I on Mac).
2. Go to Memory tab.
3. Click "Heap Snapshot" to analyze memory usage.
4. Look for Detached DOM elements or Growing memory usage.

Performance Monitoring

Use performance.memory to check memory usage:

console.log(performance.memory);

6. Best Practices to Avoid Memory Leaks ✅

✅ 1. Use let and const instead of var

Variables declared with var stay in memory longer than needed.

function test() {
    let data = new Array(1000000).fill("x"); // Automatically freed after function ends
}
test();

✅ 2. Explicitly Remove References

Set objects to null when they are no longer required.

let obj = { data: "big data" };
obj = null; // Allows garbage collection

✅ 3. Remove Event Listeners

element.removeEventListener("click", handler);

✅ 4. Avoid Circular References

Objects referring to each other prevent GC from freeing them.

let a = {};
let b = { ref: a };
a.ref = b; // Circular reference
a = null;
b = null; // Now both objects can be collected

✅ 5. Use WeakMap and WeakSet for Caching

WeakMap and WeakSet allow GC to remove unreferenced objects.

let cache = new WeakMap();
let obj = { name: "Alice" };
cache.set(obj, "Cached data");

obj = null; // Garbage Collector can free this memory

🔹 Summary: JavaScript Garbage Collection

Concept	Explanation
Automatic GC	JavaScript automatically frees unused memory.
Mark-and-Sweep Algorithm	Marks reachable objects, removes unreachable ones.
Common Memory Leaks	Global variables, intervals, event listeners, closures, circular references.
Avoid Leaks	Remove listeners, clear intervals, nullify references, use WeakMap.
DevTools	Use Chrome DevTools Memory tab to detect leaks.

🎯 Conclusion

✅ JavaScript automatically manages memory, but memory leaks can still happen.
✅ Common issues: Global variables, unclosed intervals, event listeners, and circular references.
✅ Use WeakMap, event listener cleanup, and heap snapshots to optimize performance.

🚀 Need help debugging memory leaks? Let me know! 🔥