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

# function hoisting

[JS](../..) ⟩ [scope](..) ⟩ [hoisting]() ⟩ function hoisting

{% hint style="success" %}
with a [declare](../../val/func/declare "mention")：

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

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

* [sloppy-mode](../../concept/env/js-engine/mode/sloppy-mode "mention"): ✅ [<mark style="color:yellow;">**hoisted**</mark>](function) / <mark style="color:yellow;">**initialized**</mark> to [undefined](../../val/prim/undefined "mention") (<mark style="color:orange;">**outside**</mark> [block](../../grammar/statement/other/block "mention"))
* [strict-mode](../../concept/env/js-engine/mode/strict-mode "mention"): ⛔ [<mark style="color:red;">**ReferenceError**</mark>](../../err/ref/not-defined) (<mark style="color:yellow;">**invisible**</mark> <mark style="color:orange;">**outside**</mark> [block](../../grammar/statement/other/block "mention")):exclamation:
{% endhint %}

{% tabs %}
{% tab title="🔴 主題" %}
* <mark style="color:yellow;">**related topics**</mark>
  * [declare](../../val/func/declare "mention")
{% endtab %}

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

* are processed <mark style="color:red;">**before**</mark> <mark style="color:yellow;">**code runs**</mark> (at [compile-time](../../compile/compile-time "mention")) 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 [..](.. "mention"), [function](function "mention") has <mark style="color:yellow;">**higher priority**</mark> over [variable](variable "mention"). ( :point\_right: [first](function/first "mention"):exclamation:)
{% endhint %}
{% endtab %}

{% tab title="👥 相關" %}
* compare：[fe-not-hoisted](variable/var/fe-not-hoisted "mention")
* [variable](variable "mention") / [var](variable/var "mention") / [let-const](variable/let-const "mention")
{% 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-and-closures-v.2](../../../master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2 "mention") ⟩&#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 %}
