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

# statement vs. declaration

[JS](..) ⟩ [grammar]() ⟩ statement vs. declaration

{% hint style="success" %}
[_statements_](https://tc39.es/ecma262/#prod-Statement) and [_declarations_](https://tc39.es/ecma262/#prod-Declaration) are <mark style="color:yellow;">**two**</mark>**&#x20;**<mark style="color:red;">**disjoint**</mark>**&#x20;**<mark style="color:yellow;">**sets**</mark> of grammars.&#x20;

* the following are (9) [declare](declare "mention")s:
  * [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)
  * [`function`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function), [`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*)
  * [`class`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class)
  * [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export), [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) (can only appear at the top-level of a [module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules))
* <mark style="color:yellow;">**everything else**</mark> in this [list](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements#statements_and_declarations_by_category) is a [statement](statement "mention").
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
<mark style="color:purple;">**statement vs. declaration**</mark>

* [var](../variable/declare/var "mention") is a [statement](statement "mention"):exclamation:
* [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="info" %}
* <mark style="color:purple;">**declaration**</mark>： <mark style="color:yellow;">**binding**</mark> [id](token/id "mention") to [val](../val "mention").
* <mark style="color:purple;">**statement**</mark>： carrying out <mark style="color:yellow;">**actions**</mark>.
{% endhint %}
{% endtab %}

{% tab title="📘 手冊" %}
* [ ] [Difference between statements and declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements#difference_between_statements_and_declarations) ⭐️⭐️⭐️ ❗️❗️❗️
* [ ] ECMA ⟩&#x20;
  * [ ] [Statement](https://tc39.es/ecma262/#prod-Statement)
  * [ ] [Declaration](https://tc39.es/ecma262/#prod-Declaration)
{% endtab %}
{% endtabs %}
