JavaScript Closure Variables Undefined Memory Leak Fix Utilities

These utilities help you fix JavaScript closure variables undefined memory leak issues with ready-to-use code snippets that you can implement immediately in your projects.

Core Utility Functions #

1. Closure Memory Manager #

class ClosureMemoryManager {
    constructor() {
        this.resources = new Set();
        this.isDestroyed = false;
    }
    
    /**
     * Create a managed closure that tracks resources
     * @param {Function} closureFn - The closure function
     * @param {Array} dependencies - Variables to track
     * @returns {Function} Managed closure with cleanup
     */
    createManagedClosure(closureFn, dependencies = []) {
        if (this.isDestroyed) {
            throw new Error('Memory manager has been destroyed');
        }
        
        const managedClosure = (...args) => {
            if (this.isDestroyed) {
                console.warn('Attempting to use destroyed closure');
                return undefined;
            }
            return closureFn.apply(this, args);
        };
        
        // Track dependencies
        dependencies.forEach(dep => {
            if (dep && typeof dep === 'object') {
                this.resources.add(dep);
            }
        });
        
        managedClosure.cleanup = () => this.cleanup();
        return managedClosure;
    }
    
    cleanup() {
        this.resources.clear();
        this.isDestroyed = true;
    }
}

// Usage example
const manager = new ClosureMemoryManager();
const data = { large: new Array(10000).fill('data') };

const safeClosure = manager.createManagedClosure(
    function(input) {
        return data.large.length + input;
    },
    [data]
);

// Clean up when done
// safeClosure.cleanup();

2. Safe Variable Access Utility #

/**
 * Create a safe accessor that prevents undefined access
 * @param {*} variable - The variable to wrap
 * @param {*} defaultValue - Default value if undefined
 * @returns {Function} Safe accessor function
 */
function createSafeAccessor(variable, defaultValue = null) {
    let currentValue = variable;
    let isValid = variable !== undefined;
    
    const accessor = {
        get: () => isValid ? currentValue : defaultValue,
        
        set: (newValue) => {
            currentValue = newValue;
            isValid = newValue !== undefined;
        },
        
        isValid: () => isValid,
        
        clear: () => {
            currentValue = null;
            isValid = false;
        }
    };
    
    return accessor;
}

// Usage
const dataAccessor = createSafeAccessor({ user: 'john' });

function createUserClosure() {
    return function() {
        const userData = dataAccessor.get();
        if (dataAccessor.isValid()) {
            return `User: ${userData.user}`;
        }
        return 'No user data available';
    };
}

3. Async Closure Fix Utility #

/**
 * Fix async closures to prevent undefined variable access
 * @param {Function} asyncOperation - Async function that sets variable
 * @param {*} initialValue - Initial value while loading
 * @returns {Object} Async closure manager
 */
function createAsyncClosureManager(asyncOperation, initialValue = null) {
    let value = initialValue;
    let isLoading = true;
    let error = null;
    let promise = null;
    
    const loadData = async () => {
        if (promise) return promise;
        
        promise = asyncOperation()
            .then(result => {
                value = result;
                isLoading = false;
                error = null;
                return result;
            })
            .catch(err => {
                error = err;
                isLoading = false;
                throw err;
            });
        
        return promise;
    };
    
    return {
        getValue: () => value,
        isLoading: () => isLoading,
        hasError: () => error !== null,
        getError: () => error,
        
        createClosure: function(processFn) {
            return async function(...args) {
                if (isLoading && !promise) {
                    await loadData();
                }
                
                if (isLoading) {
                    return processFn(initialValue, ...args);
                }
                
                if (error) {
                    throw new Error(`Async closure error: ${error.message}`);
                }
                
                return processFn(value, ...args);
            };
        },
        
        cleanup: function() {
            value = null;
            error = null;
            promise = null;
            isLoading = true;
        }
    };
}

// Usage
const asyncManager = createAsyncClosureManager(
    () => fetch('/api/data').then(r => r.json()),
    { default: 'loading...' }
);

const asyncClosure = asyncManager.createClosure((data, input) => {
    return `${data.message || data.default} - ${input}`;
});

4. WeakMap Closure Utility #

/**
 * Create memory-safe closures using WeakMap
 * @returns {Object} WeakMap closure factory
 */
function createWeakMapClosureFactory() {
    const cache = new WeakMap();
    const metadata = new WeakMap();
    
    return {
        /**
         * Create a closure that uses WeakMap for automatic cleanup
         * @param {Object} key - Object to use as WeakMap key
         * @param {Function} computeFn - Function to compute value
         * @returns {Function} Memory-safe closure
         */
        createClosure: function(key, computeFn) {
            if (typeof key !== 'object' || key === null) {
                throw new Error('WeakMap key must be an object');
            }
            
            return function(...args) {
                if (cache.has(key)) {
                    return cache.get(key);
                }
                
                const result = computeFn.apply(this, args);
                cache.set(key, result);
                
                // Store metadata for debugging
                metadata.set(key, {
                    created: Date.now(),
                    computeFn: computeFn.name || 'anonymous'
                });
                
                return result;
            };
        },
        
        /**
         * Check if key exists in cache
         * @param {Object} key - WeakMap key
         * @returns {boolean} True if cached
         */
        has: function(key) {
            return cache.has(key);
        },
        
        /**
         * Clear specific cache entry
         * @param {Object} key - WeakMap key to clear
         */
        clear: function(key) {
            cache.delete(key);
            metadata.delete(key);
        }
    };
}

