---
title: "How do JavaScript closures work?"  
description: "How do JavaScript closures work?"  
author: "Revati S Misra"  
published: 2023-04-29  
updated: 2023-11-20  
canonical: https://www.mindstick.com/forum/158080/how-do-javascript-closures-work  
category: "javascript"  
tags: ["javascript", "javascript object"]  
reading_time: 2 minutes  

---

# How do JavaScript closures work?

How do [JavaScript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript) closures work?

## Replies

### Reply by Aryan Kumar

Closures in JavaScript are a powerful and sometimes subtle feature that allows functions to "remember" the scope in which they were created, even if that scope is no longer active. Understanding closures is fundamental to mastering JavaScript.

Here's a basic explanation of how closures work:

### 1. Function Scope:

In JavaScript, variables declared inside a function are local to that function. They are only accessible within the function and are not visible outside of it.

```plaintext
function outerFunction() {
    let outerVar = 'I am from outerFunction';

    function innerFunction() {
        console.log(outerVar);  // innerFunction has access to outerVar
    }

    innerFunction();
}

outerFunction();
```

### 2. Closure:

A closure is created when a function is defined inside another function (nested function), and the inner function has access to the outer function's variables. The inner function forms a closure, "closing over" the variables it needs.

```plaintext
function outerFunction() {
    let outerVar = 'I am from outerFunction';

    function innerFunction() {
        console.log(outerVar);  // innerFunction forms a closure over outerVar
    }

    return innerFunction;
}

let closureFunc = outerFunction();
closureFunc();  // This will still log 'I am from outerFunction'
```

### 3. Retaining State:

Closures can be used to create functions that "remember" the state of their surrounding scope, even after that scope has finished executing.

```plaintext
function counter() {
    let count = 0;

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

let increment = counter();
increment();  // Outputs 1
increment();  // Outputs 2
```

In this example, the inner function (**increment**) forms a closure over the **count** variable. The **count** variable is retained between calls to **increment**, and each call increments its value.

### 4. Data Encapsulation:

Closures are often used to achieve data encapsulation, allowing you to create private variables and methods.

```plaintext
function createPerson(name) {
    let age = 0;

    function growOlder() {
        age++;
        console.log(`${name} is now ${age} years old.`);
    }

    return growOlder;
}

let person = createPerson('John');
person();  // Outputs "John is now 1 year old."
person();  // Outputs "John is now 2 years old."
```

In this case, the **growOlder** function has access to the **age** variable even though it's not directly accessible from the outside.

Understanding closures is crucial for more advanced JavaScript programming and helps in creating modular and maintainable code. They play a significant role in various JavaScript patterns and libraries.


---

Original Source: https://www.mindstick.com/forum/158080/how-do-javascript-closures-work

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.