前言

今天要來介紹什麼是Arrow Function，這個是一個看起來非常簡單的語法，因為=>就像是箭頭一樣所以叫做Arrow Function，它可以直接把函式的建立變成簡化版，看起來像是這樣：

let arrow = (a,b) => a+b;

會叫做Arrow Function也是因為=>就像是一個箭頭的關係，雖然看起來很簡單，但其實我自己在寫時常常忘記怎麼寫,利用這次寫文章的機會來複習一下。

過去與現在

Arrow Function是es6之後才出來的新語法，意味著在此之前都是只能用以下這些方式。

一般做法：

function past() {
  return ("過去做法");
}

console.log(past()); // 過去做法

匿名做法：

let past = function () {
  return ("過去做法");
};

console.log(past()); // 過去做法

es6之前只能用上面那兩種方式，之後多了一種箭頭函式可用。

而箭頭函式有點像是匿名的進階版：

let now = () => "箭頭函式做法";

console.log(now()); // 箭頭函式做法

省略了很多東西變成了匿名更短的版本，最主要的變化以上面那個例子來看：

1. 省略了function
2. 省略了大括號 {}
3. 省略了寫return

但其實不是每一次都可以省略那麼多，還是需要看狀況，以下就介紹箭頭函式的語法以及使用情境。

寫法注意事項

關於省略function的部分，只要用了=>，那就代表說function不用寫，目前還沒遇到非寫不可的狀況，假如直接多寫的話還會報錯。

let A = function() => "A"; // SyntaxError

而{}則是需要跟return綁在一起來做說明。

可以理解成，有return就一定要用{}，不能直接使用return，而單獨使用{}時，箭頭函式也不會自動幫忙return，這點要注意。

可以省略的情境是如果函數只有一個語句，而且只回傳一個值的時候，{}跟return就可以同時被省略，比如說像是這樣：

let A = () => {
  return "A";
};

console.log(A()); // A

可以變成這樣:

let A = () => "A";

console.log(A()); // A

省略時，不就代表沒有作用，會變成箭頭函式自動幫忙做，所以其實還是會有{}跟return的效果。

而帶參數的那個小括號其實也是可以被省略的。

省略的情境是只有一個參數時：

let A = (a) => a + 10;

console.log(A(5)); // A

只有一個參數的箭頭函式實際上就可以把那個小括號直接省略掉。

let A = a => a + 10;

console.log(A(5)); // A

但不是所有情況都可以省略小括號，當不只有一個參數，或是根本沒有參數的時候，小括號就沒有辦法去省略。

用法限制

箭頭函式雖然很方便，但還是有許多情境只能依靠傳統函式才能做到。

像是說在箭頭函式是沒有自己的this跟arguments跟super，因為沒有自己的this代表說需要去找它時，只能夠從外部去獲取。

而沒有自己的this也表示說，箭頭函式不能當作構造函式來用，也沒辦法使用new來調用它們，同時也不適用 call跟apply跟bind的方法。

所以還是可以用this，只是跟傳統函式不一樣，不是由呼叫的方式來綁定，所以this的方法沒辦法使用。

最後箭頭函式也無法作用於生成器函式使用(generator function)，不能使用yield這個關鍵字。

可以發現說箭頭函式雖然遠比傳統函式來得方便許多，但同樣限制也很多，不能在所有的情況下使用，所以假如有箭頭函式很方便，那就全部都用箭頭函式這種想法的話，是行不通的。

總結

透過箭頭函式的各種省略，可以使用更短的語法寫出一樣的效果，不只會讓整體的程式碼看起來很精簡，可讀性也會跟著增加，是我覺得好處多於壞處的一個語法，只是要注意有些情境沒辦法使用，總之建議適量的在程式碼中使用，讓程式碼便得簡潔乾淨吧！

reference

[1] MDN - Arrow function expressions