// Usage
const weakMapFactory = createWeakMapClosureFactory();
const userObject = { id: 1, name: 'John' };

const userClosure = weakMapFactory.createClosure(
    userObject,
    function() {
        return `Processing user: ${userObject.name}`;
    }
);

5. Event Listener Cleanup Utility #

/**
 * Manage event listeners with automatic cleanup
 * @returns {Object} Event manager
 */
function createEventListenerManager() {
    const listeners = new Map();
    let isDestroyed = false;
    
    return {
        /**
         * Add managed event listener
         * @param {Element} element - DOM element
         * @param {string} event - Event type
         * @param {Function} handler - Event handler
         * @param {Object} options - Event options
         */
        addEventListener: function(element, event, handler, options = {}) {
            if (isDestroyed) {
                console.warn('Attempting to add listener to destroyed manager');
                return;
            }
            
            const key = `${element.tagName || 'unknown'}-${event}-${Date.now()}`;
            
            // Create safe handler that checks for destruction
            const safeHandler = function(...args) {
                if (isDestroyed) {
                    console.warn('Handler called after destruction');
                    return;
                }
                return handler.apply(this, args);
            };
            
            element.addEventListener(event, safeHandler, options);
            
            listeners.set(key, {
                element,
                event,
                handler: safeHandler,
                originalHandler: handler,
                options
            });
            
            return key;
        },
        
        /**
         * Remove specific listener
         * @param {string} key - Listener key returned from addEventListener
         */
        removeListener: function(key) {
            const listener = listeners.get(key);
            if (listener) {
                listener.element.removeEventListener(
                    listener.event, 
                    listener.handler, 
                    listener.options
                );
                listeners.delete(key);
            }
        },
        
        /**
         * Clean up all listeners
         */
        cleanup: function() {
            listeners.forEach((listener, key) => {
                listener.element.removeEventListener(
                    listener.event, 
                    listener.handler, 
                    listener.options
                );
            });
            
            listeners.clear();
            isDestroyed = true;
        }
    };
}

// Usage
const eventManager = createEventListenerManager();
const button = document.getElementById('myButton');

let userData = { name: 'John', age: 30 };

const listenerKey = eventManager.addEventListener(button, 'click', function() {
    // Safe closure - automatically cleaned up
    if (userData) {
        console.log(`Hello ${userData.name}`);
    }
});

// Clean up when done
// eventManager.cleanup();

Memory Leak Detection Utility #

/**
 * Monitor closure memory usage
 * @param {Function} closureFn - Closure to monitor
 * @returns {Function} Monitored closure
 */
function createMemoryMonitor(closureFn) {
    let callCount = 0;
    const startMemory = performance.memory?.usedJSHeapSize || 0;
    
    return function monitoredClosure(...args) {
        callCount++;
        
        const beforeCall = performance.memory?.usedJSHeapSize || 0;
        const result = closureFn.apply(this, args);
        const afterCall = performance.memory?.usedJSHeapSize || 0;
        
        const callDiff = afterCall - beforeCall;
        const totalDiff = afterCall - startMemory;
        
        if (callDiff > 100000) { // 100KB per call
            console.warn(`Memory spike detected: ${callDiff} bytes`);
        }
        
        if (callCount % 100 === 0) { // Log every 100 calls
            console.log(`Closure stats - Calls: ${callCount}, Memory delta: ${totalDiff} bytes`);
        }
        
        return result;
    };
}

Usage Examples #

Complete Example: Fixing a Memory Leak #

// Problematic code with memory leak
function createLeakyClosure() {
    let largeData = new Array(100000).fill('memory consuming data');
    let element = document.createElement('div');
    
    return function(input) {
        element.textContent = largeData[0] + input;
        return element;
    };
}

// Fixed version using utilities
function createFixedClosure() {
    const manager = new ClosureMemoryManager();
    const eventManager = createEventListenerManager();
    
    let largeData = new Array(100000).fill('data');
    const dataAccessor = createSafeAccessor(largeData);
    
    const safeClosure = manager.createManagedClosure(function(input) {
        const data = dataAccessor.get();
        if (!dataAccessor.isValid() || !data) {
            return null;
        }
        
        const element = document.createElement('div');
        element.textContent = data[0] + input;
        return element;
    }, [largeData]);
    
    // Return cleanup function
    safeClosure.destroy = function() {
        manager.cleanup();
        eventManager.cleanup();
        dataAccessor.clear();
        largeData = null;
    };
    
    return safeClosure;
}

// Usage
const safeClosure = createFixedClosure();
const result = safeClosure('test input');

// Clean up when done
safeClosure.destroy();

These utilities provide comprehensive solutions for why JavaScript closure variables undefined memory leak fix issues. Use them individually or combine them based on your specific needs to create memory-efficient, reliable closures in your applications.