Explain closures and provide a practical use case where closures are essential. What are potential memory leak concerns with closures?

function outerFunction(x) {
  const outerVariable = x;
  
  function innerFunction(y) {
    console.log(outerVariable + y); // Access to outer scope
  }
  
  return innerFunction;
}

const closure = outerFunction(10);
closure(5); // Output: 15
// outerFunction has finished, but innerFunction still has access to outerVariable

function createCounter() {
  let count = 0; // Private variable
  
  return {
    increment: () => ++count,
    decrement: () => --count,
    getCount: () => count
  };
}

const counter = createCounter();
console.log(counter.getCount()); // 0
counter.increment();
console.log(counter.getCount()); // 1
// count is not directly accessible from outside

function createMultiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

function setupButton(buttonId, clickCount) {
  const button = document.getElementById(buttonId);
  
  button.addEventListener('click', function() {
    clickCount++;
    console.log(`Button clicked ${clickCount} times`);
  });
}

setupButton('myButton', 0);
// Each button maintains its own click count

// Good: Explicit cleanup
function createLeakyClosure() {
  const largeObject = new Array(1000000).fill('data');
  
  return function() {
    // Use largeObject
    return largeObject.length;
  };
}

// Better: Clear references when done
function createSafeClosure() {
  const largeObject = new Array(1000000).fill('data');
  
  const closure = function() {
    return largeObject.length;
  };
  
  // Provide cleanup method
  closure.cleanup = function() {
    largeObject.length = 0; // Clear the array
  };
  
  return closure;
}