# IIFE

[JS](https://lochiwei.gitbook.io/web/js) ⟩ [concepts](https://lochiwei.gitbook.io/web/js/concept) ⟩ [expression](https://lochiwei.gitbook.io/web/js/grammar/statement/expr) ⟩ [function expression](https://lochiwei.gitbook.io/web/js/val/func/expr) ⟩ IIFE

{% hint style="success" %}
immediately-invoked [](https://lochiwei.gitbook.io/web/js/val/func/expr "mention")
{% endhint %}

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

{% hint style="warning" %}
[break](https://lochiwei.gitbook.io/web/js/grammar/statement/flow/jump/break "mention")/[continue](https://lochiwei.gitbook.io/web/js/grammar/statement/flow/jump/continue "mention") <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](https://lochiwei.gitbook.io/web/js/grammar/statement/loop "mention")/[block](https://lochiwei.gitbook.io/web/js/grammar/statement/other/block "mention").

📗 [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](https://lochiwei.gitbook.io/web/js/scope "mention") <mark style="color:yellow;">**around**</mark> has [return](https://lochiwei.gitbook.io/web/js/grammar/statement/flow/jump/return "mention"), [this](https://lochiwei.gitbook.io/web/js/concept/execution-context/this "mention"), [break](https://lochiwei.gitbook.io/web/js/grammar/statement/flow/jump/break "mention"), or [continue](https://lochiwei.gitbook.io/web/js/grammar/statement/flow/jump/continue "mention") in it, <mark style="color:red;">**don't**</mark>**&#x20;**<mark style="color:yellow;">**use**</mark> a [..](https://lochiwei.gitbook.io/web/js/val/func "mention")/[iife](https://lochiwei.gitbook.io/web/js/val/func/expr/iife "mention")(which has <mark style="color:yellow;">**its own**</mark> [boundary](https://lochiwei.gitbook.io/web/js/val/func/boundary "mention")), use a [block](https://lochiwei.gitbook.io/web/js/grammar/statement/other/block "mention") 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](https://lochiwei.gitbook.io/web/js/async/async/async-iife "mention")
  {% endtab %}

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

* [by-closure](https://lochiwei.gitbook.io/web/js/val/func/kind/higher/decorator/memoize/by-closure "mention")
  {% 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](https://lochiwei.gitbook.io/web/js/val/func/arrow "mention") can be used as <mark style="color:purple;">**IIFE**</mark>.
* <mark style="color:purple;">**IIFE**</mark> is a [](https://lochiwei.gitbook.io/web/js/val/func/expr "mention").
* [async-iife](https://lochiwei.gitbook.io/web/js/async/async/async-iife "mention")
* [node.js](https://lochiwei.gitbook.io/web/js/concept/env/node.js "mention") <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](https://lochiwei.gitbook.io/web/js/module/module-pattern "mention") was implemented using [iife](https://lochiwei.gitbook.io/web/js/val/func/expr/iife "mention").
  {% endtab %}
  {% endtabs %}