---
description: 🚧 under construction -> function*
---

# declaration

[JS](..) ⟩ [grammar]() ⟩ 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](../variable/declare/let "mention") <mark style="color:yellow;">**/**</mark> [const](../variable/declare/const "mention")  <mark style="color:red;">**(**</mark> :warning: [var-is-a-statement](../variable/declare/var/var-is-a-statement "mention")<mark style="color:red;">**)**</mark>
* [class](../val/class "mention") <mark style="color:yellow;">**/**</mark> [func](../val/func "mention"),&#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](../module/es/import "mention") / [export](../module/es/export "mention") (only appear at the <mark style="color:yellow;">**top-level**</mark> of a [module](../module "mention"))
{% 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;

👉 [vs-declare](vs-declare "mention"):exclamation:
{% endhint %}

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

* [var](../variable/declare/var "mention") is a [statement](statement "mention").  (👉 [var-is-a-statement](../variable/declare/var/var-is-a-statement "mention"))
* [let](../variable/declare/let "mention")/[const](../variable/declare/const "mention") is a [declare](declare "mention"). &#x20;

👉 [statement-expected](statement/statement-expected "mention"):exclamation:
{% endhint %}

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

( 👉 compare： [is-global-obj-prop](../variable/declare/var/is-global-obj-prop "mention"))
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}
* <mark style="color:yellow;">**declaring variables**</mark>
  * [declare](../variable/declare "mention")
  * [var](../variable/declare/var "mention") :exclamation:\
    (:star: "<mark style="color:blue;">**var**</mark>" is a [statement](statement "mention"), <mark style="color:red;">**not**</mark>**&#x20;**<mark style="color:yellow;">**a declaration**</mark>:exclamation:)
  * [let](../variable/declare/let "mention")
  * [const](../variable/declare/const "mention")
  * [redeclare](declare/redeclare "mention"):exclamation:
* <mark style="color:yellow;">**declaring functions**</mark>
  * [declare](../val/func/declare "mention")
  * [func](../val/func "mention")
    * [function-in-block-fib](../val/func/declare/function-in-block-fib "mention"):exclamation:
  * [class](../val/class "mention")
  * [`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](../variable/declare/var "mention") is a [statement](statement "mention"), <mark style="color:red;">**not**</mark> a <mark style="color:purple;">**declaration**</mark>. **👉** [statement-expected](statement/statement-expected "mention"):exclamation:
{% endhint %}
{% endtab %}

{% tab title="👥 相關" %}
* [lexical-environment](../concept/execution-context/lexical-environment "mention") - stores local variables/functions.
{% endtab %}

{% tab title="📗 參考" %}
* [ ] [ydkjs-scope-and-closures-v.2](../../master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2 "mention") ⟩ 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 %}
