# arrow function

[JS](https://lochiwei.gitbook.io/web/js) ⟩ [value](https://lochiwei.gitbook.io/web/js/val) ⟩ [function](https://lochiwei.gitbook.io/web/js/val/func) ⟩ arrow function

{% hint style="success" %}
[es6](https://lochiwei.gitbook.io/web/js/feature/es6 "mention")：a <mark style="color:yellow;">**new form**</mark> of [expr](https://lochiwei.gitbook.io/web/js/val/func/expr "mention").

```javascript
a => expression       // one statement: {...} optional
(a, b) => expression  // multiple params: (...) required
a => { statement1; statement2; } // multiple statements: {...} required
```

{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
when the <mark style="color:blue;">`{ ... }`</mark> are omitted, 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" %} <mark style="color:red;">**doesn’t have own**</mark> bindings to [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this), [`arguments`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments) or [`super`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super)`.`&#x20;
{% endhint %}

{% hint style="danger" %}
⭐️ [as-method](https://lochiwei.gitbook.io/web/js/val/func/arrow/as-method "mention") (❗️<mark style="color:red;">**use with caution**</mark>❗️)

<mark style="color:yellow;">**normally**</mark>, you <mark style="color:red;">**don't**</mark>**&#x20;**<mark style="color:yellow;">**use arrow functions as**</mark> [methods](https://developer.mozilla.org/en-US/docs/Glossary/Method), but if you have：

* an object <mark style="color:blue;">**A**</mark> that has a [method](https://lochiwei.gitbook.io/web/js/val/obj/method "mention") <mark style="color:yellow;">**returning a new object**</mark> <mark style="color:blue;">**B**</mark>,&#x20;
* object <mark style="color:blue;">**B**</mark> has its own methods,&#x20;
* you <mark style="color:red;">**don't want**</mark> [this](https://lochiwei.gitbook.io/web/js/concept/execution-context/this "mention") in these methods to refer to <mark style="color:blue;">**B**</mark> but <mark style="color:yellow;">**refer to**</mark>**&#x20;**<mark style="color:blue;">**A**</mark>**&#x20;**<mark style="color:yellow;">**instead**</mark>,&#x20;

then using <mark style="color:orange;">**arrow functions as methods**</mark> is an option.

👉 see example： [sequence](https://lochiwei.gitbook.io/web/js/iteration/iterable/custom/sequence "mention")
{% endhint %}

{% hint style="danger" %}

* aren't suitable for [`call`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call), [`apply`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) and [`bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) methods, which generally rely on establishing a [scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope).
* don't have access to [new.target](https://lochiwei.gitbook.io/web/js/val/obj/create/new/new.target "mention") keyword.
* can’t be used as [constructors](https://developer.mozilla.org/en-US/docs/Glossary/Constructor). (can’t be called with <mark style="color:purple;">**new**</mark>)
* can’t use [`yield`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield), within its body.
  {% endhint %}

{% hint style="warning" %}
[duplicate](https://lochiwei.gitbook.io/web/js/val/func/param/duplicate "mention") <mark style="color:orange;">**Early Error rule**</mark> (🚧) is <mark style="color:red;">**always**</mark> applied to <mark style="color:purple;">**arrow function**</mark>**&#x20;**<mark style="color:yellow;">**definition**</mark> even if '<mark style="color:yellow;">**strict mode**</mark>' (🚧) is <mark style="color:red;">**not**</mark>**&#x20;**<mark style="color:yellow;">**defined explicitly**</mark>.&#x20;
{% endhint %}
{% endtab %}

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

* <mark style="color:yellow;">**roles**</mark>**&#x20;of** <mark style="color:purple;">**arrow function**</mark>：
  * [as-method](https://lochiwei.gitbook.io/web/js/val/func/arrow/as-method "mention")
  * [arrow-function-as-class-field](https://lochiwei.gitbook.io/web/js/val/func/arrow/arrow-function-as-class-field "mention")
  * [as-argument](https://lochiwei.gitbook.io/web/js/val/func/arrow/as-argument "mention")
  * [return-obj-literal](https://lochiwei.gitbook.io/web/js/val/func/arrow/return-obj-literal "mention")
* [arrow-function](https://lochiwei.gitbook.io/web/js/async/async/arrow-function "mention")
  {% endtab %}

{% tab title="🧨 雷區" %}
👉 see [return-obj-literal](https://lochiwei.gitbook.io/web/js/val/func/arrow/return-obj-literal "mention")

```javascript
const user = () => { name: 'Gandalf', age: 2019 };
// ❌ wrong syntax       ↳ ⛔️ SyntaxError: Unexpected token ':'

const user = () => ({ name: 'Gandalf', age: 2019 });
// ✅ wrap object literal in parentheses
```

{% endtab %}

{% tab title="📗 參考" %}

* [ ] [javascript-the-definitive-guide](https://lochiwei.gitbook.io/web/master/ref/javascript-the-definitive-guide "mention") ⟩ Ch. 8
* [ ] JS.info ⟩&#x20;
  * [ ] [object methods, "this"](https://javascript.info/object-methods#this-in-methods)
  * [ ] [arrow functions revisited](https://javascript.info/arrow-functions)
    {% endtab %}

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

* [Arrow function expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
  {% endtab %}

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

* can be used as a [bound-method](https://lochiwei.gitbook.io/web/js/val/class/member/bound-method "mention") in [field](https://lochiwei.gitbook.io/web/js/val/class/member/field "mention").
* can be used in [iife](https://lochiwei.gitbook.io/web/js/val/func/expr/iife "mention").
* [register](https://lochiwei.gitbook.io/web/browser/event/handler/register "mention") with arrow functions will lose <mark style="color:blue;">`this`</mark> context.
* [arrow-function](https://lochiwei.gitbook.io/web/js/async/async/arrow-function "mention")
  {% endtab %}

{% tab title="⬇️ 應用" %}

* [arr.containssubarray](https://lochiwei.gitbook.io/web/js/val/builtin/arr/ext/arr.containssubarray "mention") - used in [Array.prototype.every()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every).
* [is-in-global-scope](https://lochiwei.gitbook.io/web/js/scope/global/is-in-global-scope "mention") - check if current context is in [global](https://lochiwei.gitbook.io/web/js/scope/global "mention").
  {% endtab %}
  {% endtabs %}