JavaScript アロー関数

株式会社リュディアです。今日は JavaScript のアロー関数についてまとめてます。掲載するソースコードはすべて GAS の開発環境で動作確認をしています。

まず JavaScript の通常の関数定義例を示します。和を返す関数を例としました。

function add1( a, b ) {
  return a + b ;
}

let add2 = function( a, b ) {
  return a + b ;
}

function main() {
  const a = 4 ;
  const b = 3 ;
  console.log( add1( a, b ) ) ;
  console.log( add2( a, b ) ) ;
}

// 実行結果
// 7
// 7

​add1, add2 とも2つの引数 a, b をとり、その和を戻り値とします。次にこれをアロー関数で書いてみます。

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

function main() {
  const a = 4 ;
  const b = 3 ;
  console.log( add3( a, b ) ) ;
}

// 実行結果
// 7

add2 と add3 を比較して通常関数とアロー関数で何が異なるのか見てみましょう。

let add2 = function( a, b )   { return a + b ;}
let add3 =         ( a, b ) => a + b ;

見てわかるように以下の違いがありますね。ここでは { } の有り無しは無視してください。

1. アロー関数では "function" を省略可能
2. アロー関数では "return" を省略可能
3. アロー関数では => (矢印(アロー))が追加で必要

またここまでの例は関数本体が1文で構成されていますが、{ } で囲むことで複数行のアロー関数も記述可能です。

let add3 = ( a, b ) => {
  const c = a + b ;
  return c ;
};

function main() {
  const a = 4 ;
  const b = 3 ;
  console.log( add3( a, b ) ) ;
}

// 実行結果
// 7

アロー関数の記述方法についてまとめてみました。JavaScriptのプログラミングですべての関数をアロー関数で記述する必要はないですが、簡単な関数はアロー関数で記述した方が見た目もシンプルになると思います。

最後に通常関数とアロー関数の違いは見た目だけでなく動作にもあります。しかし普通のJavaScript プログラミングをしている分には意識しなくてよいと思います。興味のある方はどの this オブジェクトに縛られる（バインド）か、というテーマでWEB上で検索してみてください。

では、ごきげんよう。