[JavaScript]複数ある関数の実行方法の使い分けに関して

Question

聞きたいこと

JavaScriptで関数を実行する際に下記のように2種類あるかと思いますが、使い分け等ありますでしょうか。

// 例1
// 関数定義をfunctionにて実施後、実行
function example1(param1) {
  console.log(param1);
}
example("Hello World");

// 例2
// 関数への参照値を変数exmaple2に代入後、実行
example2 = function(param2) {
  console.log(param2);
}
example2(param2);

Answer 1

違いが2つあります（コードで示します）。もっとも、素直に書いていればそう影響するようなものではありません。

function difference1(){
  // 違いその1：再代入ができるか
  function declare(){}
  var expression = function(){};
  
  expression = 5; // 単なる変数なので、もちろん代入可能
  // declare = 7; 関数宣言に代入はできない

  // なお、ES2015の「const」を使えば、変数も再代入不可能にできる
}

function difference2(){
  // 違いその2 巻き上げに関する挙動

  declare(); // 呼べる
  // expression(); 代入まではundefinedになっているので、呼べない

  function declare(){}
  var expression = function(){};
}

Answer 2

1と2は基本的には同じですが2はvarで宣言しないと
スコープ内で宣言してもグローバル関数になります

(function(){
function example1(param1) {
  console.log(param1);
}
example2 = function(param2) {
  console.log(param2);
}
console.log(example1);
console.log(example2);
})();
console.log(typeof example1);
console.log(typeof example2);

上記同じ動作にしたいなら
var example2=・・・ にするということ

Comments

[maisumakun]

もはやstrictなコードしか書かないので、暗黙のグローバル宣言のことをほぼ忘れてました。

Answer 3

細かい話になりますが、無名関数でFunction.nameが設定されるようになったのはES6からで、ブラウザ実装されたのも最近（Firefoxは2017年4月19日公開のバージョン53から）なので、互換性に注意が必要かもしれません。
Inferred function names