> 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/expr/iife.md).

# IIFE

Immediately-Invoked Function Expression

[JS](/web/js.md) ⟩ [concepts](/web/js/concept.md) ⟩ [expression](/web/js/grammar/statement/expr.md) ⟩ [function expression](/web/js/val/func/expr.md) ⟩ IIFE

{% hint style="success" %}
immediately-invoked [function expression](/web/js/val/func/expr.md)
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}
a [closure](/web/js/val/func/closure.md) (or <mark style="color:purple;">**IIFE**</mark>) can be used to create a [scope](/web/js/scope.md) to <mark style="color:yellow;">**hide**</mark> [variable](/web/js/variable.md)s/[function](/web/js/val/func.md)s.
{% endhint %}

{% hint style="warning" %}
[break](/web/js/grammar/statement/flow/jump/break.md)/[continue](/web/js/grammar/statement/flow/jump/continue.md) <mark style="color:red;">**won't**</mark> operate <mark style="color:yellow;">**across**</mark> an <mark style="color:purple;">**IIFE**</mark> <mark style="color:yellow;">**function boundary**</mark> to control an <mark style="color:yellow;">**outer**</mark> [loop](/web/js/grammar/statement/loop.md)/[block](/web/js/grammar/statement/other/block.md).

📗 [You Don't Know JS Yet: Scopes & Closrues](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch6.md#invoking-function-expressions-immediately)
{% endhint %}

{% hint style="danger" %}
if the <mark style="color:yellow;">**code**</mark> you need to <mark style="color:yellow;">**wrap**</mark> a [scope](/web/js/scope.md) <mark style="color:yellow;">**around**</mark> has [return](/web/js/grammar/statement/flow/jump/return.md), [this](/web/js/concept/execution-context/this.md), [break](/web/js/grammar/statement/flow/jump/break.md), or [continue](/web/js/grammar/statement/flow/jump/continue.md) in it, <mark style="color:red;">**don't**</mark>**&#x20;**<mark style="color:yellow;">**use**</mark> a [function](/web/js/val/func.md)/[IIFE](/web/js/val/func/expr/iife.md)(which has <mark style="color:yellow;">**its own**</mark> [function boundary](/web/js/val/func/boundary.md)), use a [block](/web/js/grammar/statement/other/block.md) instead❗️

📗 [You Don't Know JS Yet: Scopes & Closrues](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch6.md#function-boundaries)
{% endhint %}
{% endtab %}

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

* [async IIFE](/web/js/async/async/async-iife.md)
  {% endtab %}

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

* [memoize by closure](/web/js/val/func/kind/higher/decorator/memoize/by-closure.md)
  {% endtab %}

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

```javascript
// ⭐️ IIFE
(function(){
    // ...
})();

// ⭐️ more compact form
!function(){
    // ...
}();

// ⭐️ arrow function as IIFE
(() => {
    // ...
})();
```

{% endtab %}

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

* [ ] JavaScriptTricks ⟩ [Problem Solved By IIFE: Don't expose your variables globally](https://javascripttricks.com/problem-solved-by-iife-86e44cbbc7c4)
  {% endtab %}

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

* [arrow function](/web/js/val/func/arrow.md) can be used as <mark style="color:purple;">**IIFE**</mark>.
* <mark style="color:purple;">**IIFE**</mark> is a [function expression](/web/js/val/func/expr.md).
* [async IIFE](/web/js/async/async/async-iife.md)
* [Node.js](/web/js/concept/env/node.js.md) <mark style="color:orange;">**automatically**</mark>**&#x20;**<mark style="color:yellow;">**wraps**</mark> the **code of a&#x20;**<mark style="color:orange;">**JS file**</mark> in a self <mark style="color:purple;">**IIFE**</mark>.
* [module pattern](/web/js/module/module-pattern.md) was implemented using [IIFE](/web/js/val/func/expr/iife.md).
  {% endtab %}
  {% endtabs %}