# return

[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) ⟩ [jump](https://lochiwei.gitbook.io/web/js/grammar/statement/flow/jump) ⟩ return

{% hint style="success" %}
([..](https://lochiwei.gitbook.io/web/js/grammar/statement "mention")) 

<mark style="color:yellow;">**end execution**</mark> and <mark style="color:yellow;">**return**</mark> a [val](https://lochiwei.gitbook.io/web/js/val "mention") to the <mark style="color:yellow;">**caller**</mark>. [undefined](https://lochiwei.gitbook.io/web/js/val/prim/undefined "mention") is returned if <mark style="color:blue;">`expr`</mark> <mark style="color:yellow;">**omitted**</mark>.

```javascript
return <expr>
```

{% endhint %}

{% tabs %}
{% tab title="🧨 雷區" %}
{% hint style="danger" %} <mark style="color:purple;">**return**</mark> <mark style="color:yellow;">**statement**</mark> can be used <mark style="color:red;">**only**</mark>**&#x20;**<mark style="color:yellow;">**within the body of**</mark> a [func](https://lochiwei.gitbook.io/web/js/val/func "mention"), using it <mark style="color:yellow;">**anywhere**</mark>**&#x20;**<mark style="color:red;">**else**</mark> causes a [<mark style="color:red;">**SyntaxError**</mark>](https://lochiwei.gitbook.io/web/js/err/syntax).
{% endhint %}

{% hint style="danger" %} <mark style="color:purple;">**return**</mark> is affected by [automatic-semicolon-insertion](https://lochiwei.gitbook.io/web/js/grammar/token/punctuator/semicolon/automatic-semicolon-insertion "mention"):exclamation:
{% endhint %}

:warning: 注意：用 <mark style="color:blue;">`return`</mark> 時，不要寫成這樣：

```javascript
return
    a + b;
```

:x: 這種寫法 <mark style="color:blue;">`return`</mark> 後面會被自動加上 "<mark style="color:blue;">`;`</mark>" 分號:exclamation:

```javascript
return;        // 自動加上「;」分號❗️ 
a + b;
```

:white\_check\_mark: 建議寫成這樣：

```javascript
return (
    a + b
);
```

{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
when the <mark style="color:blue;">`{ ... }`</mark> of an [arrow](https://lochiwei.gitbook.io/web/js/val/func/arrow "mention") are <mark style="color:yellow;">**omitted**</mark>, a <mark style="color:yellow;">**return value**</mark> is sent out <mark style="color:red;">**without**</mark> using [return](https://lochiwei.gitbook.io/web/js/grammar/statement/flow/jump/return "mention").
{% 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="👥 相關" %}

* <mark style="color:purple;">**return**</mark> is a [reserved](https://lochiwei.gitbook.io/web/js/grammar/token/keyword/reserved "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) ⟩ [return](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return)
  {% endtab %}

{% tab title="🚧" %}

* [ ] function caller
* [x] undefined
  {% endtab %}
  {% endtabs %}