# function declaration

* [JS](https://lochiwei.gitbook.io/web/js) ⟩ [declaration](https://lochiwei.gitbook.io/web/js/grammar/declare) ⟩ function declaration
* [JS](https://lochiwei.gitbook.io/web/js) ⟩ [value](https://lochiwei.gitbook.io/web/js/val) ⟩ [object](https://lochiwei.gitbook.io/web/js/val/obj) ⟩ [function](https://lochiwei.gitbook.io/web/js/val/func) ⟩ declaration

{% hint style="success" %}
([declare](https://lochiwei.gitbook.io/web/js/grammar/declare "mention")) 

<mark style="color:yellow;">**creates**</mark> a [](https://lochiwei.gitbook.io/web/js/val/func "mention") <mark style="color:yellow;">**object**</mark> and assigns it to the specified <mark style="color:yellow;">**name**</mark> (an [id](https://lochiwei.gitbook.io/web/js/grammar/token/id "mention")).

```javascript
// function declarations
function  f(params) { ... }          // normal function
function* f(params) { ... }          // generator function
async function  f(params) { ... }    // async function
async function* f(params) { ... }    // async generator function
```

{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
[declare](https://lochiwei.gitbook.io/web/js/val/func/declare "mention") <mark style="color:yellow;">**vs.**</mark> [declare](https://lochiwei.gitbook.io/web/js/variable/declare "mention")

* [declare](https://lochiwei.gitbook.io/web/js/val/func/declare "mention") is <mark style="color:red;">**instantly**</mark>**&#x20;**<mark style="color:yellow;">**fully**</mark>**&#x20;**<mark style="color:red;">**initialized**</mark>.
* [declare](https://lochiwei.gitbook.io/web/js/variable/declare "mention") is assigned [undefined](https://lochiwei.gitbook.io/web/js/val/prim/undefined "mention") <mark style="color:yellow;">**initially**</mark>. (:point\_right: [hoist](https://lochiwei.gitbook.io/web/js/scope/hoist "mention"))

📗 JS.info ⟩ [Function Declarations](https://javascript.info/closure#step-2-function-declarations)
{% endhint %}

{% hint style="warning" %}
[function-in-block-fib](https://lochiwei.gitbook.io/web/js/val/func/declare/function-in-block-fib "mention")&#x20;

* <mark style="color:red;">**in**</mark> [sloppy-mode](https://lochiwei.gitbook.io/web/js/concept/env/js-engine/mode/sloppy-mode "mention")：[<mark style="color:yellow;">**hoisted**</mark>](https://lochiwei.gitbook.io/web/js/scope/hoist/function) and <mark style="color:yellow;">**visible**</mark> <mark style="color:red;">**outside**</mark> the [block](https://lochiwei.gitbook.io/web/js/grammar/statement/other/block "mention"):exclamation:
* <mark style="color:green;">**in**</mark> [strict-mode](https://lochiwei.gitbook.io/web/js/concept/env/js-engine/mode/strict-mode "mention")：<mark style="color:yellow;">**local**</mark> to the [block](https://lochiwei.gitbook.io/web/js/grammar/statement/other/block "mention"):exclamation:
  {% endhint %}

{% hint style="warning" %} <mark style="color:purple;">**function declaration**</mark> in the [global](https://lochiwei.gitbook.io/web/js/scope/global "mention")&#x20;

* also expose themselves as [prop](https://lochiwei.gitbook.io/web/js/scope/global/object/prop "mention"). \
  :point\_right: [is-global-obj-prop](https://lochiwei.gitbook.io/web/js/variable/declare/var/is-global-obj-prop "mention"):exclamation:
  {% endhint %}

{% hint style="success" %}
:star: [declare](https://lochiwei.gitbook.io/web/js/val/func/declare "mention") <mark style="color:yellow;">**instantiation**</mark>

When an [execution context](https://tc39.es/ecma262/#sec-execution-contexts) is established for evaluating an ECMAScript [](https://lochiwei.gitbook.io/web/js/val/func "mention")：

* a new [Function Environment Record](https://tc39.es/ecma262/#sec-function-environment-records) is created and bindings for each <mark style="color:yellow;">**formal parameter**</mark> are instantiated in that [Environment Record](https://tc39.es/ecma262/#sec-environment-records).&#x20;
* Each [declare](https://lochiwei.gitbook.io/web/js/grammar/declare "mention") in the <mark style="color:yellow;">**function body**</mark> is also instantiated.&#x20;
* If the function's <mark style="color:yellow;">**formal parameters**</mark> <mark style="color:red;">**do not**</mark>**&#x20;**<mark style="color:yellow;">**include**</mark> any <mark style="color:yellow;">**default value initializers**</mark> then the <mark style="color:orange;">**body declarations**</mark> are instantiated in the <mark style="color:red;">**same**</mark> [Environment Record](https://tc39.es/ecma262/#sec-environment-records) as the <mark style="color:orange;">**parameters**</mark> :exclamation:
* If <mark style="color:yellow;">**default value initializers**</mark>**&#x20;exist**, a <mark style="color:red;">**second**</mark> [Environment Record](https://tc39.es/ecma262/#sec-environment-records) is created for the <mark style="color:yellow;">**body declarations**</mark> :exclamation:
* Formal [param](https://lochiwei.gitbook.io/web/js/val/func/param "mention")(s) and [](https://lochiwei.gitbook.io/web/js/val/func "mention")(s) are initialized as <mark style="color:yellow;">**part**</mark> of [FunctionDeclarationInstantiation](https://tc39.es/ecma262/#sec-functiondeclarationinstantiation). All <mark style="color:yellow;">**other bindings**</mark> are initialized during <mark style="color:yellow;">**evaluation**</mark> of the <mark style="color:yellow;">**function body**</mark>.

📘 [js-spec](https://lochiwei.gitbook.io/web/master/ref/js-spec "mention") ⟩ [FunctionDeclarationInstantiation](https://tc39.es/ecma262/#sec-functiondeclarationinstantiation)
{% endhint %}
{% endtab %}

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

* <mark style="color:yellow;">**function declarations**</mark>&#x20;
  * [](https://lochiwei.gitbook.io/web/js/val/func "mention")
  * [`function*`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*)
  * [functions](https://lochiwei.gitbook.io/web/js/async/async/functions "mention")
  * [`async function*`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function*)
  * [redeclare](https://lochiwei.gitbook.io/web/js/val/func/declare/redeclare "mention"):exclamation:
  * [function-in-block-fib](https://lochiwei.gitbook.io/web/js/val/func/declare/function-in-block-fib "mention"):exclamation:
* <mark style="color:yellow;">**scopes**</mark>
  * [function](https://lochiwei.gitbook.io/web/js/scope/hoist/function "mention")
  * [function](https://lochiwei.gitbook.io/web/js/scope/function "mention") / [boundary](https://lochiwei.gitbook.io/web/js/val/func/boundary "mention")
  * [instantiation](https://lochiwei.gitbook.io/web/js/val/func/declare/instantiation "mention")
  * [implied](https://lochiwei.gitbook.io/web/js/scope/implied "mention")
  * [parameter-scope](https://lochiwei.gitbook.io/web/js/scope/parameter-scope "mention")
  * [is-global-obj-prop](https://lochiwei.gitbook.io/web/js/variable/declare/var/is-global-obj-prop "mention"):exclamation:
    {% endtab %}

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

* compare： [declare](https://lochiwei.gitbook.io/web/js/variable/declare "mention")
* [function](https://lochiwei.gitbook.io/web/js/scope/hoist/function "mention") - function declarations are processed before code runs.
* [simple-vs-nonsimple](https://lochiwei.gitbook.io/web/js/val/func/param/simple-vs-nonsimple "mention") - details about [parameter-scope](https://lochiwei.gitbook.io/web/js/scope/parameter-scope "mention").
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] JS.info ⟩ [Function Declarations](https://javascript.info/closure#step-2-function-declarations)
  {% endtab %}

{% tab title="📘 手冊" %}

* [ ] [Statements and declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) ⟩ [function declaration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)
  {% endtab %}

{% tab title="🚧" %}

* [ ] function\*
* [ ] async function\*
* [ ] function declaration instantiation
  {% endtab %}
  {% endtabs %}