Suggest an edit

Improve this article

Refine the answer for “Closures”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## Definition in simple words

> A **closure** is a function **that "remembers" variables** from the scope where it was created,
> even after that scope has already finished executing.

---

## The simplest example

```javascript
function outer() {
  let count = 0; // variable of the outer function

function inner() {
    count++;
    console.log(count);
  }

return inner;
}

const counter = outer(); // call the outer function
counter(); // 1
counter(); // 2
counter(); // 3
```

What happens:

1. `outer()` runs -> creates the variable `count` and the inner function `inner`.
2. Returns `inner`, which **remembers** where it was created.
3. Even after `outer()` finishes, the variable `count` **is not destroyed**,
because `inner` holds a reference to it.

That is:

```javascript
outer()  → created count → inner()  → remembered count
```

---

## Closure = function + the environment in which it was created

Every closure stores a **lexical environment (scope)** -
the set of variables it has access to.

### Example:

```javascript
function makeAdder(x) {
  return function(y) {
    return x + y; // access to "x" from the outer scope
  };
}

const add5 = makeAdder(5);
console.log(add5(10)); // 15
console.log(add5(7));  // 12
```

Here:

- The function `makeAdder` creates and returns a new function.
- The returned function **closes over** the value `x` (in our case `5`).
- Even after `makeAdder` finishes, `x` remains "alive".

---

## Another example - a counter with a private variable

```javascript
function createCounter() {
  let count = 0;

return {
    increment() { count++; },
    decrement() { count--; },
    get() { return count; }
  };
}

const counter = createCounter();
counter.increment();
counter.increment();
console.log(counter.get()); // 2
```

Here `count` **cannot be accessed directly from outside**,
but it is accessible from the closed-over functions (`increment`, `get`).

This is a way to create **private variables** in JavaScript.

---

## An important property of closures

A function **remembers not the value**, but a **reference to the variable** in the outer scope.

```javascript
function make() {
  let value = 1;
  return () => console.log(value++);
}

const f = make();
f(); // 1
f(); // 2  ← the variable "value" stays alive between calls
```

---

## A common mistake (loops)

```javascript
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// after 1 second: 3, 3, 3
```

Why:

- All functions closed over **the same variable** `i`,
and by the time the timer fires, `i` already equals 3.

Fix using `let` (creates a new variable on each iteration):

```javascript
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// 0, 1, 2
```

---

## Quick summary

| What it is | Example |
|---|---|
| A function that "remembers" variables from the place it was created | `return function() { console.log(a); }` |
| Variables stay alive even after the outer function has finished | yes |
| Creates private data and state | yes |
| Often used in callbacks, handlers, modules | yes |

---

## Analogy

> A closure is like a backpack,
> in which a function carries all the variables it needs from the place it was born.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts529 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.