JavaScriptのアロー関数に関してざっくりまとめる

アロー関数の勘所に関して再確認も含めてメモ

基本の文法

即時returnのアロー関数

before

x = function(z){
  return z + 100;
}
console.log(x(20))

after

x = (z) => z + 100
console.log(x(20))

複数処理をする場合のアロー関数

returnをしっかり明示する必要がある

before

test = function(z){
  let x = z + 100
  return `${x}が結果です`
}
console.log(test(29))

after

arrowTest = (z) => {
  let x = z + 100
  return `${x}が結果です`
}
console.log(arrowTest(29))

オブジェクトを返すアロー関数

{}で返すと従来記法と区別がつかないので ()で囲む

before

test = function(z){
  return {"input": z, "result": z + 100}
}
console.log(test(29))

after

arrowTest = (z) => ({"input": z, "result": z + 100})
console.log(arrowTest(29))

スコープに関して

アロー関数はthisのスコープが異なる

従来の関数式の形式で書くとスコープがしっかり定義されるが、アロー関数はスコープが異なる。以下例

通常の関数式の場合

this.target = 20
const testObject = {
  "target": 100,
  "calc": function(z) { return `${z + this.target}が結果です`}
  
}
console.log(testObject.calc(10))

この場合this.targetはtestObject.targetになるので以下のような結果になる

"110が結果です"

アロー関数の場合

this.target = 20
const testArrowObject = {
  "target": 100,
  "calc": (z) => `${z + this.target}が結果です`
  
}
console.log(testArrowObject.calc(10))

この場合、グローバルのthisを参照するため結果は以下のようになる

"30が結果です"

参考リンク

• アロー関数式 - JavaScript | MDN

Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス