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

# declaration

🚧 under construction -> function\*

[JS](/web/js.md) ⟩ [grammar](/web/js/grammar.md) ⟩ declaration

{% hint style="success" %}
⭐️ <mark style="color:yellow;">**only the following**</mark> are (<mark style="color:yellow;">**9**</mark>) <mark style="color:purple;">**declarations**</mark>：

* [let](/web/js/variable/declare/let.md) <mark style="color:yellow;">**/**</mark> [const](/web/js/variable/declare/const.md)  <mark style="color:red;">**(**</mark> :warning: [var is a statement❗️](/web/js/variable/declare/var/var-is-a-statement.md)<mark style="color:red;">**)**</mark>
* [class](/web/js/val/class.md) <mark style="color:yellow;">**/**</mark> [function](/web/js/val/func.md),&#x20;
* [`function*`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*)
* [`async function`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function), [`async function*`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function*)
* [import](/web/js/module/es/import.md) / [export](/web/js/module/es/export.md) (only appear at the <mark style="color:yellow;">**top-level**</mark> of a [module](/web/js/module.md))
  {% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
:star: <mark style="color:purple;">**declarations**</mark> and <mark style="color:yellow;">**statements**</mark> are <mark style="color:red;">**different**</mark>:exclamation:&#x20;

👉 [statement vs. declaration](/web/js/grammar/vs-declare.md):exclamation:
{% endhint %}

{% hint style="warning" %} <mark style="color:yellow;">**statement**</mark>**&#x20;**<mark style="color:purple;">**vs. declaration**</mark>

* [var](/web/js/variable/declare/var.md) is a [statement](/web/js/grammar/statement.md).  (👉 [var is a statement❗️](/web/js/variable/declare/var/var-is-a-statement.md))
* [let](/web/js/variable/declare/let.md)/[const](/web/js/variable/declare/const.md) is a [declaration](/web/js/grammar/declare.md). &#x20;

👉 [statement expected❗️](/web/js/grammar/statement/statement-expected.md):exclamation:
{% endhint %}

{% hint style="warning" %}
in a [module](/web/js/module.md) there's <mark style="color:red;">**no**</mark> "[module scope](/web/js/scope/module.md) <mark style="color:yellow;">**object**</mark>" for these <mark style="color:yellow;">**top-level**</mark> [declaration](/web/js/grammar/declare.md)s to be added to as [property](/web/js/val/obj/prop.md).

( 👉 compare： [global var / function is global object property❗️](/web/js/variable/declare/var/is-global-obj-prop.md))
{% endhint %}
{% endtab %}

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

* <mark style="color:yellow;">**declaring variables**</mark>
  * [variable declaration](/web/js/variable/declare.md)
  * [var](/web/js/variable/declare/var.md) :exclamation:\
    (:star: "<mark style="color:blue;">**var**</mark>" is a [statement](/web/js/grammar/statement.md), <mark style="color:red;">**not**</mark>**&#x20;**<mark style="color:yellow;">**a declaration**</mark>:exclamation:)
  * [let](/web/js/variable/declare/let.md)
  * [const](/web/js/variable/declare/const.md)
  * [redeclaration](/web/js/grammar/declare/redeclare.md):exclamation:
* <mark style="color:yellow;">**declaring functions**</mark>
  * [function declaration](/web/js/val/func/declare.md)
  * [function](/web/js/val/func.md)
    * [function in block (FiB)](/web/js/val/func/declare/function-in-block-fib.md):exclamation:
  * [class](/web/js/val/class.md)
  * [`function*`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*)
  * [`async function`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)
  * [`async function*`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function*)
* <mark style="color:yellow;">**import/export**</mark> ( 👉 📘 [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements#difference_between_statements_and_declarations) )
  * [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)

    Used to export functions to make them available for imports in external modules, and other scripts.
  * [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)

    Used to import functions exported from an external module, another script.
    {% endtab %}

{% tab title="🧨 雷區" %}
{% hint style="warning" %}
:star:[var](/web/js/variable/declare/var.md) is a [statement](/web/js/grammar/statement.md), <mark style="color:red;">**not**</mark> a <mark style="color:purple;">**declaration**</mark>. **👉** [statement expected❗️](/web/js/grammar/statement/statement-expected.md):exclamation:
{% endhint %}
{% endtab %}

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

* [lexical environment](/web/js/concept/execution-context/lexical-environment.md) - stores local variables/functions.
  {% endtab %}

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

* [ ] [YDKJS: Scope & Closures (v.2)](/web/master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2.md) ⟩ Ch. 4 ⟩ [ES Modules](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch4.md#es-modules-esm)
  {% endtab %}

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

* [ ] [Statements and declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) ⟩
  * [ ] [declaring variables](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements#declaring_variables)
  * [ ] [declaring functions and classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements#functions_and_classes)
  * [ ] [Difference between statements and declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements#difference_between_statements_and_declarations)❗️❗️❗️
    {% endtab %}

{% tab title="🚧" %}

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