---
description: a "function declaration" defined in a "block".
---

# function in block (FiB)

[JS](../../..) ⟩ [declaration](../../../grammar/declare) ⟩ [function]() ⟩ <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 [](<> "mention") defined <mark style="color:yellow;">**in**</mark> a [block](../../../grammar/statement/other/block "mention").

* [sloppy-mode](../../../concept/env/js-engine/mode/sloppy-mode "mention"): [<mark style="color:yellow;">**hoisted**</mark>](../../../scope/hoist/function) / <mark style="color:yellow;">**initialized**</mark> to [undefined](../../prim/undefined "mention") (<mark style="color:orange;">**outside**</mark> block)
* [strict-mode](../../../concept/env/js-engine/mode/strict-mode "mention"): <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>](../../../../browser) [js-engine](../../../concept/env/js-engine "mention")s (including <mark style="color:yellow;">**v8**</mark>)：

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

📗 [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](../../../concept/env/js-engine/mode/sloppy-mode "mention")：
  * is [<mark style="color:yellow;">**hoisted**</mark>](../../../scope/hoist/function) and <mark style="color:yellow;">**visible**</mark> <mark style="color:red;">**outside**</mark> the [block](../../../grammar/statement/other/block "mention"):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](../../../concept/env/js-engine/mode/strict-mode "mention")：
  * is <mark style="color:yellow;">**local**</mark> to the [block](../../../grammar/statement/other/block "mention"):exclamation:
  * <mark style="color:red;">**never**</mark>**&#x20;**<mark style="color:yellow;">**is**</mark> a redeclaration any more:exclamation:

:point\_right: compare： [var](../../../variable/declare/var "mention")
{% 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-and-closures-v.2](../../../../master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2 "mention") ⟩ [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 %}
