!function(a){ /* */ }(arg); と (function(a){ /* */ })(arg); の違いは？

Tweet

Category JavaScript 2017/11/30

問題

即座に関数実行しているのだと思いますが、以下の2種類見かけます。

何か違うのですか？

(function(a){
    //
})(arg); 

!function(a){
    //
}(arg);

答え

大きくは違わないです。

その場で実行するという点では同じです。

関数宣言（文）と関数式（式）があり、文の後に()をつけても実行できないので、どちらの方法も式にするため（実行可能な関数を返してもらうため）の書き方になります。

文は続けて書いても大丈夫。

function test1(a){ console.log(a); } function test2(b){ console.log(b); }

改行すればいつも通りの書き方。

function test1(a){ console.log(a); }
function test2(b){ console.log(b); }

以下のように書いた場合、

function test1(a){
    console.log(a);
}(1234)

以下のように書いたのと同じことで、

function test1(a){
    console.log(a);
}

(1234)

関数の宣言（文）の後に、(1234)という式が来たという状況になります。関数に1234という引数を渡して実行するという結果にはなりません。

文ではなく式として評価されたとき、function ～ は関数そのものを返します。

文ではなく式として評価させて、()の左側に実行可能な関数が欲しいのです。

式になりさえすればなんでもよいので、以下のように演算子をつけたり、代入したりするとうまくいきます。

var x = function test1(a){
    console.log(a);
}(1234)

!function test1(a){
    console.log(a);
}(1234)

+function test1(a){
    console.log(a);
}(1234)

(function test1(a){
    console.log(a);
})(1234)

! のほうが、()よりも1文字少ないというメリットはあります。

() のほうが、戻り値をそのまま受け取れます。! は戻り値が論理値に変換されてしまいます。