こちらの記事は以下の書籍を参考に執筆しました
#アロー関数を使ってコードを簡潔にする
アローの構文は2つに分かれる。
###パラメータと関数本体の式が1つずつの場合
<単一のパラメータ>=><return 式>
###パラメータが1つではない場合(ないか、2つ以上の場合)
()をつける
const double = x => x + x;
const add = (a, b) => a + b;
const rand = () => Math.random();
単一パラメータを()で囲んでもよい
レストパラメータと分割されたパラメータボぼの場合は()で囲む
const rest = (...args) => console.log(args) //正しい構文
const rest = ...args => console.log(args) //構文エラー
const destruct = ([first]) => first //正しい構文
const destruct = [first] => first //構文エラー
関数本体に四季が2つ以上含まれる場合は関数本体を波括弧で囲む。
const d=(a,b)=>{
task();
list();
}
###アロー関数が簡潔になるケース
関数から別の関数を返さなければいけないとき。
下の関数は数字を1つ渡すと別の関数が返され、返された関数は指定された奇数にべき乗を適用する。
const exponent = exp => base => base ** exp;
const square = exponent(2)
const cube = exponent(3)
const power0f4 = exponent(4)
console.log(square(5))//25
console.log(cube(5))//235
console.log(power0f4(5))//635
**は1つ目のオペランド2つ目のオペランドでべき乗する。
これのES5の場合
var exponent = function(exp) {
return function(base) {
return Math, pow(nase, exp)
}
}
次の総和関数も書き換えることができる。
const sum = function(...argd) {
return args.reduce(function(a, b) {
return a + b;
});
}
こうなる
const sum = (...args) => args.reduce((a, b) => a + b)
###reduce
構文
arr.reduce(callback( accumulator, currentValue[, index[, array]] )[, initialValue])
####callback
配列のすべての要素に実行される。4つの引数を取る。
| 引数番号 | 引数 | 説明 |
|---|---|---|
| 第1 | accumulator | コールバックの前回呼び出しで返された値 |
| 第2 | currentValue | 現在処理中の要素 |
| 第3 | index(optional) | 現在処理中のインデックス |
| 第4 | array(optional) | reduce()が呼び出された配列 |
####initialValue
コールバックの最初の呼び出しの最初の引数として使用する値。
####返り値
1つ値
#アロー関数の注意点
アロー関数は常に関数式であり、関数定義ではない。
// 関数定義
function double(number) {
return number * 2
}
//関数式
const double = functin(number) {
return number * 2
}
//アロー関数(関数式に相当)
const double = number => number * 2;
つまり、アロー関数を関数定義のように巻き上げることはできない
また、アロー関数からオブジェクトリテラルを暗黙的に返そうとした場合困る。
const getSize=()=>{weight:50,height:50}//syntaxError
アロー関数の=>に続いて{}が存在する場合、それらの波括弧は常に関数本体の開始と終了であるとみなされる。
これは()で囲めばいい
const getSize=()=>({weight:50,height:50})//動く
最後にアロー関数のコンテキストにbind,call,applyは使えない