Memory management and garbage collection

Basic Concepts of Memory Management

Memory management is a crucial part of programming languages, determining how programs allocate, use, and release memory. In JavaScript, memory management is primarily achieved through automatic allocation and garbage collection mechanisms. When variables, objects, or functions are created, the JavaScript engine automatically allocates memory and releases it when it is no longer needed.

// Memory allocation for primitive types
let num = 42;  // Allocate memory to store a number
let str = "Hello";  // Allocate memory to store a string

// Memory allocation for object types
let obj = {
  name: "Alice",
  age: 25
};  // Allocate memory to store an object and its properties

JavaScript Memory Model

JavaScript's memory space is mainly divided into stack memory and heap memory. Stack memory is used to store primitive-type values and address pointers for reference types, while heap memory stores the actual data of reference types.

// Stack memory example
let a = 10;  // Primitive type, stored in the stack
let b = a;   // Create a copy; b is independent of a

// Heap memory example
let obj1 = {value: 20};  // Object stored in the heap; stack stores the reference
let obj2 = obj1;         // Copy the reference, pointing to the same object
obj2.value = 30;         // Modifications affect obj1
console.log(obj1.value); // Outputs 30

Principles of Garbage Collection

JavaScript uses automatic garbage collection to manage memory, primarily based on two algorithms: reference counting and mark-and-sweep. Modern browsers mainly use the mark-and-sweep algorithm because it better handles circular references.

// Reference counting example
function referenceCounting() {
  let x = {a: 1};  // Reference count: 1
  let y = x;        // Reference count: 2
  y = null;         // Reference count: 1
  x = null;         // Reference count: 0 (can be reclaimed)
}

// Circular reference problem
function circularReference() {
  let objA = {};
  let objB = {};
  objA.ref = objB;  // objA references objB
  objB.ref = objA;  // objB references objA (circular reference)
}
// Even after the function executes, the reference count isn't 0, but mark-and-sweep can handle it

V8 Engine Memory Management

The V8 engine, used in Chrome and Node.js, has unique memory management strategies. It divides heap memory into the new generation and the old generation, employing different garbage collection strategies.

// Demonstrating object promotion
function createLargeObjects() {
  let temp = [];
  for (let i = 0; i < 100000; i++) {
    temp.push(new Array(1000).join('*'));  // Create large objects
  }
  return temp[0];  // Keep one reference; others can be reclaimed
}

createLargeObjects();  // Repeated calls may cause objects to be promoted to the old generation

Common Memory Leak Scenarios

Although JavaScript has automatic garbage collection, improper code can still cause memory leaks. Common scenarios include accidental global variables, uncleared timers and callbacks, and DOM references.

// Accidental global variables
function leakMemory() {
  leakedVar = 'This is a global variable';  // Forgot to use var/let/const
}

// Uncleared timers
let intervalId = setInterval(() => {
  console.log('Timer running...');
}, 1000);
// Forgetting clearInterval(intervalId) causes a memory leak

// DOM references
let elements = {
  button: document.getElementById('myButton'),
  image: document.getElementById('myImage')
};

// Even after removing from the DOM, JS references remain
document.body.removeChild(document.getElementById('myButton'));
// elements.button still references the DOM element, preventing garbage collection

Performance Optimization Practices

Proper memory management can significantly improve application performance. Developers can optimize memory usage through object pooling, avoiding memory thrashing, and timely dereferencing.

// Object pool example
class ObjectPool {
  constructor(createFn) {
    this.createFn = createFn;
    this.pool = [];
  }
  
  get() {
    return this.pool.length ? this.pool.pop() : this.createFn();
  }
  
  release(obj) {
    this.pool.push(obj);
  }
}

// Using the object pool
const pool = new ObjectPool(() => ({x: 0, y: 0}));
let obj = pool.get();  // Get from the pool or create a new object
// Use the object...
pool.release(obj);     // Return it to the pool after use

// Avoiding memory thrashing
function processLargeArray() {
  const chunkSize = 1000;
  let index = 0;
  
  function processChunk() {
    const chunk = largeArray.slice(index, index + chunkSize);
    // Process the chunk...
    index += chunkSize;
    
    if (index < largeArray.length) {
      setTimeout(processChunk, 0);  // Process in chunks to avoid blocking
    }
  }
  
  processChunk();
}

Modern APIs and Memory Management

New JavaScript APIs like WeakMap and WeakSet provide better memory management by holding weak references to objects, which don't prevent garbage collection.

// WeakMap example
let weakMap = new WeakMap();
let obj = {id: 1};
weakMap.set(obj, 'some data');

console.log(weakMap.get(obj));  // Outputs 'some data'
obj = null;  // Clear the reference
// The entry in weakMap is automatically removed because the key object was reclaimed

// WeakRef and FinalizationRegistry
const registry = new FinalizationRegistry((heldValue) => {
  console.log(`${heldValue} was reclaimed`);
});

let ref = new WeakRef({data: 'important'});
registry.register(ref.deref(), "Important object");

// When the object is reclaimed, the callback executes

Debugging and Monitoring Tools

Browsers provide various tools for analyzing and debugging memory issues, such as Chrome DevTools' Memory panel and Performance Monitor.

// Manually trigger garbage collection (for debugging only)
if (typeof gc === 'function') {
  gc();  // Requires Chrome to be launched with --js-flags="--expose-gc"
}

// Monitoring memory usage
function monitorMemory() {
  const used = process.memoryUsage();  // Node.js environment
  console.log(`Memory usage: 
    RSS: ${Math.round(used.rss / 1024 / 1024)}MB
    HeapTotal: ${Math.round(used.heapTotal / 1024 / 1024)}MB
    HeapUsed: ${Math.round(used.heapUsed / 1024 / 1024)}MB`);
}

setInterval(monitorMemory, 5000);  // Log memory usage every 5 seconds

Real-World Case Studies

Analyzing memory issues in real-world scenarios helps better understand the practical application of memory management.

// Case 1: Memory management for image loading
const imageCache = new Map();

function loadImage(url) {
  if (imageCache.has(url)) {
    return imageCache.get(url);
  }
  
  const img = new Image();
  img.src = url;
  imageCache.set(url, img);
  
  // Add cleanup mechanism
  img.onload = () => {
    if (imageCache.size > 20) {  // Limit cache size
      const oldestKey = imageCache.keys().next().value;
      imageCache.delete(oldestKey);
    }
  };
  
  return img;
}

// Case 2: Memory management for single-page application routing
window.addEventListener('popstate', () => {
  // Clean up resources from the previous page on route change
  cleanupPreviousPage();
});

function cleanupPreviousPage() {
  // Remove event listeners
  document.removeAllListeners?.();
  
  // Clean up large objects
  largeDataCache = null;
  
  // Cancel pending requests
  activeRequests.forEach(req => req.abort());
  activeRequests = [];
}