JavaScript WeakRef Cleanup: Mastering Memory Management and Finalization for Global Developers

            
// A class representing an object we want to manage
class ExpensiveResource {
  constructor(id) {
    this.id = id;
    console.log(`ExpensiveResource ${this.id} created.`);
  }

  // Method to simulate resource cleanup
  cleanup() {
    console.log(`Cleaning up ExpensiveResource ${this.id}.`);
  }
}

// Create an object
let resource = new ExpensiveResource(1);

// Create a weak reference to the object
let weakResource = new WeakRef(resource);

// Make the original reference eligible for garbage collection
// by removing the strong reference
resource = null;

// At this point, the 'resource' object is only reachable via the weak reference.
// The garbage collector might reclaim it soon.

// To access the object (if it hasn't been collected yet):
setTimeout(() => {
  const dereferencedResource = weakResource.deref();
  if (dereferencedResource) {
    console.log('Resource is still alive. ID:', dereferencedResource.id);
    // You can use the resource here, but remember it might disappear at any moment.
    dereferencedResource.cleanup(); // Example of using a method
  } else {
    console.log('Resource has been garbage collected.');
  }
}, 2000); // Check after 2 seconds

// In a real-world scenario, you'd likely trigger GC manually for testing,
// or observe the behavior over time. The timing of GC is non-deterministic.

            

              
                Copy
              
            
          

            
// Assume the ExpensiveResource class is defined as before

// Create a FinalizationRegistry. We can optionally pass a cleanup function here
// that will be called for all registered objects if no specific callback is provided.
const registry = new FinalizationRegistry(value => {
  console.log('A registered object was finalized. Token:', value);
  // Here, 'value' is the token we passed during registration.
  // If 'value' is an object containing resource-specific data,
  // you can access it here to perform cleanup.
});

// Example usage:
function createAndRegisterResource(id) {
  const resource = new ExpensiveResource(id);
  
  // Register the resource with a token. The token can be anything,
  // but it's common to use an object containing resource details.
  // We can also specify a specific callback for this registration,
  // overriding the default one provided during registry creation.
  registry.register(resource, `Resource_ID_${id}`, {
    cleanupLogic: () => {
      console.log(`Performing specific cleanup for Resource ID ${id}`);
      resource.cleanup(); // Call the object's cleanup method
    }
  });

  return resource;
}

let resource1 = createAndRegisterResource(101);
let resource2 = createAndRegisterResource(102);

// Now, let's make them eligible for GC
resource1 = null;
resource2 = null;

// The registry will automatically call the cleanup logic when the
// 'resource' objects are finalized by the garbage collector.
// The timing is still non-deterministic.

// You can also use WeakRefs within the registry:
const resource3 = new ExpensiveResource(103);
const weakRef3 = new WeakRef(resource3);

// Register the WeakRef. When the actual resource object is GC'd,
// the callback will be invoked.
registry.register(weakRef3, 'WeakRef_Resource_103', {
  cleanupLogic: () => {
    console.log('WeakRef object was finalized. Token: WeakRef_Resource_103');
    // We can't directly call methods on resource3 here as it might be GC'd
    // Instead, the token itself might contain info or we rely on the fact
    // that the registration target was the WeakRef itself which will be cleared.
    // A more common pattern is to register the original object:
    console.log('Finalizing WeakRef associated object.');
  }
});

// To simulate GC for testing purposes, you might use:
// if (global && global.gc) { global.gc(); } // In Node.js
// For browsers, GC is managed by the engine.

// To observe, let's check after some delay:
setTimeout(() => {
  console.log('Checking finalization status after a delay...');
  // You won't see a direct output of the registry's work here,
  // but the console logs from the cleanup logic will appear when GC occurs.
}, 3000);

            

              
                Copy
              
            
          

            
// Example: A simple cache for expensive data fetched from a global API
class DataCache {
  constructor() {
    this.cache = new Map();
    // Register a cleanup mechanism for cache entries
    this.registry = new FinalizationRegistry(key => {
      console.log(`Cache entry for key ${key} has been finalized and will be removed.`);
      this.cache.delete(key);
    });
  }

  get(key, fetchDataFunction) {
    if (this.cache.has(key)) {
      const entry = this.cache.get(key);
      const weakRef = entry.weakRef;
      const dereferencedData = weakRef.deref();

      if (dereferencedData) {
        console.log(`Cache hit for key: ${key}`);
        return Promise.resolve(dereferencedData);
      } else {
        console.log(`Cache entry for key ${key} was stale (GC'd), refetching.`);
        // The cache entry itself might have been GC'd, but the key is still in the map.
        // We need to remove it from the map too if the WeakRef is empty.
        this.cache.delete(key);
      }
    }

    console.log(`Cache miss for key: ${key}. Fetching data...`);
    return fetchDataFunction().then(data => {
      // Store a WeakRef and register the key for cleanup
      const weakRef = new WeakRef(data);
      this.cache.set(key, { weakRef });
      this.registry.register(data, key); // Register the actual data with its key
      return data;
    });
  }
}

