# switch

[JS](../../../..) ⟩ [statement](../..) ⟩ [control flow](..) ⟩ [branch]() ⟩ switch

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

```javascript
switch (<expr>) {
    case <value1> : <statements>
    case <value2> : <statements>
    default       : <statements>
}
```
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
<mark style="color:red;">**not**</mark>  [block](../../other/block "mention")：

* [obj](../../../../val/obj/create/obj "mention") / [class](../../../../val/class "mention") / [switch](switch "mention") ( <mark style="color:red;">**no**</mark> [block](../../other/block/block "mention"):exclamation:)
* [func](../../../../val/func "mention")'s [scope](../../../../scope/function) is <mark style="color:yellow;">**different**</mark> from a [block](../../other/block/block "mention"):exclamation:

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

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

{% hint style="info" %}
the <mark style="color:yellow;">**comparison**</mark> <mark style="color:yellow;">**between**</mark> <mark style="color:purple;">**switch**</mark> <mark style="color:blue;">`(expr)`</mark> <mark style="color:yellow;">**and**</mark> a [case-clause](switch/case-clause "mention") is done by [strict-equality](../../../op/relational/equal/strict-equality "mention").
{% endhint %}
{% endtab %}

{% tab title="👥 相關" %}
* <mark style="color:purple;">**switch**</mark> statement uses punctuators [**`()`**](../../../token/punctuator/parentheses), [**`{}`**](../../../token/punctuator/braces), [**`:`**](../../../token/punctuator/colon).
{% endtab %}

{% tab title="📗 參考" %}
* [javascript-the-definitive-guide](../../../../../master/ref/javascript-the-definitive-guide "mention") ⟩ 5.3.3 switch
{% 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) ⟩ [switch](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch) ⭐️
{% endtab %}
{% endtabs %}
