まずこれらをつけている意味を説明します。
function(args){ /**/ }()
としたとき、()
の左側は呼び出し可能なものでなくてはいけませんが、function(args){ /**/ }
は文なので呼び出せません。
以下の様な処理があったとして
function test(a){ console.log(a); } function test2(b){ console.log(b); }
これは
function test(a){ console.log(a); }
function test2(b){ console.log(b); }
と同じだというのはいいでしょうか。funciton 名前 ~
の文は、ブロックの終わり }
で完結します。}
の後でセミコロンもいらないですよね?
同じ様に以下の様に書いた場合
function test(a){
console.log(a);
}(1234)
これはつまり
function test(a){
console.log(a);
}
(1234)
こう書いているのと変わりありません。こう見ると関数呼び出されないですよね?
関数testが定義され、1234が評価されておしまいです。
さらに
function (a){
console.log(a);
}
(1234)
は、関数に名前をつけ忘れてる(または名前が来るべきところに括弧が来たなど)と判断されます。この状態であればそう見えませんか?
一方、以下の二つの結果はfunctionが出力されます。
console.log(function (a){
//
});
console.log(function test(a){
//
});
文では無く式として評価された場合、これらは関数そのものを返します。
これを利用して括弧をつけることで、文で終わらせずに式として評価させています。式の結果として関数が返り、これによって呼び出し可能な左側が手に入れることができます。
頭に!
をつけるのも理由としては同じです。式にしたいのです。+
でも動きます(前の行の終わり方によっては影響でるかもしれませんが)、あとは以下の様に代入でも式になるので上手くいきます。
var x = function test(a){
console.log(a);
}(1234)
var y = function (a){
console.log(a);
}(1234)
!
をつければ実際には not演算が発生するという違いがあるものの、即時で使う場合であれば戻り値は使いませんので問題ないという事になります。
(後で変数に結果を持たせたくなった場合などには 頭の !
を取り忘れないよう気を付ける必要があります。)