What is the relationship between closures and memory leaks? Closures और memory leaks के बीच क्या रिश्ता है?

Closures can potentially cause memory leaks if they retain references to large objects that are no longer needed. Understanding this relationship is important for writing efficient code.

// Potential memory leak with closures
function createHeavyProcessor() {
    // Large object that uses memory
    const largeData = new Array(1000000).fill('data');
    
    return function process() {
        // This closure retains reference to largeData
        // Even if we only use one property, the whole object stays in memory
        console.log(largeData[0]);
    };
}

const processor = createHeavyProcessor();
// largeData is retained in memory as long as processor exists

// SOLUTION 1: Extract only needed data
function createEfficientProcessor() {
    const largeData = new Array(1000000).fill('data');
    const firstElement = largeData[0]; // Extract what we need
    // Now we can let largeData be garbage collected
    
    return function process() {
        console.log(firstElement); // Only retain what's needed
    };
}

// Event listener memory leak
const button = document.querySelector('button');
let count = 0;

function setupEventListener() {
    const largeObject = { data: new Array(1000000) };
    
    button.addEventListener('click', function() {
        count++;
        console.log(largeObject.data[0]); // Retains largeObject
    });
}

setupEventListener();
// largeObject stays in memory even if button is removed from DOM

// SOLUTION: Remove listener when done
function setupEventListenerProperly() {
    const largeObject = { data: new Array(1000000) };
    
    const clickHandler = function() {
        count++;
        // Use only what's needed
    };
    
    button.addEventListener('click', clickHandler);
    
    // Later, when done:
    // button.removeEventListener('click', clickHandler);
}

// Closure reference cycle
function createNode(value) {
    const data = { value };
    
    return {
        getData: () => data,
        setData: (newData) => { data.value = newData; },
        // This creates circular reference
        getThis: function() { return this; } // 'this' refers back to parent object
    };
}

const node = createNode(42);
// node -> closure scope -> data
// node -> getThis() -> node (circular!)

// SOLUTION: Break circular references when done
node = null; // Allows garbage collection

// DOM element closure leak
function setupDOMListener() {
    const element = document.querySelector('.element');
    
    button.addEventListener('click', function() {
        console.log(element.textContent);
    });
}

setupDOMListener();
// Even if element is removed from DOM, it's retained by event listener closure

// SOLUTION: Clean up properly
function setupDOMListenerProperly() {
    let element = document.querySelector('.element');
    
    const handler = function() {
        if (element) {
            console.log(element.textContent);
        }
    };
    
    button.addEventListener('click', handler);
    
    // Later, cleanup:
    function cleanup() {
        button.removeEventListener('click', handler);
        element = null; // Release reference
    }
    
    return cleanup;
}

const cleanup = setupDOMListenerProperly();
// cleanup() when done

// Timers with closures
function setupTimer() {
    const largeData = new Array(1000000);
    
    setInterval(function() {
        console.log(largeData[0]);
    }, 1000);
    // largeData is retained in memory indefinitely!
}

// SOLUTION: Clear timer and nullify reference
function setupTimerProperly() {
    let largeData = new Array(1000000);
    
    const timerId = setInterval(function() {
        if (largeData) {
            console.log(largeData[0]);
        }
    }, 1000);
    
    function cleanup() {
        clearInterval(timerId);
        largeData = null; // Release reference
    }
    
    return cleanup;
}

const timerCleanup = setupTimerProperly();
// timerCleanup() when done

Interview tip: Explain that closures themselves aren't bad - they're a powerful feature. The issue arises when closures retain references to large objects that are no longer needed. Discuss specific scenarios: event listeners not being removed, timers not being cleared, DOM elements held in memory. Mention tools like Chrome DevTools to detect memory leaks and emphasize proper cleanup patterns.