---
# System prepended metadata

title: 箭頭函式
tags: [ES6, JavaScript]

---

# 箭頭函式
###### tags: `JavaScript` `ES6`

```javascript=
const func = (x) => x + 1
```

相當於

```javascript=
const func = function (x) { return x + 1 }
```
結論：
箭頭之後的是要return的東西
箭頭之前的是要帶的參數
```javascript=
// 基本用法
const arrow1 = (param1, param2) => { ... } 
// 僅有一個參數時，可省略括號
const arrow2 = params => { ... } 
// 單一運算後直接回傳時，可省略大括號
const arrow3 = params => params ** 2
```

拆解
```javascript=
let fancy = x => y => z => x + y + z
```

加回去之後
```javascript=
let fancy = (x) => {
  return (y) => {
    return (z) => {
      return x + y + z
    }
  }
}
```

拆解練習
```javascript=
inputEl.forEach(btn => btn.addEventListener("click", returnValue(btn)));
```
拆完
```javascript=
inputEl.forEach(function (btn) {
  btn.addEventListener("click", function () {
    console.log(btn.value);
  });
});
```


>參考資料:
>Day 06: ES6篇 - Arrow Function(箭頭函式)
>https://ithelp.ithome.com.tw/articles/10185221
>10. [JS] 一般函式與箭頭函式的差異？
>https://ithelp.ithome.com.tw/articles/10221214