JavaScript &#8211; 無名関数について説明してみる

JavaScriptでしばしば見かける
function( ){・・・処理・・・}
というコード。
関数には当然名前はあると思っている方には、理解不明なコードに見えます。
実は、これは「無名関数」と呼びます。
これを理解するために、JavaScriptの関数定義の方法について考えてみます。

まずは普通のやり方

<script>

// 関数定義
function printfunc(){ alert("hello world!"); }

// 関数実行　("hello world!"と表示される)
printfunc();

</script>

// 関数定義

function printfunc(){ alert("hello world!"); }

// 関数実行　("hello world!"と表示される)

printfunc();

</script>

では、無名関数を使ったやり方

<script>

// 関数定義
var printfunc = function (){ alert("hello world!"); }

// 関数実行　("hello world!"と表示される)
printfunc();

</script>

// 関数定義

var printfunc = function (){ alert("hello world!"); }

// 関数実行　("hello world!"と表示される)

printfunc();

</script>

無名関数にて処理を記述して、printfuncという変数に代入しています。
このときprintfuncは関数と同様の動きをします。当然、括弧「()」を付けると処理が実行されます。

では、printfuncの中身である「function (){ alert(“hello world!”); }」に括弧「()」を付けるとどうなるか？　実はこれも同じ動きをします。

<script>

// 関数定義＆実行　("hello world!"と表示される)
(function (){ alert("hello world!"); })();

</script>

// 関数定義＆実行　("hello world!"と表示される)

(function (){ alert("hello world!"); })();

</script>

function (){..}は括弧「()」で囲まれていますが、これはfunction (){..}を式として評価されるようにするために必要です。
※式とはそれ自身が「値を持つもの」「値を返すもの」「値を変数に代入するもの」と考えておけば良いかと。
例)100、1+1、x = 100、y = a + b
ということで、無名関数を使った構文「(function (){..}) ();」を使うとわざわざ関数を定義しなくても実行が可能となります。