[解決済み] なぜ、同じ行で無名関数を呼び出す必要があるのですか？

質問

クロージャの記事を読んでいて、あちこちで見かけたのですが、明確な仕組みの説明がなく、毎回「使ってください」と言われるだけなのですが・・・。

// Create a new anonymous function, to use as a wrapper
(function(){
    // The variable that would, normally, be global
    var msg = "Thanks for visiting!";

    // Binding a new function to a global object
    window.onunload = function(){
        // Which uses the 'hidden' variable
        alert( msg );
    };
// Close off the anonymous function and execute it
})();

なるほど、新しい無名関数を作って、それを実行するんですね。つまり、この単純なコードはその後で動作するはずです（実際動作しています）。

(function (msg){alert(msg)})('SO');

質問は、ここでどのようなマジックが起こるのか、ということです。書いていてそう思いました。

(function (msg){alert(msg)})

のように、新しい無名関数が作成されます。

しかし、なぜうまくいかないのでしょうか？

(function (msg){alert(msg)});
('SO');

なぜ同じ行にする必要があるのですか？

いくつかの書き込みを紹介するか、解説をお願いします。

どのように解決するのですか？

関数定義の後のセミコロンを削除してください。

(function (msg){alert(msg)})
('SO');

上記で動作するはずです。

DEMOページです。 https://jsfiddle.net/e7ooeq6m/

このようなパターンについては、こちらの記事で解説しています。

jQueryと$に関する質問

EDITです。

を見ると ECMAスクリプト仕様 関数を定義するには、3つの方法があります。(98ページ、13節 Function Definition)

1. 関数コンストラクタの使用

var sum = new Function('a','b', 'return a + b;');
alert(sum(10, 20)); //alerts 30

2. Function 宣言の使用。

function sum(a, b)
{
    return a + b;
}

alert(sum(10, 10)); //Alerts 20;

3. 関数式

var sum = function(a, b) { return a + b; }

alert(sum(5, 5)); // alerts 10

では、宣言と表現はどう違うのかというと、そうでもない。

ECMA Script仕様より。

関数宣言(FunctionDeclaration) : function Identifier ( FormalParameterListopt ){ FunctionBody }

関数式: function Identifieropt ( FormalParameterListopt ){ FunctionBody }

お気づきのように、'identifier' は 任意 を関数表現に使用します。そして、識別子を与えない場合は、無名関数を作成することになります。識別子を指定できないわけではありません。

これは、以下が有効であることを意味します。

var sum = function mySum(a, b) { return a + b; }

注意すべき重要な点は、'mySum'はmySum関数本体の内部でのみ使用可能で、外部では使用できないということです。次の例を参照してください。

var test1 = function test2() { alert(typeof test2); }

alert(typeof(test2)); //alerts 'undefined', surprise! 

test1(); //alerts 'function' because test2 is a function.

ライブデモ

比較する

 function test1() { alert(typeof test1) };

 alert(typeof test1); //alerts 'function'

 test1(); //alerts 'function'

この知識を持って、あなたのコードを解析してみましょう。

のようなコードがあったとき。

    function(msg) { alert(msg); }

関数式を作りましたね。そして、この関数式を括弧でくくることで、実行することができます。

    (function(msg) { alert(msg); })('SO'); //alerts SO.