> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/val/func/closure.md).

# closure

[JS](/web/js.md) ⟩ [value](/web/js/val.md) ⟩ [function](/web/js/val/func.md) ⟩ closure

{% hint style="success" %}
A <mark style="color:purple;">**closure**</mark>&#x20;

* is the <mark style="color:yellow;">**combination**</mark> of a [function](/web/js/val/func.md) <mark style="color:yellow;">**bundled together**</mark> (enclosed) with <mark style="color:yellow;">**references**</mark> to its <mark style="color:yellow;">**surrounding state**</mark> (the [lexical environment](/web/js/concept/execution-context/lexical-environment.md)).&#x20;
* gives you <mark style="color:yellow;">**access**</mark> to an <mark style="color:yellow;">**outer function**</mark>'s [scope](/web/js/scope.md) from an <mark style="color:yellow;">**inner function**</mark>.&#x20;
* is <mark style="color:yellow;">**created**</mark>**&#x20;**<mark style="color:orange;">**every time**</mark> a <mark style="color:yellow;">**function**</mark> is created, at function creation time.
  {% endhint %}

{% tabs %}
{% tab title="🖥️ 影片" %}
:point\_right: [lexical environment](/web/js/concept/execution-context/lexical-environment.md)

{% embed url="<https://youtu.be/HuF-qYRnEAo>" %}
see how a closure "closes over" outer lexical environments
{% endembed %}
{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="info" %}
A <mark style="color:purple;">**closure**</mark> is a function that <mark style="color:yellow;">**remembers**</mark> its <mark style="color:yellow;">**outer variables**</mark> and can access them. in JavaScript, <mark style="color:yellow;">**all functions**</mark> are naturally <mark style="color:purple;">**closures**</mark> (with only one exception :point\_right:  ["new Function" syntax](https://javascript.info/new-function)). 📗 JS.info ⟩ [Closure](https://javascript.info/closure#step-4-returning-a-function)
{% endhint %}

{% hint style="warning" %}
it matters from which [scope](/web/js/scope.md) your [closure](/web/js/val/func/closure.md) closes in [variable](/web/js/variable.md)s.

:point\_right: [scopes matter with closures](/web/js/val/func/closure/scopes-matter-with-closures.md):exclamation:
{% endhint %}

{% hint style="warning" %}
雖說似乎有一個奇怪的 ["for-init" scope](/web/js/grammar/statement/loop/for/for/for-init-scope.md)，但裡面 [let](/web/js/variable/declare/let.md) 變數的表現其實更像是 [block-scoped](/web/js/grammar/statement/other/block/block.md)。:point\_right: [scopes matter with closures](/web/js/val/func/closure/scopes-matter-with-closures.md) ⟩ [scopes matter with closures](/web/js/val/func/closure/scopes-matter-with-closures.md#undefined-1)
{% endhint %}

{% hint style="info" %} <mark style="color:purple;">**Closure**</mark> is observed <mark style="color:orange;">**when**</mark> a [function](/web/js/val/func.md) uses [variable](/web/js/variable.md)(s) from <mark style="color:yellow;">**outer**</mark> [scope](/web/js/scope.md)(s) even <mark style="color:orange;">**while**</mark>**&#x20;**<mark style="color:yellow;">**running in a scope**</mark> <mark style="color:orange;">**where**</mark> those variable(s) wouldn't be accessible. 📗 [You Don't Know JS Yet](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch7.md#observable-definition)
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}

* [closure examples](/web/js/val/func/closure/examples.md)
  * :exclamation:[scopes matter with closures](/web/js/val/func/closure/scopes-matter-with-closures.md)
  * :bulb:[private property by closure](/web/js/val/func/closure/private-prop.md)
  * [closure: to close over or not](/web/js/val/func/closure/examples/closure-to-close-over-or-not.md)
  * [closure: manage grades](/web/js/val/func/closure/examples/grades.md) - closure can be used as a function with private properties.
  * [closure as object](/web/js/val/func/closure/examples/closure-as-object.md) - closure can be used as an object.
* [lexical environment](/web/js/concept/execution-context/lexical-environment.md) - stores all local variables.
* [\[\[Environment\]\]](/web/js/concept/execution-context/lexical-environment/environment.md) - reference to surrounding lexical environment.
  {% endtab %}

{% tab title="💈範例" %}

* replit：[closures](https://replit.com/@pegasusroe/closures#index.js)

```javascript
// • `clsr` closes over parameter `a`
//             ╭──clsr──╮
let sum = a => b => a + b ;

sum(3)(4),    // 7
sum(5)(-1),   // 4
```

{% endtab %}

{% tab title="👥 相關" %}

* a [closure](/web/js/val/func/closure.md) is usually a [nested function](/web/js/val/func/kind/nested.md).
* a [callback](/web/js/val/func/kind/callback.md) is usually a [closure](/web/js/val/func/closure.md).
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] [YDKJS: Scope & Closures (v.2)](/web/master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2.md) ⟩ [Ch. 7](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch7.md)
* [x] JS.info ⟩ [Variable scope, closure](https://javascript.info/closure)&#x20;
* [ ] itHome ⟩ [你不可不知的 JavaScript 二三事](https://ithelp.ithome.com.tw/users/20112483/ironman/2016) ⟩&#x20;
  * [ ] [#Day28：閉包 (Closures)](https://ithelp.ithome.com.tw/articles/10209465)
  * [ ] [#Day29：閉包 (Closures) 進階打怪實戰](https://ithelp.ithome.com.tw/articles/10209656)
    {% endtab %}

{% tab title="📘 手冊" %}

* [ ] [Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)
* [ ] [Pratical closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#practical_closures)
  {% endtab %}

{% tab title="👥 相關" %}

* every [function](/web/js/val/func.md) (including [IIFE](/web/js/val/func/expr/iife.md)) is a <mark style="color:purple;">**closure**</mark>.
* [memoize by closure](/web/js/val/func/kind/higher/decorator/memoize/by-closure.md)
  {% endtab %}
  {% endtabs %}