JS/ES – 関数式／無名関数／即時関数

関数式～関数の変数への代入

ユーザー定義関数はfunctionキーワードの後に関数名を指定して関数を定義し、その関数名で関数を呼び出して実行した。

これに対して、関数を変数に代入して、その変数名を用いて関数を実行することができる（関数式：function formula）。

func1 = function user_defined() {
  console.log('named function!');
}

func1();

// named function!

func1 = function user_defined() {

console.log('named function!');

}

func1();

// named function!

このような使い方で、関数名自体を指定せずに関数の実体を変数に代入することもできる。

func2 = function () {
  console.log('anonymus function!');
}

func2();

// anonymous function!

func2 = function () {

console.log('anonymus function!');

}

func2();

// anonymous function!

このように名前を持たない関数を無名関数／匿名関数(anonymous function)と呼んでいる。

このような無名関数を変数に与える関数式は、メソッドや関数の引数に関数を与えることが想定されている場合に用いる。たとえばDOMに対するイベントリスナーの登録や、配列オブジェクトのreduce()メソッドに合計を計算するためのreducerを与える例など、その活用場面は多い。

array = [1, 2, 3, 4, 5];
sum = function (accumulator, current_value) {
  return accumulator + current_value;
}
console.log(array.reduce(sum));

// 15

array = [1, 2, 3, 4, 5];

sum = function (accumulator, current_value) {

return accumulator + current_value;

}

console.log(array.reduce(sum));

// 15

さらに、関数の変数への代入自体も省いて、無名関数のまま実行させてしまう書き方を即時関数(immediately-invoked function express: IIFE)と呼んでいる。

(function () {
  console.log('immediately-invoked!')
})()

// immediately-invoked!

(function () {

console.log('immediately-invoked!')

})()

// immediately-invoked!

この記法は、varによる変数定義が関数スコープであることを利用して、変数の汚染を防ぐために使われる。

ES6以降導入されたブロックスコープより前にはグローバルスコープと関数スコープしかなかったため、必要なコード全体をIIFEの中に納めて、そのスコープ外の変数と独立させようという考え。