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:

You define a function inside another function
The inner function references variables from the outer function
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:

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;
}

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:

Their own scope (variables defined between their curly brackets)
Outer function’s scope (variables defined in the enclosing function)
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

Test Your Knowledge

Take a quick quiz to test your understanding of this topic.