# break

[JS](https://lochiwei.gitbook.io/web/js) ⟩ [statement](https://lochiwei.gitbook.io/web/js/grammar/statement) ⟩ [control flow](https://lochiwei.gitbook.io/web/js/grammar/statement/flow) ⟩ break

{% hint style="success" %}
([..](https://lochiwei.gitbook.io/web/js/grammar/statement "mention")) <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](https://lochiwei.gitbook.io/web/js/grammar/statement/loop "mention")/ [switch](https://lochiwei.gitbook.io/web/js/grammar/statement/flow/branch/switch "mention")&#x20;
* <mark style="color:yellow;">**or**</mark> [**labeled**](https://lochiwei.gitbook.io/web/js/grammar/statement/other/label) <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](https://lochiwei.gitbook.io/web/js/grammar/statement/other/label "mention")) <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](https://lochiwei.gitbook.io/web/js/grammar/statement/flow/jump/continue "mention") <mark style="color:red;">**won't**</mark> operate <mark style="color:yellow;">**across**</mark> an [iife](https://lochiwei.gitbook.io/web/js/val/func/expr/iife "mention") <mark style="color:yellow;">**function boundary**</mark> to control an <mark style="color:yellow;">**outer**</mark> [loop](https://lochiwei.gitbook.io/web/js/grammar/statement/loop "mention")/[block](https://lochiwei.gitbook.io/web/js/grammar/statement/other/block "mention").

📗 [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](https://lochiwei.gitbook.io/web/js/grammar/statement/other/label "mention") 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](https://lochiwei.gitbook.io/web/js/grammar/statement/flow/jump/continue "mention").
{% endhint %}

{% hint style="warning" %}
[**labeled**](https://lochiwei.gitbook.io/web/js/grammar/statement/other/label) <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](https://lochiwei.gitbook.io/web/js/scope "mention") <mark style="color:yellow;">**around**</mark> has [return](https://lochiwei.gitbook.io/web/js/grammar/statement/flow/jump/return "mention"), [this](https://lochiwei.gitbook.io/web/js/concept/execution-context/this "mention"), [break](https://lochiwei.gitbook.io/web/js/grammar/statement/flow/jump/break "mention"), or [continue](https://lochiwei.gitbook.io/web/js/grammar/statement/flow/jump/continue "mention") in it, <mark style="color:red;">**don't**</mark>**&#x20;**<mark style="color:yellow;">**use**</mark> a [func](https://lochiwei.gitbook.io/web/js/val/func "mention")/[iife](https://lochiwei.gitbook.io/web/js/val/func/expr/iife "mention")(which has <mark style="color:yellow;">**its own**</mark> [boundary](https://lochiwei.gitbook.io/web/js/val/func/boundary "mention")), use a [block](https://lochiwei.gitbook.io/web/js/grammar/statement/other/block "mention") 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](https://lochiwei.gitbook.io/web/js/grammar/statement/other/label "mention") 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](https://lochiwei.gitbook.io/web/js/grammar/statement/flow/jump/continue "mention").
  {% endtab %}

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

* [continue-vs.-break](https://lochiwei.gitbook.io/web/js/grammar/statement/flow/jump/continue-vs.-break "mention")
  {% 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 %}