---
description: Immediately-Invoked Function Expression
---

# IIFE

[JS](../../..) ⟩ [concepts](../../../concept) ⟩ [expression](../../../grammar/statement/expr) ⟩ [function expression]() ⟩ IIFE

{% hint style="success" %}
immediately-invoked [](<> "mention")
{% endhint %}

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

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

{% tab title="✨ 範例" %}
* [by-closure](../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](../arrow "mention") can be used as <mark style="color:purple;">**IIFE**</mark>.
* <mark style="color:purple;">**IIFE**</mark> is a [](<> "mention").
* [async-iife](../../../async/async/async-iife "mention")
* [node.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](../../../module/module-pattern "mention") was implemented using [iife](iife "mention").
{% endtab %}
{% endtabs %}
