# statement

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

{% hint style="success" %}
JavaScript code consists of [declare](declare "mention")s and <mark style="color:purple;">**statements**</mark>.
{% endhint %}

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

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

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

* 👉 [var-is-a-statement](../variable/declare/var/var-is-a-statement "mention") (<mark style="color:red;">**not**</mark> a [declare](declare "mention"))&#x20;
* [let](../variable/declare/let "mention") / [const](../variable/declare/const "mention") is [declare](declare "mention"). &#x20;
{% endhint %}

{% hint style="info" %}
<mark style="color:purple;">**statement**</mark>

* may have a [label](statement/other/label "mention").
{% endhint %}

{% hint style="info" %}
* If an [**expression**](statement/expr) corresponds to a <mark style="color:yellow;">**sentence fragment**</mark>, a <mark style="color:purple;">**statement**</mark> corresponds to a <mark style="color:yellow;">**full sentence**</mark>.&#x20;
* A <mark style="color:yellow;">**program**</mark> is a <mark style="color:yellow;">**list**</mark> of <mark style="color:purple;">**statements**</mark>.
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}
* <mark style="color:yellow;">**simple statements**</mark>
  * [expr](statement/expr "mention")
* <mark style="color:yellow;">**control flow**</mark>
  * [return](statement/flow/jump/return "mention") <mark style="color:yellow;">**/**</mark> [break](statement/flow/jump/break "mention") <mark style="color:yellow;">**/**</mark> [continue](statement/flow/jump/continue "mention") <mark style="color:yellow;">**/**</mark> [throw](../debug/handling/throw "mention") <mark style="color:yellow;">**/**</mark> [yield](../iteration/generator/func/yield "mention") <mark style="color:yellow;">**/**</mark> [try-catch-finally](../debug/handling/try-catch-finally "mention")
  * [if](statement/flow/branch/if "mention") <mark style="color:yellow;">**/**</mark> [switch](statement/flow/branch/switch "mention")
* [<mark style="color:yellow;">**loops**</mark>](statement/loop)
  * [while](statement/loop/while "mention") <mark style="color:yellow;">**/**</mark> [do...while](statement/loop/do...while "mention")
  * [of](statement/loop/for/of "mention") <mark style="color:yellow;">**/**</mark> [in](statement/loop/for/in "mention") <mark style="color:yellow;">**/**</mark> [for](statement/loop/for/for "mention")
* <mark style="color:yellow;">**other statements**</mark>
  * [empty](statement/other/empty "mention")&#x20;
  * [block](statement/other/block "mention") <mark style="color:yellow;">**/**</mark> [label](statement/other/label "mention") <mark style="color:yellow;">**/**</mark> [debugger](../debug/devtools/debugger "mention") <mark style="color:yellow;">**/**</mark> [with](statement/other/with "mention")
  * import / export
* <mark style="color:yellow;">**other topics**</mark>
  * [statements-that-must-end-with](token/punctuator/semicolon/statements-that-must-end-with "mention")
  * [vs-declare](vs-declare "mention")
  * [statement-expected](statement/statement-expected "mention")
{% endtab %}

{% tab title="📘 手冊" %}
* MDN ⟩[ JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference) ⟩ [Statements and declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) ⟩&#x20;
  * [block](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block)&#x20;
  * [return](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return)
  * [let](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
{% endtab %}

{% tab title="📗 參考" %}
* [ ] (2020) JavaScript The Definitive Guide, 1.3 A Tour of JavaScript
* [ ] Eloquent JavaScript ⟩ [Expressions & Statements](https://eloquentjavascript.net/02_program_structure.html#h_5fUOQZwwHx)
* [ ] [Expressions versus statements in JavaScript](https://2ality.com/2012/09/expressions-vs-statements.html) ⭐️
{% endtab %}
{% endtabs %}
