48300


javascript を記述していく中で、自分の遥か昔の知識だと、(モジュールの)トップレベルの関数はこう記述します。

[code]

    function dataCruncing(data) {
       // データ処理
    }
    
[/code]

最近の javascript では、おそらく、こうも記述できるようだと思っています。

[code]

    const dataCrunching = (data) => {
      // データ処理
    };
    
[/code]

### 質問

アロー関数が使えるぐらいモダンな javascript において、グローバル関数はどのように記述されるのが一般的ですか?

  * すべてアロー?
  * すべて function?
  * どちらでも変わらないので、規約でいずれかに寄せる?


CC BY-SA 4.0
2018-08-25T09:14:41.887
47804
2018-09-12T03:41:01.773
754
question
javascript node.js
javascript の function とアローについて


会社や案件のコーディング規約で決まっていない限り好みによるのかなぁと思います。  
自分はthisの値を保証というかあまり意識しなくてすむようにするために（<https://qiita.com/shibukawa/items/19ab5c381bbb2e09d0d9>）こちらの記事を参考にならって、全てアローに統一しております。


CC BY-SA 4.0
2018-08-25T14:31:03.753
47809
2018-08-25T14:42:15.807
2018-08-25T14:42:15.807
29854
29854
47804
answer


グローバルに直接関数を定義するのは今も昔も極力使用しないのが通例です。  
node.jsでの`require`やES6からの`import`等と、モジュール化の話となり、質問の関数定義の方法と違いについてから乖離する為、関数定義の方法と違いについて記述します。  
結論としてはarrow functionが使える場合は、arrow
functionのほうが好ましい場合が多いです。これはES6の`class`と`function
prototype`の関係と似ており、一般的には一部制限はあるもののよりモダンに記述出来るようになっている為です。

もう少し詳しい説明として、ご質問に記述された関数定義について説明すると、そもそもの部分として

[code]

    const dataCrunching = (data) => {};
    
[/code]

に対応するfunction定義は

[code]

    const dataCruncing = function(data){};
    
[/code]

で、これら共に無名関数(Anonymous Function)と呼ばれます。

[code]

    function dataCruncing(data){}
    
[/code]

は名前付き関数(Named Function)と呼ばれるもので、定義が評価（処理）されるタイミングが無名関数とは異なります。  
この周りの定義についてはES6/ES2015で大きく変わっているのでざっくりとした説明となりますが、JavaScriptはランタイム時に実行する処理ブロック(グローバル又は関数ブロック)内にあるfunctionを探し、定義してからステップ・バイ・ステップで上から順に処理をしていきます。  
ですので

[code]

    foo();
    function foo(){console.log("abc")}
    
[/code]

は名前付き関数として処理を1行ずつの処理を始める前に`foo`が定義されている為、呼び出し可能ですが、

[code]

    foo();
    const foo = () => console.log("abc")
    
[/code]

は`foo()`処理時点で変数fooへのfunctionの代入が行われていない為、実行出来ません。  
尚、実行速度の面ではarrow function含めてどれにおいても殆ど差はありません。[参考URL](https://jsperf.com/named-
or-anonymous-functions/44)

arrow
functionについては1点大きくfunctionと相違する点があり、Javascriptの`function`は呼び出し元や定義場所によってfunction毎に`this`を定義しており、その多様なthisの種類と条件から多くの場合トラブルの元となっていましたが、arrow
functionは定義された場所のthisをそのまま受け継ぐ(thisを束縛しない)ようになっています。  
その他の点については概ね同様と考えて問題ありませんが、この`this`の扱いの違いから、現在では制限がない限りarrow
functionで記述されるパターンが増えています。


CC BY-SA 4.0
2018-09-12T03:41:01.773
48300
2018-09-12T03:41:01.773
30068
47804
answer