Memory Management & Garbage Collection

You are reading Part 34 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 6]

Introduction

Memory management is crucial for optimizing JavaScript applications. JavaScript automatically allocates and deallocates memory using garbage collection, but understanding how memory works helps developers write efficient and performant code. This article explores how JavaScript manages memory, detects unused variables, and performs garbage collection.

1. How JavaScript Manages Memory

JavaScript’s memory lifecycle consists of three stages:

1. Memory Allocation – Memory is reserved when variables, objects, and functions are created.

2. Memory Usage – JavaScript reads and updates variables stored in memory.

3. Memory Deallocation (Garbage Collection) – JavaScript removes unused memory to optimize performance.

Example of Memory Allocation:

let num = 42; // Allocates memory for a number
let str = "Hello"; // Allocates memory for a string
let obj = { key: "value" }; // Allocates memory for an object

2. Types of Memory in JavaScript

JavaScript stores data in two memory locations:

1. Stack Memory (Primitive Data Types)

• Stores primitive values (numbers, strings, booleans, null, undefined, symbols).

• Uses fixed-size memory allocation.

• Variables in the stack are copied by value.

let a = 10;
let b = a; // Creates a copy of 'a'
b = 20;
console.log(a); // Output: 10 (original remains unchanged)

2. Heap Memory (Reference Data Types)

• Stores objects, arrays, and functions.

• Uses dynamic memory allocation.

• Variables in the heap are assigned by reference.

let obj1 = { name: "Alice" };
let obj2 = obj1; // Points to the same memory location
obj2.name = "Bob";
console.log(obj1.name); // Output: "Bob" (both refer to the same object)

3. JavaScript Garbage Collection (GC)

JavaScript uses automatic garbage collection, primarily through mark-and-sweep.

Mark-and-Sweep Algorithm:

1. The garbage collector marks all variables.

2. It detects reachable (used) objects.

3. It removes unmarked (unreachable) objects.

4. Frees up memory for new allocations.

function createUser() {
    let user = { name: "John" };
}
createUser(); // 'user' object becomes unreachable after function execution

• Once createUser() finishes, the user object becomes unreachable and is collected.

4. Common Memory Leaks & How to Avoid Them

1. Unused Variables

Variables that are no longer needed should be set to null.

let userData = { name: "Alice" };
userData = null; // Allows garbage collection

2. Closures Holding References

Functions inside closures can retain unnecessary memory if references are not cleared.

function outer() {
    let largeData = new Array(1000000); // Large allocation
    return function inner() {
        console.log("Retaining largeData");
    };
}
let hold = outer();
hold = null; // Frees memory

3. DOM Element References

Retaining references to removed DOM elements prevents them from being garbage-collected.

let btn = document.getElementById("myButton");
btn.addEventListener("click", () => console.log("Clicked"));
document.body.removeChild(btn);
btn = null; // Prevents memory leak

5. Best Practices for Efficient Memory Management

Example of Using WeakMap to Avoid Memory Leaks:

let cache = new WeakMap();
function storeUser(user) {
    let userData = { data: "User Data" };
    cache.set(user, userData);
}
let userObj = { id: 1 };
storeUser(userObj);
userObj = null; // Memory is freed

You are reading Part 34 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 6]