# label

[JS](../../..) ⟩ [statement](..) ⟩ [other]() ⟩ label

{% hint style="success" %}
([..](.. "mention"))&#x20;

prefixes a statement with an [id](../../token/id "mention") which you can refer to.&#x20;

```javascript
<label> : <statement>        // syntax
```
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="success" %}
<mark style="color:purple;">**label**</mark> is <mark style="color:red;">**only**</mark>**&#x20;**<mark style="color:yellow;">**used by**</mark> [break](../flow/jump/break "mention") <mark style="color:yellow;">**/**</mark> [continue](../flow/jump/continue "mention").
{% endhint %}

{% hint style="warning" %}
( <mark style="color:yellow;">**nested**</mark> [loop](../loop "mention"))

<mark style="color:purple;">**labeled**</mark> <mark style="color:yellow;">**statement**</mark> is <mark style="color:red;">**needed**</mark>&#x20;

* when you want to [**skip**](../flow/jump/continue) <mark style="color:yellow;">**to**</mark> the <mark style="color:yellow;">**next iteration**</mark> of <mark style="color:yellow;">**an outer loop**</mark> that is <mark style="color:red;">**not**</mark>**&#x20;**<mark style="color:yellow;">**the**</mark>**&#x20;**<mark style="color:red;">**nearest**</mark>**&#x20;**<mark style="color:yellow;">**enclosing**</mark> [loop](../loop "mention").
* when you want to [break](../flow/jump/break "mention") <mark style="color:yellow;">**out**</mark> <mark style="color:yellow;">**of**</mark> a statement that is <mark style="color:red;">**not**</mark>**&#x20;**<mark style="color:yellow;">**the**</mark>**&#x20;**<mark style="color:red;">**nearest**</mark>**&#x20;**<mark style="color:yellow;">**enclosing**</mark> [loop](../loop "mention") <mark style="color:yellow;">**/**</mark> [switch](../flow/branch/switch "mention").
{% endhint %}

{% hint style="info" %}
The <mark style="color:yellow;">**namespace**</mark> for <mark style="color:purple;">**labels**</mark> is <mark style="color:red;">**different**</mark> than the namespace for [variable](../../../variable "mention")(s) and [func](../../../val/func "mention")(s), the <mark style="color:red;">**same**</mark> [id](../../token/id "mention") <mark style="color:green;">**can**</mark>**&#x20;**<mark style="color:yellow;">**be used as**</mark> <mark style="color:purple;">**label**</mark> <mark style="color:yellow;">**/**</mark> <mark style="color:orange;">**variable**</mark> or <mark style="color:orange;">**function**</mark> name.
{% endhint %}

{% hint style="warning" %}
"the [..](.. "mention") that you identify with a <mark style="color:purple;">**label**</mark> may be <mark style="color:red;">**any**</mark>**&#x20;**<mark style="color:yellow;">**statement**</mark>."

📘 [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#labeled_statement)
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}
* <mark style="color:yellow;">**flow control**</mark>
  * [continue](../flow/jump/continue "mention")
  * [break](../flow/jump/break "mention")
{% endtab %}

{% tab title="📗 參考" %}
* [ ] [javascript-the-definitive-guide](../../../../master/ref/javascript-the-definitive-guide "mention") ⟩ 5.5.1 Labeled Statements
{% endtab %}

{% tab title="📘 手冊" %}
* [ ] [Statements and declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) ⟩ [Others](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements#others) ⟩[ label](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label) ⭐️
* [ ] [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) ⟩ [label statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#labeled_statement)
{% endtab %}
{% endtabs %}
