アロー関数の使い方をまとめていく

不慣れなSEだとはてながいっぱいになるので使い方をまとめていこうと思いました。

基本形

javascript アロー関数使う前

testMethod() {
  const returnV = function(a, b) {
    return a * b
  }
  const result = returnV(3, 2)
  console.log(result)
}

言うまでもなくコンソールには6が返ってきます。

javascript アロー関数変換後

testMethod() {
  const returnV = (a, b) => {
    return a * b
  }
  const result = returnV(3, 2)
  console.log(result)
}

javascript 戻り処理のみなら更に省略

testMethod() {
  const returnV = (a, b) =>  a * b
  const result = returnV(3, 2)
  console.log(result)
}

この辺りまでは普通にたどり着けるんですよ。むしろこんな処理はあまり書かない。
これにawait,async,map等組み合わさると何書いてるんだってなるわけで。
基礎がない人にとっては混乱の種です。

Map関数

変換前

testMethod() {
  const arrays = [10, 20, 30]
  const returnV = arrays.map(function(arrayValue) {
    return arrayValue * 2
  }) 
  console.log(returnV)
},

戻り値は[20, 40, 60]。

変換後

testMethod() {
  const arrays = [10, 20, 30]
  const returnV = arrays.map((arrayValue) => arrayValue * 2) 
  console.log(returnV)
},

ここらへんも理解はしやすかった、というかfunctionって書いてれば省略できるんだなって分かりますね。
逆変換のが分かりづらい気がしました。

forEach関数

forEachは戻り値がないので別配列へ代入

変換前

testMethod() {
  const arrays = [10, 20, 30]
  const returnV = []
  arrays.forEach(function(arrayValue) {
    returnV.push(arrayValue * 2)
  })
  console.log(returnV)
},

VSCodeが気を利かせてアロー関数に勝手に変換してしまうわけですが無理やりfunction使ってます。

変換後

testMethod() {
  const arrays = [10, 20, 30]
  const returnV = []
  arrays.forEach(arrayValue => {
    returnV.push(arrayValue * 2)
  })
  console.log(returnV)
},

filter関数

変換前

testMethod() {
  const arrays = [10, 20, 30]
  const returnV = arrays.filter(function(value) {
    return value >= 20
  }) 
  console.log(returnV)
},

戻り値は[20, 30]。

変換後

testMethod() {
  const arrays = [10, 20, 30]
  const returnV = arrays.filter(value => value >= 20)
  console.log(returnV)
},

20以上っていう値を返す関数にしてしまった手前一瞬何書いているのか分からなくなりました。

長くなったので一旦ここまで。
await、asyncはまた別の記事で。