What is a closure in JavaScript and why are closures useful? Can you give an example of a practical use case?

Question

Accepted Answer

## What is a Closure?

A **closure** is a function that has access to variables from its outer (enclosing) function's scope, even after the outer function has finished executing. This happens because JavaScript functions "remember" the environment in which they were created.

## How Closures Work

```javascript
function createCounter() {
  let count = 0;  // This variable is "enclosed" by the inner function

  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
```

In this example, the inner function maintains access to `count` even after `createCounter()` has returned.

## Practical Use Cases

### 1. Data Privacy / Encapsulation

```javascript
function createUser(name) {
  let _password = '';  // Private variable

  return {
    setPassword: (pwd) => { _password = pwd; },
    checkPassword: (pwd) => _password === pwd,
    getName: () => name
  };
}

const user = createUser('John');
user.setPassword('secret123');
console.log(user.checkPassword('secret123')); // true
// _password is not directly accessible
```

### 2. Function Factories

```javascript
function multiply(factor) {
  return (number) => number * factor;
}

const double = multiply(2);
const triple = multiply(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15
```

### 3. Event Handlers with State

```javascript
function setupButtonHandler(buttonId) {
  let clickCount = 0;

  document.getElementById(buttonId).addEventListener('click', () => {
    clickCount++;
    console.log(`Button clicked ${clickCount} times`);
  });
}
```

## Why Closures Matter

- **Data privacy**: Variables in closures are protected from external modification
- **State preservation**: Functions can maintain state across multiple calls
- **Module pattern**: Closures enable the module pattern for organizing code
- **Callbacks**: Essential for async operations where callbacks need access to surrounding context