> 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/val/func/arrow.md).

# arrow function

(ES6) a new form of function expression.

[JS](/web/js.md) ⟩ [value](/web/js/val.md) ⟩ [function](/web/js/val/func.md) ⟩ arrow function

{% hint style="success" %}
[⭐️ ES6 (2015)](/web/js/feature/es6.md)：a <mark style="color:yellow;">**new form**</mark> of [function expression](/web/js/val/func/expr.md).

```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](/web/js/grammar/statement/flow/jump/return.md).
{% 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" %}
⭐️ [arrow function as method❗️](/web/js/val/func/arrow/as-method.md) (❗️<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](/web/js/val/obj/method.md) <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](/web/js/concept/execution-context/this.md) 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](/web/js/iteration/iterable/custom/sequence.md)
{% 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](/web/js/val/obj/create/new/new.target.md) 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" %}
[deplicate parameters](/web/js/val/func/param/duplicate.md) <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>：
  * [arrow function as method❗️](/web/js/val/func/arrow/as-method.md)
  * [arrow function as class field❗️](/web/js/val/func/arrow/arrow-function-as-class-field.md)
  * [arrow function as argument](/web/js/val/func/arrow/as-argument.md)
  * [arrow function returning object literal needs (...)❗️](/web/js/val/func/arrow/return-obj-literal.md)
* [async arrow function](/web/js/async/async/arrow-function.md)
  {% endtab %}

{% tab title="🧨 雷區" %}
👉 see [arrow function returning object literal needs (...)❗️](/web/js/val/func/arrow/return-obj-literal.md)

```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](/web/master/ref/javascript-the-definitive-guide.md) ⟩ 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](/web/js/val/class/member/bound-method.md) in [class field](/web/js/val/class/member/field.md).
* can be used in [IIFE](/web/js/val/func/expr/iife.md).
* [register handler](/web/browser/event/handler/register.md) with arrow functions will lose <mark style="color:blue;">`this`</mark> context.
* [async arrow function](/web/js/async/async/arrow-function.md)
  {% endtab %}

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

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