// Usage example:
const myCache = new DataCache();

const fetchGlobalData = async (country) => {
  console.log(`Simulating fetching data for ${country}...`);
  // Simulate a network request that takes time
  await new Promise(resolve => setTimeout(resolve, 500));
  return { country: country, data: `Some data for ${country}` };
};

// Fetch data for Germany
myCache.get('DE', () => fetchGlobalData('Germany')).then(data => console.log('Received:', data));

// Fetch data for Japan
myCache.get('JP', () => fetchGlobalData('Japan')).then(data => console.log('Received:', data));

// Later, if the 'data' objects are no longer strongly referenced,
// the registry will clean them from the 'myCache.cache' Map when GC occurs.

            

              
                Copy
              
            
          

            
// Example: Managing an event listener for a dynamic element
function setupButtonListener(buttonId) {
  const button = document.getElementById(buttonId);
  if (!button) return;

  const handleClick = () => {
    console.log(`Button ${buttonId} clicked!`);
    // Perform some action related to this button
  };

  button.addEventListener('click', handleClick);

  // Use FinalizationRegistry to remove the listener when the button is GC'd
  // (e.g., if the element is dynamically removed from the DOM)
  const registry = new FinalizationRegistry(targetNode => {
    console.log(`Cleaning up listener for element:`, targetNode);
    // Remove the specific event listener. This requires keeping a reference to handleClick.
    // A common pattern is to store the handler in a WeakMap.
    const handler = handlerMap.get(targetNode);
    if (handler) {
      targetNode.removeEventListener('click', handler);
      handlerMap.delete(targetNode);
    }
  });

  // Store the handler associated with the node for later removal
  const handlerMap = new WeakMap();
  handlerMap.set(button, handleClick);

  // Register the button element with the registry. When the button
  // element is garbage collected (e.g., removed from DOM), the cleanup will occur.
  registry.register(button, button); 

  console.log(`Listener setup for button: ${buttonId}`);
}

// To test this, you'd typically:
// 1. Create a button element dynamically: document.body.innerHTML += 'Click Me';
// 2. Call setupButtonListener('testBtn');
// 3. Remove the button from the DOM: const btn = document.getElementById('testBtn'); if (btn) btn.remove();
// 4. Let the GC run (or trigger it if possible for testing).

            

              
                Copy
              
            
          

            
// Example: Managing a hypothetical native file handle in Node.js

// In a real scenario, this would involve C++ addons or Buffer operations.
// For demonstration, we'll simulate a class that needs cleanup.
class NativeFileHandle {
  constructor(filePath) {
    this.filePath = filePath;
    this.handleId = Math.random().toString(36).substring(7);
    console.log(`[NativeFileHandle ${this.handleId}] Opened file: ${filePath}`);
    // In a real case, you'd acquire a native handle here.
  }

  read() {
    console.log(`[NativeFileHandle ${this.handleId}] Reading from ${this.filePath}`);
    // Simulate reading data
    return `Data from ${this.filePath}`;
  }

  close() {
    console.log(`[NativeFileHandle ${this.handleId}] Closing file: ${this.filePath}`);
    // In a real case, you'd release the native handle here.
    // Ensure this method is idempotent (can be called multiple times safely).
  }
}

// Create a registry for native resources
const nativeResourceRegistry = new FinalizationRegistry(handleId => {
  console.log(`[Registry] Finalizing NativeFileHandle with ID: ${handleId}`);
  // To close the actual resource, we need a way to look it up.
  // A WeakMap mapping handles to their close functions is common.
  const handle = activeHandles.get(handleId);
  if (handle) {
    handle.close();
    activeHandles.delete(handleId);
  }
});

// A WeakMap to keep track of active handles and their associated cleanup
const activeHandles = new WeakMap();

function useNativeFile(filePath) {
  const handle = new NativeFileHandle(filePath);
  
  // Store the handle and its cleanup logic, and register for finalization
  activeHandles.set(handle.handleId, handle);
  nativeResourceRegistry.register(handle, handle.handleId);

  console.log(`Using native file: ${filePath} (ID: ${handle.handleId})`);
  return handle;
}

// Simulate using files
let file1 = useNativeFile('/path/to/global/data.txt');
let file2 = useNativeFile('/path/to/another/resource.dat');

// Access data
console.log(file1.read());
console.log(file2.read());

// Make them eligible for GC
file1 = null;
file2 = null;

// When file1 and file2 objects are garbage collected, the registry
// will call the associated cleanup logic (handle.close() via activeHandles).
// You can try running this in Node.js and triggering GC manually with --expose-gc
// and then calling global.gc().

// Example of manual GC trigger in Node.js:
// if (typeof global.gc === 'function') {
//   console.log('Triggering garbage collection...');
//   global.gc();
// } else {
//   console.log('Run with --expose-gc to enable manual GC triggering.');
// }

            

              
                Copy