> 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/declare/function-in-block-fib.md).

# function in block (FiB)

[JS](/web/js.md) ⟩ [declaration](/web/js/grammar/declare.md) ⟩ [function](/web/js/val/func/declare.md) ⟩ <mark style="color:purple;">**function in block**</mark> (<mark style="color:purple;">**FiB**</mark>)

{% hint style="danger" %} <mark style="color:red;">**Don't**</mark>**&#x20;**<mark style="color:yellow;">**use**</mark>**&#x20;**<mark style="color:purple;">**function (declaration) in block**</mark>:exclamation:
{% endhint %}

{% hint style="success" %}
a [function declaration](/web/js/val/func/declare.md) defined <mark style="color:yellow;">**in**</mark> a [block](/web/js/grammar/statement/other/block.md).

* [sloppy mode](/web/js/concept/env/js-engine/mode/sloppy-mode.md): [<mark style="color:yellow;">**hoisted**</mark>](/web/js/scope/hoist/function.md) / <mark style="color:yellow;">**initialized**</mark> to [undefined](/web/js/val/prim/undefined.md) (<mark style="color:orange;">**outside**</mark> block)
* [strict mode](/web/js/concept/env/js-engine/mode/strict-mode.md): <mark style="color:yellow;">**local**</mark> to the block.
  {% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %} <mark style="color:yellow;">**JS**</mark> <mark style="color:yellow;">**spec**</mark> says that "<mark style="color:purple;">**function declaration in block**</mark> is <mark style="color:red;">**block-scoped**</mark>" :exclamation:

<mark style="color:red;">**However**</mark>, in <mark style="color:yellow;">**most**</mark> [<mark style="color:orange;">**browser-based**</mark>](/web/browser.md) [JS engine](/web/js/concept/env/js-engine.md)s (including <mark style="color:yellow;">**v8**</mark>)：

* the [identifier](/web/js/grammar/token/id.md) of the <mark style="color:purple;">**FiB**</mark> is <mark style="color:yellow;">**scoped**</mark> <mark style="color:red;">**outside**</mark> the [block](/web/js/grammar/statement/other/block.md)&#x20;
* with its [value](/web/js/val.md) initialized to [undefined](/web/js/val/prim/undefined.md).

📗 [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch6.md#function-declarations-in-blocks-fib)
{% endhint %}

{% hint style="warning" %} <mark style="color:purple;">**function (declaration) in block**</mark>

* <mark style="color:red;">**in**</mark> [sloppy mode](/web/js/concept/env/js-engine/mode/sloppy-mode.md)：
  * is [<mark style="color:yellow;">**hoisted**</mark>](/web/js/scope/hoist/function.md) and <mark style="color:yellow;">**visible**</mark> <mark style="color:red;">**outside**</mark> the [block](/web/js/grammar/statement/other/block.md):exclamation:
  * can be considered as a <mark style="color:yellow;">**redeclaration**</mark>
    * if there's already a function with the <mark style="color:yellow;">**same name**</mark> in the <mark style="color:yellow;">**outer scope**</mark>
    * the (re)<mark style="color:yellow;">**assignment**</mark> is <mark style="color:red;">**not**</mark>**&#x20;**<mark style="color:yellow;">**applied**</mark> <mark style="color:red;">**until**</mark>**&#x20;**<mark style="color:orange;">**the block is run**</mark>:exclamation:
* <mark style="color:green;">**in**</mark> [strict mode](/web/js/concept/env/js-engine/mode/strict-mode.md)：
  * is <mark style="color:yellow;">**local**</mark> to the [block](/web/js/grammar/statement/other/block.md):exclamation:
  * <mark style="color:red;">**never**</mark>**&#x20;**<mark style="color:yellow;">**is**</mark> a redeclaration any more:exclamation:

:point\_right: compare： [var](/web/js/variable/declare/var.md)
{% endhint %}

{% hint style="warning" %} <mark style="color:yellow;">**recommendations**</mark> for <mark style="color:purple;">**function in block**</mark> (<mark style="color:purple;">**FiB**</mark>)

* <mark style="color:red;">**don't**</mark> <mark style="color:yellow;">**use**</mark> it:exclamation:
  {% endhint %}
  {% endtab %}

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

* replit：[pure FiB](https://replit.com/@pegasusroe/pure-FiB-sloppy-mode#index.js)

```javascript
// 'use strict';  // ⭐️ toggle sloppy/strict mode

// undeclared;    // ⛔ ReferenceError: 'undeclared' is not defined

// ❗ access before declaration
console.log(pureFiB === undefined);    
// • sloppy: ✅ true
// • strict: ⛔ ReferenceError: 'pureFiB' is not defined

// block
{
    // ⭐️ "pure" function in block
    function pureFiB() {
        console.log(`I'm "Pure FiB".`);
    }
}

// ❗ "function in block" has no "block scope"
// -----------------------------------------------
// • sloppy: ✅ hoisted / initialized to undefined (in outer scope)
// • strict: ⛔ ReferenceError (invisible in outer scope)
pureFiB();    
// • sloppy: ✅ I'm "Pure FiB".
// • strict: ⛔ ReferenceError: 'pureFiB' is not defined
```

{% 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) ⟩ [Function Declarations in Blocks (FiB)](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch6.md#function-declarations-in-blocks-fib) ⭐️
  {% endtab %}

{% tab title="🗣 討論" %}

* [Function Declarations Within Blocks according to the Google JavaScript style guide](https://stackoverflow.com/questions/17409945/function-declarations-within-blocks-according-to-the-google-javascript-style-gui)
  {% endtab %}
  {% endtabs %}