質問: (data) => { // データ処理 }; ``` ### 質問 アロー関数が使えるぐらいモダンな javascript において、グローバル関数はどのように記述されるのが一般的ですか? * すべてアロー? * すべて function? * どちらでも変わらないので、規約でいずれかに寄せる?
回答: グローバルに直接関数を定義するのは今も昔も極力使用しないのが通例です。 node.jsでの`require`やES6からの`import`等と、モジュール化の話となり、質問の関数定義の方法と違いについてから乖離する為、関数定義の方法と違いについて記述します。 結論としてはarrow functionが使える場合は、arrow functionのほうが好ましい場合が多いです。これはES6の`class`と`function prototype`の関係と似ており、一般的には一部制限はあるもののよりモダンに記述出来るようになっている為です。 もう少し詳しい説明として、ご質問に記述された関数定義について説明すると、そもそもの部分として ``` const dataCrunching = (data) => {}; ``` に対応するfunction定義は ``` const dataCruncing = function(data){}; ``` で、これら共に無名関数(Anonymous Function)と呼ばれます。 ``` function dataCruncing(data){} ``` は名前付き関数(Named Function)と呼ばれるもので、定義が評価(処理)されるタイミングが無名関数とは異なります。 この周りの定義についてはES6/ES2015で大きく変わっているのでざっくりとした説明となりますが、JavaScriptはランタイム時に実行する処理ブロック(グローバル又は関数ブロック)内にあるfunctionを探し、定義してからステップ・バイ・ステップで上から順に処理をしていきます。 ですので ``` foo(); function foo(){console.log("abc")} ``` は名前付き関数として処理を1行ずつの処理を始める前に`foo`が定義されている為、呼び出し可能ですが、 ``` foo(); const foo = () => console.log("abc") ``` は`foo()`処理時点で変数fooへのfunctionの代入が行われていない為、実行出来ません。 尚、実行速度の面ではarrow function含めてどれにおいても殆ど差はありません。参考URL arrow functionについては1点大きくfunctionと相違する点があり、Javascriptの`function`は呼び出し元や定義場所によってfunction毎に`this`を定義しており、その多様なthisの種類と条件から多くの場合トラブルの元となっていましたが、arrow functionは定義された場所のthisをそのまま受け継ぐ(thisを束縛しない)ようになっています。 その他の点については概ね同様と考えて問題ありませんが、この`this`の扱いの違いから、現在では制限がない限りarrow functionで記述されるパターンが増えています。