> 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/scope/hoist/function.md).

# function hoisting

identifier hoisted at top of scope, value initialized to a function value (instantly).

[JS](/web/js.md) ⟩ [scope](/web/js/scope.md) ⟩ [hoisting](/web/js/scope/hoist.md) ⟩ function hoisting

{% hint style="success" %}
with a [function declaration](/web/js/val/func/declare.md)：

* [identifier](/web/js/grammar/token/id.md)： <mark style="color:yellow;">**hoisted**</mark> to the <mark style="color:yellow;">**top**</mark> of its [scope](/web/js/scope.md).
* [value](/web/js/val.md)： <mark style="color:yellow;">**initialized**</mark> to a [function](/web/js/val/func.md) value (<mark style="color:red;">**instantly**</mark>).&#x20;
  {% endhint %}

{% hint style="warning" %}
referencing a [function in block (FiB)](/web/js/val/func/declare/function-in-block-fib.md) outside block

* [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](/web/js/grammar/statement/other/block.md))
* [strict mode](/web/js/concept/env/js-engine/mode/strict-mode.md): ⛔ [<mark style="color:red;">**ReferenceError**</mark>](/web/js/err/ref/not-defined.md) (<mark style="color:yellow;">**invisible**</mark> <mark style="color:orange;">**outside**</mark> [block](/web/js/grammar/statement/other/block.md)):exclamation:
  {% endhint %}

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

* <mark style="color:yellow;">**related topics**</mark>
  * [function declaration](/web/js/val/func/declare.md)
    {% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="success" %}
[function declaration](/web/js/val/func/declare.md)(s)

* are processed <mark style="color:red;">**before**</mark> <mark style="color:yellow;">**code runs**</mark> (at [compile-time](/web/js/compile/compile-time.md)) so <mark style="color:yellow;">**it seems**</mark> that they are "<mark style="color:purple;">**hoisted**</mark>" to the top of their scope.
  {% endhint %}

{% hint style="warning" %}
in the same [scope](/web/js/scope.md), [function hoisting](/web/js/scope/hoist/function.md) has <mark style="color:yellow;">**higher priority**</mark> over [variable hoisting](/web/js/scope/hoist/variable.md). ( :point\_right: [function hoisting first❗️](/web/js/scope/hoist/function/first.md):exclamation:)
{% endhint %}
{% endtab %}

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

* compare：[function expression not hoisted](/web/js/scope/hoist/variable/var/fe-not-hoisted.md)
* [variable hoisting](/web/js/scope/hoist/variable.md) / [var hoisting](/web/js/scope/hoist/variable/var.md) / [let/const/class hoisting](/web/js/scope/hoist/variable/let-const.md)
  {% endtab %}

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

* replit：[function hoisting](https://replit.com/@pegasusroe/function-hoisting#index.js)

```javascript
// function declarations can be called from the start
greeting();                        // Hello!

// ⭐️ function hoisting
// ------------------------------------------------------
// • applies to "function declarations" only.
// • identifier: (function name) hoisted to top of scope.
// • value     : initialized (to a function value).
// ------------------------------------------------------
function greeting() {
    console.log("Hello!");
}
```

{% 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) ⟩&#x20;
  * [ ] [Ch. 1](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch1.md#chapter-1-whats-the-scope) ⟩ [Hoisting](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch1.md#hoisting)
  * [ ] Ch. 5 ⟩ [Hoisting: Declaration vs. Expression](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch5.md#hoisting-declaration-vs-expression)
    {% endtab %}
    {% endtabs %}