Explain the concept of closures.

A closure is a fundamental JavaScript concept where a function retains access to its lexical scope even when the function is executed outside that scope. In simpler terms, a closure is created when a function “remembers” and can access variables from its outer (enclosing) scope even after the outer function has finished executing.

How Closures Work

Closures are formed when:

1. You define a function inside another function
2. The inner function references variables from the outer function
3. The inner function is returned or passed elsewhere

When this happens, the inner function maintains a reference to its entire lexical environment, preserving access to the variables in its outer scope.

Basic Closure Example

function createCounter() {
  let count = 0;  // Local variable defined in the outer function
  
  function increment() {
    count++;  // Inner function has access to the outer function's variables
    return count;
  }
  
  return increment;  // Return the inner function
}

const counter = createCounter();  // counter is now a closure

console.log(counter());  // 1
console.log(counter());  // 2
console.log(counter());  // 3

In this example:

• createCounter defines a local variable count
• The inner function increment uses that variable
• When createCounter returns increment, it forms a closure
• The returned function counter maintains access to count even though createCounter has finished executing
• Each call to counter() increments and returns the preserved count variable

Key Characteristics of Closures

1. Data Encapsulation and Privacy

Closures provide a way to create private variables that can’t be accessed directly from outside:

function createBankAccount(initialBalance) {
  let balance = initialBalance;  // Private variable
  
  return {
    deposit: function(amount) {
      balance += amount;
      return balance;
    },
    withdraw: function(amount) {
      if (amount > balance) {
        return 'Insufficient funds';
      }
      balance -= amount;
      return balance;
    },
    getBalance: function() {
      return balance;
    }
  };
}

const account = createBankAccount(100);

console.log(account.getBalance());  // 100
console.log(account.deposit(50));   // 150
console.log(account.withdraw(70));  // 80
console.log(account.balance);       // undefined - can't access directly

2. Preserving State Between Function Calls

Closures maintain state between function invocations:

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

Each closure (double and triple) has its own preserved factor value.

3. Function Factories

Closures enable the creation of specialized functions:

function createGreeter(greeting) {
  return function(name) {
    return `${greeting}, ${name}!`;
  };
}

const sayHello = createGreeter('Hello');
const sayNamaste = createGreeter('Namaste');

console.log(sayHello('Rahul'));    // "Hello, Rahul!"
console.log(sayNamaste('Priya'));  // "Namaste, Priya!"

4. Managing Asynchronous Operations

Closures are crucial for preserving context in asynchronous code:

function fetchData(url) {
  const apiKey = 'secret-key';  // This will be enclosed in the closure
  
  return function() {
    // The inner function still has access to apiKey
    console.log(`Fetching data from ${url} with key ${apiKey}`);
    // In a real app, you would do the actual fetch here
  };
}

const fetchUsers = fetchData('https://api.example.com/users');
// Later in the code...
fetchUsers();  // The apiKey is still accessible

Common Closure Patterns

Module Pattern

Closures enable the module pattern, which provides a way to create private and public methods and variables:

const calculator = (function() {
  // Private variables and functions
  let result = 0;
  
  function validateNumber(num) {
    return typeof num === 'number' && !isNaN(num);
  }
  
  // Public API
  return {
    add: function(num) {
      if (validateNumber(num)) {
        result += num;
      }
      return result;
    },
    subtract: function(num) {
      if (validateNumber(num)) {
        result -= num;
      }
      return result;
    },
    getResult: function() {
      return result;
    },
    reset: function() {
      result = 0;
      return result;
    }
  };
})();

console.log(calculator.add(5));       // 5
console.log(calculator.subtract(2));  // 3
console.log(calculator.getResult());  // 3
console.log(calculator.reset());      // 0

Memoization

Closures can implement memoization to cache expensive function results:

function memoize(fn) {
  const cache = {};
  
  return function(...args) {
    const key = JSON.stringify(args);
    
    if (cache[key] === undefined) {
      console.log('Computing result...');
      cache[key] = fn(...args);
    } else {
      console.log('Returning from cache...');
    }
    
    return cache[key];
  };
}

// Example: Memoized fibonacci function
const fibonacci = memoize(function(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
});

console.log(fibonacci(10));  // Computing result... (multiple times for smaller values)
console.log(fibonacci(10));  // Returning from cache...

Event Handlers

Closures help maintain context in event handlers:

function setupButton(buttonId, message) {
  const button = document.getElementById(buttonId);
  
  button.addEventListener('click', function() {
    // This closure remembers the message variable
    alert(message);
  });
}

