> 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/as-argument.md).

# arrow function as argument

compared with "normal" functions as parameters

[JS](/web/js.md) ⟩ [objects](/web/js/val/obj.md) ⟩ [arrow function](/web/js/val/func/arrow.md) ⟩ as argument

{% hint style="danger" %}

* in the body of an [arrow function](/web/js/val/func/arrow.md)：[this](/web/js/concept/execution-context/this.md) is taken from the <mark style="color:yellow;">**outside context**</mark>.
* in the body of a "<mark style="color:yellow;">**normal**</mark>" [function](/web/js/val/func.md)：the function <mark style="color:red;">**has its own**</mark> [this](/web/js/concept/execution-context/this.md).
  {% endhint %}

{% tabs %}
{% tab title="💈範例" %}
:floppy\_disk: replit：[arrow function as argument](https://replit.com/@pegasusroe/arrow-function-as-parameter#index.js)

```javascript
let groupA = {

    title: "Group A",
    students: ["John", "Pete", "Alice"],

    showList() {
        // .forEach()         ╭── ⭐️ arrow function as argument ──╮
        this.students.forEach(student =>
            console.log(this.title + ': ' + student)
            //          ╰──╯ <---- `this` is taken from the outside ⭐️
        );
    }
};
```

* "<mark style="color:yellow;">**normal**</mark>" [function](/web/js/val/func.md) as argument：

```javascript
let groupB = {
    
    title: "Group B",
    students: ["Tom", "Bettie", "Joe"],

    showList() {
        
        // .forEach()         ╭── ⭐️ "normal" function as argument ──╮
        this.students.forEach(function(student) {
            //               ↱ ⛔ TypeError or `undefined`
            //          ╭── ⭐️ ──╮
            console.log(this.title + ': ' + student);
            //          ╰──╯ <---- ⭐️ "normal" function has its own `this`.
            //                        (which is undefined/window/"global object" by default)
            
            // ⭐️ possible errors:
            // ----------------------------------------------------------------------------
            //   `this`       `this.title`            error
            // ----------------------------------------------------------------------------
            // undefined       ❌             ⛔ TypeError: Cannot read property 'title' of undefined
            // window          undefined      no error
            // globalObject    undefined      no error
            // ----------------------------------------------------------------------------
        });
    }
};
```

* <mark style="color:yellow;">**results**</mark>：

```javascript
groupA.showList();    // this = groupA
// Group A: John
// Group A: Pete
// Group A: Alice

groupB.showList();    // this = globalObject (in Node's environment ⭐️)
// undefined: Tom
// undefined: Bettie
// undefined: Joe
```

{% endtab %}

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

* [arrow function](/web/js/val/func/arrow.md)
* [argument](/web/js/val/func/argument.md)&#x20;
* [parameter](/web/js/val/func/param.md)
  {% endtab %}

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

* [ ] JS.info ⟩ [arrow functions revisited](https://javascript.info/arrow-functions)
  {% endtab %}
  {% endtabs %}