6498


以下のJavaScriptの関数の実行方法はどういった違いがあるのでしょうか？実行結果は同じなのでそれぞれどういった場合に使うのかについての答えが得られれば幸いです。

Case 1:

[code]

    !function(a){
        alert(a);
    }("Hello World");
    
[/code]

Case 2:

[code]

    (function(a){
        alert(a);
    })("Hello World");
    
[/code]

挙動が同じかどうかについて確認するために jsfiddle のリンクを張っておきます。 `alert()`
部分はコメントアウトしてあるので実行する際にコメントを外してください。

[code]

    (function test(a) {
      //alert(a);
    })("test1");
    
    ! function(a) {
      //alert(a);
    }('test2')
[/code]


CC BY-SA 4.0
2015-02-14T20:14:52.553
6496
2019-12-13T18:36:45.363
2019-12-13T18:36:45.363
32986
556
question
javascript
!function(a){ // }("hoge"); と ( function(a){ // })("hoge"); の違いは？


一時的な関数を即呼び出して実行するという意味で違いはないです。（！を使う方が１文字少ない）  
関数が返値を持つ場合は！の方は論理値になってしまうという違いがあります。


CC BY-SA 3.0
2015-02-14T20:53:20.240
6497
2015-02-14T20:53:20.240
5044
6496
answer


まずこれらをつけている意味を説明します。  
`function(args){ /**/ }()`としたとき、`()`の左側は呼び出し可能なものでなくてはいけませんが、`function(args){
/**/ }` は文なので呼び出せません。

以下の様な処理があったとして

[code]

    function test(a){ console.log(a); } function test2(b){ console.log(b); }
    
[/code]

これは

[code]

    function test(a){ console.log(a); }
    function test2(b){ console.log(b); }
    
[/code]

と同じだというのはいいでしょうか。`funciton 名前 ～`の文は、ブロックの終わり `}` で完結します。`}`の後でセミコロンもいらないですよね？

同じ様に以下の様に書いた場合

[code]

    function test(a){
        console.log(a);
    }(1234)
    
[/code]

これはつまり

[code]

    function test(a){
        console.log(a);
    }
    
    (1234)
    
[/code]

こう書いているのと変わりありません。こう見ると関数呼び出されないですよね？  
関数testが定義され、1234が評価されておしまいです。

さらに

[code]

    function (a){
        console.log(a);
    }
    
    (1234)
    
[/code]

は、関数に名前をつけ忘れてる（または名前が来るべきところに括弧が来たなど）と判断されます。この状態であればそう見えませんか？

一方、以下の二つの結果はfunctionが出力されます。

[code]

    console.log(function (a){
        //
    });
    
    console.log(function test(a){
        //
    });
    
[/code]

文では無く式として評価された場合、これらは関数そのものを返します。  
これを利用して括弧をつけることで、文で終わらせずに式として評価させています。式の結果として関数が返り、これによって呼び出し可能な左側が手に入れることができます。

頭に`!`をつけるのも理由としては同じです。式にしたいのです。`+`でも動きます（前の行の終わり方によっては影響でるかもしれませんが）、あとは以下の様に代入でも式になるので上手くいきます。

[code]

    var x = function test(a){
        console.log(a);
    }(1234)
    
    var y = function (a){
        console.log(a);
    }(1234)
    
[/code]

`!`をつければ実際には not演算が発生するという違いがあるものの、即時で使う場合であれば戻り値は使いませんので問題ないという事になります。  
（後で変数に結果を持たせたくなった場合などには 頭の `!` を取り忘れないよう気を付ける必要があります。）


CC BY-SA 3.0
2015-02-14T20:58:14.403
6498
2015-02-15T03:25:40.753
2015-02-15T03:25:40.753
728
728
6496
answer