setupButton('btn1', 'Hello, World!');
setupButton('btn2', 'Welcome to JavaScript!');

Potential Issues with Closures

Memory Leaks

Closures can cause memory leaks if not managed properly, as they prevent variables from being garbage collected:

function createLargeData() {
  const largeData = new Array(1000000).fill('X');  // Large array
  
  return function() {
    // This inner function keeps a reference to largeData
    console.log(largeData.length);
  };
}

const printDataSize = createLargeData();  // largeData stays in memory

To avoid this, you can explicitly set references to null when they’re no longer needed:

let printDataSize = createLargeData();
printDataSize();  // Use the closure
printDataSize = null;  // Allow garbage collection

Loop Variables in Closures

A common mistake is creating closures inside loops with the loop variable:

// Problematic code
function createFunctions() {
  const functions = [];
  
  for (var i = 0; i < 3; i++) {
    functions.push(function() {
      console.log(i);  // All functions will log the same value
    });
  }
  
  return functions;
}

const fns = createFunctions();
fns[0]();  // 3
fns[1]();  // 3
fns[2]();  // 3

Solutions:

1. Using an IIFE (Immediately Invoked Function Expression):

function createFunctions() {
  const functions = [];
  
  for (var i = 0; i < 3; i++) {
    functions.push((function(value) {
      return function() {
        console.log(value);
      };
    })(i));
  }
  
  return functions;
}

2. Using let instead of var (ES6):

function createFunctions() {
  const functions = [];
  
  for (let i = 0; i < 3; i++) {
    functions.push(function() {
      console.log(i);  // Each function gets its own i
    });
  }
  
  return functions;
}

const fns = createFunctions();
fns[0]();  // 0
fns[1]();  // 1
fns[2]();  // 2

Closures and Scope Chain

Closures have access to three scopes:

1. Their own scope (variables defined between their curly brackets)
2. Outer function’s scope (variables defined in the enclosing function)
3. Global scope (variables defined in the global namespace)

const globalVar = 'I am global';

function outer() {
  const outerVar = 'I am from outer';
  
  function inner() {
    const innerVar = 'I am from inner';
    
    console.log(innerVar);  // Access own scope
    console.log(outerVar);  // Access outer function scope
    console.log(globalVar); // Access global scope
  }
  
  return inner;
}

const closureFunc = outer();
closureFunc();

Practical Applications of Closures

1. Implementing Private Methods

function User(name, age) {
  // Private variables
  const privateData = {
    name: name,
    age: age
  };
  
  // Private method
  function calculateBirthYear() {
    const currentYear = new Date().getFullYear();
    return currentYear - privateData.age;
  }
  
  // Public interface
  return {
    getName: function() {
      return privateData.name;
    },
    getAge: function() {
      return privateData.age;
    },
    getBirthYear: function() {
      return calculateBirthYear();
    }
  };
}

const user = User('Rahul', 30);
console.log(user.getName());      // "Rahul"
console.log(user.getBirthYear()); // Birth year based on current year
console.log(user.privateData);    // undefined (private)

2. Currying Functions

Currying is a technique of transforming a function with multiple arguments into a sequence of functions with single arguments, often implemented using closures:

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...moreArgs) {
        return curried.apply(this, args.concat(moreArgs));
      };
    }
  };
}

function add(a, b, c) {
  return a + b + c;
}

const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3));  // 6
console.log(curriedAdd(1, 2)(3));  // 6
console.log(curriedAdd(1)(2, 3));  // 6

3. Implementing Iterators

function createIterator(array) {
  let index = 0;
  
  return {
    next: function() {
      if (index < array.length) {
        return { value: array[index++], done: false };
      } else {
        return { done: true };
      }
    }
  };
}

const iterator = createIterator([1, 2, 3]);
console.log(iterator.next());  // { value: 1, done: false }
console.log(iterator.next());  // { value: 2, done: false }
console.log(iterator.next());  // { value: 3, done: false }
console.log(iterator.next());  // { done: true }

Interview Tips

• Explain closures in simple terms: “A function that remembers its outer variables and can access them”
• Highlight the key aspects: lexical scoping, data encapsulation, and state preservation
• Demonstrate practical use cases like private variables, function factories, and callbacks
• Be prepared to write a simple closure example from scratch
• Discuss potential pitfalls like memory leaks and loop variable issues
• Explain how closures relate to other JavaScript concepts like scope and the module pattern
• Mention how closures are used in modern JavaScript frameworks and libraries