関数どれ使う？JavaScript

JavaScriptには関数の定義方法がいくつかありますね。

関数宣言

kansuSengen.js

function echo() {
  console.log("hello");
}

echo(); // helloと出力される

一番ベターなやつです。これが書ければもう何も困ることはないかなと言う感じです。

関数式

kansuSiki.js

const echo = function () {
  console.log("hello");
};

echo(); // helloと出力される

関数宣言と同じ挙動をしますが、ちょっと長い記述になっています。

アロー関数

kansuSiki.js

const echo = () => {
  alert("hello");
};

echo(); // helloと出力される

簡単に言うと関数式の略版ですね！
今風でとてもかっこいいです。積極的にこれを使いましょう。
違いもありますが、当記事では(関数式 = アロー関数)としておきます。

関数宣言と関数式はどっちを使うのが良いのか？

僕的には、どれでも良いと思います。プロジェクトのコーディング規約に従えば良い。
関数定義法の細かい仕様を考えだすとめんどくさそうなので、少しだけ説明します。

関数宣言には巻き上げがある

kansuSengen.js

echo(); // helloと出力される

function echo() { // 呼び出しより後の記述だが実行できる。
  console.log("hello");
}

このコードは正常に実行されます。呼び出しより後に宣言されているのに。
これが巻き上げというものです。
プログラムは基本上から下に実行されますが、宣言は実行時に全て上に移動します。
※変数宣言も同様です。(変数の場合、宣言のみで初期化はされない)

関数式は巻き上げがない

kansuSiki.js

echo(); // 呼び出しより後に定義されている為エラーとなり、出力出来ない。

const echo = function () {
  console.log("hello");
};

これは実行出来ません。なぜなら巻き上げられるのは宣言のみだからです。

const echo

のみが巻き上げられ、echo( )時点では処理の代入がされていないのです。
じゃあ記述場所を問わない関数宣言の方が良さそう！と思いますが、大体はこんな処理が一般的な気がします。

kansuSiki.js

window.addEventListener('load', function () {
  echo(); // helloと出力される。
});

const echo = function () { 
  console.log("hello");
};

これは画面表示されたタイミングでecho( )を呼んでいる単純なプログラムです。
そもそもスコープが違うので実行出来ます。やっぱり関数宣言、関数式(アロー関数)どちらでも良さそうですね。スコープについても少しだけ触れます。

グローバルスコープとローカルスコープ

変数の参照範囲はどのプログラム言語でもあります。

グローバルスコープ

• トップレベル（関数の外）に記述されている変数や関数はグローバルスコープとなる。
• ここに宣言されている変数はプログラム中のどこからでも参照可能。（ただし、同じグローバルスコープ内では記述順によっては先ほどの関数式の例のようにエラーとなる）
• varで宣言した場合、グローバル変数となる。

補足

グローバル変数とは

プログラム中のどこからでも参照する事が出来る変数の事です。
例えば、HTML要素を取得するときにdocument.get〜みたいに書くと思います。
このdocumentもグローバル変数の1つなのです。ちなみに、letやconstで定義した場合グローバルスコープにはなりますが、グローバル変数にはなりません。

ローカルスコープ

ローカルスコープには関数スコープとブロックスコープというものがあります。

関数スコープ

• 関数内に宣言された変数は、その関数内でのみ参照可能。

ブロックスコープ

• ブロック内に宣言された変数は、そのブロック内のみ参照可能
  ※ブロックスコープが適用されるのはlet、constで宣言されたもの

結局どれ使うか

やっぱり自分の書きやすい方法で良いと思います。
注意点があるとすれば、関数宣言は上書きされます。

kansuSengen.js

window.addEventListener('load', function () {
  echo(); // おはようと出力される。
});

function echo() {
  console.log("hello");
}

function echo() { // こっちが勝つ！！
  console.log("おはよう");
}

javaみたいにエラーなんて出してくれません。
当たり前ですが、関数式をvarで定義した場合も上書きされます。

kansuSiki.js

window.addEventListener('load', function () {
  echo(); // おはようと出力される。
});

var echo = function () {
  console.log("hello");
};

var echo = function () { // こっちが勝つ！！
  console.log("おはよう");
};

varは再代入、再定義が可能なので関数式使うのであればconstが無難かと思います。
つまり同じ関数名をつけなければどちらでも良いですね。
結論、好きな方、プロジェクトに添った方を使用しましょう。