> 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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lochiwei.gitbook.io/web/js/val/func/declare.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.