> 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/statement/flow/jump/break.md).

# break

[JS](/web/js.md) ⟩ [statement](/web/js/grammar/statement.md) ⟩ [control flow](/web/js/grammar/statement/flow.md) ⟩ break

{% hint style="success" %}
([statement](/web/js/grammar/statement.md)) <mark style="color:yellow;">**exit**</mark> <mark style="color:red;">**immediately**</mark>

* the <mark style="color:yellow;">**current**</mark> (<mark style="color:orange;">**innermost eclosing**</mark>) [loop](/web/js/grammar/statement/loop.md)/ [switch](/web/js/grammar/statement/flow/branch/switch.md)&#x20;
* <mark style="color:yellow;">**or**</mark> [**labeled**](/web/js/grammar/statement/other/label.md) <mark style="color:yellow;">**statement**</mark>.

```javascript
break;              // break current loop/switch
break <label>;      // break labeled statement
```

{% endhint %}

{% tabs %}
{% tab title="🧨 雷區" %}
{% hint style="danger" %} <mark style="color:purple;">**break**</mark> <mark style="color:yellow;">**statement**</mark> (<mark style="color:yellow;">**with or without**</mark> a [label](/web/js/grammar/statement/other/label.md)) <mark style="color:red;">**can not**</mark>**&#x20;transfer control&#x20;**<mark style="color:red;">**across**</mark> <mark style="color:yellow;">**function boundaries**</mark>. cannot label a function definition statement, for example, and then use that label inside the function.
{% endhint %}

{% hint style="warning" %} <mark style="color:purple;">**break**</mark>**&#x20;**<mark style="color:yellow;">**/**</mark> [continue](/web/js/grammar/statement/flow/jump/continue.md) <mark style="color:red;">**won't**</mark> operate <mark style="color:yellow;">**across**</mark> an [IIFE](/web/js/val/func/expr/iife.md) <mark style="color:yellow;">**function boundary**</mark> to control an <mark style="color:yellow;">**outer**</mark> [loop](/web/js/grammar/statement/loop.md)/[block](/web/js/grammar/statement/other/block.md).

📗 [You Don't Know JS Yet: Scopes & Closrues](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch6.md#invoking-function-expressions-immediately)
{% endhint %}
{% endtab %}

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

{% hint style="warning" %}
[**labeled**](/web/js/grammar/statement/other/label.md) <mark style="color:yellow;">**statement**</mark> is <mark style="color:red;">**needed**</mark> when you want to <mark style="color:purple;">**break**</mark> <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 <mark style="color:yellow;">**/**</mark> switch.
{% endhint %}

{% hint style="danger" %}
if the <mark style="color:yellow;">**code**</mark> you need to <mark style="color:yellow;">**wrap**</mark> a [scope](/web/js/scope.md) <mark style="color:yellow;">**around**</mark> has [return](/web/js/grammar/statement/flow/jump/return.md), [this](/web/js/concept/execution-context/this.md), [break](/web/js/grammar/statement/flow/jump/break.md), or [continue](/web/js/grammar/statement/flow/jump/continue.md) in it, <mark style="color:red;">**don't**</mark>**&#x20;**<mark style="color:yellow;">**use**</mark> a [function](/web/js/val/func.md)/[IIFE](/web/js/val/func/expr/iife.md)(which has <mark style="color:yellow;">**its own**</mark> [function boundary](/web/js/val/func/boundary.md)), use a [block](/web/js/grammar/statement/other/block.md) instead❗️

📗 [You Don't Know JS Yet: Scopes & Closrues](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch6.md#function-boundaries)
{% endhint %}
{% endtab %}

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

* [label](/web/js/grammar/statement/other/label.md) is <mark style="color:red;">**only**</mark>**&#x20;**<mark style="color:yellow;">**used by**</mark> <mark style="color:purple;">**break**</mark> <mark style="color:yellow;">**/**</mark> [continue](/web/js/grammar/statement/flow/jump/continue.md).
  {% endtab %}

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

* [continue vs. break](/web/js/grammar/statement/flow/jump/continue-vs.-break.md)
  {% endtab %}

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

* [ ] [Statements and declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) ⟩ [control flow](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements#control_flow) ⟩ [break](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break) ⭐️
* [ ] [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) ⟩ [break statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#break_statement)
  {% endtab %}
  {% endtabs %}