---
description: 🚧 施工中
---

# function declaration

* [JS](../..) ⟩ [declaration](../../grammar/declare) ⟩ function declaration
* [JS](../..) ⟩ [value](..) ⟩ [object](../obj) ⟩ [function]() ⟩ declaration

{% hint style="success" %}
([declare](../../grammar/declare "mention"))&#x20;

<mark style="color:yellow;">**creates**</mark> a [](<> "mention") <mark style="color:yellow;">**object**</mark> and assigns it to the specified <mark style="color:yellow;">**name**</mark> (an [id](../../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](declare "mention") <mark style="color:yellow;">**vs.**</mark> [declare](../../variable/declare "mention")

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

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

{% hint style="warning" %}
[function-in-block-fib](declare/function-in-block-fib "mention")&#x20;

* <mark style="color:red;">**in**</mark> [sloppy-mode](../../concept/env/js-engine/mode/sloppy-mode "mention")：[<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:
* <mark style="color:green;">**in**</mark> [strict-mode](../../concept/env/js-engine/mode/strict-mode "mention")：<mark style="color:yellow;">**local**</mark> to the [block](../../grammar/statement/other/block "mention"):exclamation:
{% endhint %}

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

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

{% hint style="success" %}
:star: [declare](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 [](<> "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](../../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](param "mention")(s) and [](<> "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](../../../master/ref/js-spec "mention") ⟩ [FunctionDeclarationInstantiation](https://tc39.es/ecma262/#sec-functiondeclarationinstantiation)
{% endhint %}
{% endtab %}

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

{% tab title="👥 相關" %}
* compare： [declare](../../variable/declare "mention")
* [function](../../scope/hoist/function "mention") - function declarations are processed before code runs.
* [simple-vs-nonsimple](param/simple-vs-nonsimple "mention") - details about [parameter-scope](../../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 %}
