こちらの記事は以下の書籍を参考に執筆しました

入門JavaScriptプログラミング

アロー関数を使ってコードを簡潔にする

アローの構文は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は使えない

【javascript】アロー関数