> 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/val/func/declare.md).

# function declaration

* [JS](/web/js.md) ⟩ [declaration](/web/js/grammar/declare.md) ⟩ function declaration
* [JS](/web/js.md) ⟩ [value](/web/js/val.md) ⟩ [object](/web/js/val/obj.md) ⟩ [function](/web/js/val/func.md) ⟩ declaration

{% hint style="success" %}
([declaration](/web/js/grammar/declare.md)) 

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

```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" %}
[function declaration](/web/js/val/func/declare.md) <mark style="color:yellow;">**vs.**</mark> [variable declaration](/web/js/variable/declare.md)

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

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

{% hint style="warning" %}
[function in block (FiB)](/web/js/val/func/declare/function-in-block-fib.md)&#x20;

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

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

* also expose themselves as [global object property](/web/js/scope/global/object/prop.md). \
  :point\_right: [global var / function is global object property❗️](/web/js/variable/declare/var/is-global-obj-prop.md):exclamation:
  {% endhint %}

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

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

* 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 [declaration](/web/js/grammar/declare.md) 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 [parameter](/web/js/val/func/param.md)(s) and [function](/web/js/val/func.md)(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](/web/master/ref/js-spec.md) ⟩ [FunctionDeclarationInstantiation](https://tc39.es/ecma262/#sec-functiondeclarationinstantiation)
{% endhint %}
{% endtab %}

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

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

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

* compare： [variable declaration](/web/js/variable/declare.md)
* [function hoisting](/web/js/scope/hoist/function.md) - function declarations are processed before code runs.
* [simple vs. non-simple parameter](/web/js/val/func/param/simple-vs-nonsimple.md) - details about [parameter scope](/web/js/scope/parameter-scope.md).
  {% 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 %}