JSの即時関数実行式において，()の位置が変わると挙動にどう影響するか．

[code]

    (function() { return; }());
    (function() { return; })();
    
[/code]

[JavaScript: The Definitive Guide, 7th
Edition](https://www.oreilly.com/library/view/javascript-the-
definitive/9781491952016/)に，IIFEの例として前者のコードが挙げられていました(簡略化しております)．

しかしながら，[JavaScriptのIIFEを使うユースケース -
Qiita](https://qiita.com/snamiki1212/items/37152d0066c57eb60796#%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E9%A0%98%E5%9F%9F%E3%82%92%E6%B1%9A%E3%81%97%E3%81%9F%E3%81%8F%E3%81%AA%E3%81%84%E3%82%B1%E3%83%BC%E3%82%B9)や，[JavascriptのIIFEについて考える
-
torikatsu.dev](https://torikatsu923.hatenablog.com/entry/2020/11/19/224003)等では，後者のような記述がされています．

これらの記述方法に何か違いはありますか．




[What is the (function() { } )() construct in JavaScript? - Stack
Overflow](https://stackoverflow.com/questions/8228281/what-is-the-function-
construct-in-javascript#comment10893497_8228281) からリンクされている[Immediately-
Invoked Function Expression
(IIFE)](https://benalman.com/news/2010/11/immediately-invoked-function-
expression/)
というアーティクルや、[Wikipedia](https://en.wikipedia.org/wiki/Immediately_invoked_function_expression)の解説及び参照リンク先が参考になるのでは、と思いました。

上記リンク先を見ていただくのが正確かと思いますが、私の理解を以下に記載してみます。

関数を即時実行しているわかりやすい例として次のようなものが挙げられます:  

[code]

    var i = function(){ return 10; }();
    console.log(i)
[/code]

ここで、戻り値が不要なので代入を省略して次のように書こう、とするとシンタックスエラーになります:  

[code]

    function(){ return 10; }();
[/code]

これは、`function`キーワードが最初の例では[関数式](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/function)とみなされますが、次の例では[関数宣言](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/function)とみなされてしまっているためです。  
関数式とみなされるようにするためには(冒頭リンク先にある通り)いくつか方法がありますが、典型的なものとしては、最初の例の右辺全体をカッコで囲ってしまう方法

[code]

    // var i = (function(){ return 10; }());
    // 戻り値は不要なので
    (function(){ return 10; }());
[/code]

の他、関数式の部分だけカッコで囲っても問題を回避できます。

[code]

    (function(){ return 10; })();
[/code]

つまり、質問の回答としては **違いは無い** 、ということになります。

* * *

(追記)  
書籍 [JavaScriptテクニックバイブル](https://gihyo.jp/book/2012/978-4-7741-5243-1) ではまさに
"「(function(){}())」と「(function(){})()」の違い" というセクションがありました(p.142, 4-12
グローバルスコープの汚染を防ぐ)。

ここでは前者は1段階の実行

>   * 式としての「function(){}」を "Function Calls" で呼び出し、 "The Group Operator"
> によって評価した値を返す
>

、後者は2段階の実行

>   * "The Grouping Operator" で「function(){}」を式として認識させ、
>   * "Function Calls" でその評価結果である関数を実行する
>

であると説明し、このため極わずかだが前者の方が実行コストは低い、としています。  
(ただ、本当に差異があるとして、一般的にそれを理由として "The Grouping Operator"
の使用を避けるような方針は採らないのでは、と個人的には考えます)

また、[JSLint](https://www.jslint.com/) は `(function(){})()`
の書式に対して警告を出す([参考](http://linterrors.com/js/do-not-wrap-function-literals-in-
parens))ということも同節で触れられていました。

* * *

どちらの書き方が望ましいか、という点については、2010年に書かれた[こちらの記事](https://benalman.com/news/2010/11/immediately-
invoked-function-expression/#iife)では

>
[code]

>       (function(){ /* code */ }()); // Crockford recommends this one
>       (function(){ /* code */ })(); // But this one works just as well
>  
[/code]

とありますが(*1)、WikipediaからリンクされているES6時代に書かれた[こちらの記事](https://exploringjs.com/es6/ch_arrow-
functions.html#_parenthesizing-arrow-function-with-block-bodies)では

> (前略)
[code]

>     (function () {
>         ···
>     }());
>  
[/code]

>
> Or just around the function expression:
[code]

>     (function () {
>         ···
>     })();
>  
[/code]

>
> Given how arrow functions work, the latter way of parenthesizing should be
> preferred from now on.

とあります。

*1) おそらく Douglas Crockford 氏の著書 [JavaScript: The Good Parts](https://www.oreilly.co.jp/books/9784873113913/) にそういう記述があるのではないかなと想像します([参考](https://www.publickey1.jp/blog/13/javascript_douglas_crockfordqcon_tokyo_2013_1.html))。




[What is the (function() { } )() construct in JavaScript? - Stack
Overflow](https://stackoverflow.com/questions/8228281/what-is-the-function-
construct-in-javascript#comment10893497_8228281) からリンクされている[Immediately-
Invoked Function Expression
(IIFE)](https://benalman.com/news/2010/11/immediately-invoked-function-
expression/)
というアーティクルや、[Wikipedia](https://en.wikipedia.org/wiki/Immediately_invoked_function_expression)の解説及び参照リンク先が参考になるのでは、と思いました。

上記リンク先を見ていただくのが正確かと思いますが、私の理解を以下に記載してみます。

関数を即時実行しているわかりやすい例として次のようなものが挙げられます:  

[code]

    var i = function(){ return 10; }();
    console.log(i)
[/code]

ここで、戻り値が不要なので代入を省略して次のように書こう、とするとシンタックスエラーになります:  

[code]

    function(){ return 10; }();
[/code]

これは、`function`キーワードが最初の例では[関数式](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/function)とみなされますが、次の例では[関数宣言](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/function)とみなされてしまっているためです。  
関数式とみなされるようにするためには(冒頭リンク先にある通り)いくつか方法がありますが、典型的なものとしては、最初の例の右辺全体をカッコで囲ってしまう方法

[code]

    // var i = (function(){ return 10; }());
    // 戻り値は不要なので
    (function(){ return 10; }());
[/code]

の他、関数式の部分だけカッコで囲っても問題を回避できます。

[code]

    (function(){ return 10; })();
[/code]

つまり、質問の回答としては **違いは無い** 、ということになります。

* * *

(追記)  
書籍 [JavaScriptテクニックバイブル](https://gihyo.jp/book/2012/978-4-7741-5243-1) ではまさに
"「(function(){}())」と「(function(){})()」の違い" というセクションがありました(p.142, 4-12
グローバルスコープの汚染を防ぐ)。

ここでは前者は1段階の実行

>   * 式としての「function(){}」を "Function Calls" で呼び出し、 "The Group Operator"
> によって評価した値を返す
>

、後者は2段階の実行

>   * "The Grouping Operator" で「function(){}」を式として認識させ、
>   * "Function Calls" でその評価結果である関数を実行する
>

であると説明し、このため極わずかだが前者の方が実行コストは低い、としています。  
(ただ、本当に差異があるとして、一般的にそれを理由として "The Grouping Operator"
の使用を避けるような方針は採らないのでは、と個人的には考えます)

また、[JSLint](https://www.jslint.com/) は `(function(){})()`
の書式に対して警告を出す([参考](http://linterrors.com/js/do-not-wrap-function-literals-in-
parens))ということも同節で触れられていました。

* * *

どちらの書き方が望ましいか、という点については、2010年に書かれた[こちらの記事](https://benalman.com/news/2010/11/immediately-
invoked-function-expression/#iife)では

>
[code]

>       (function(){ /* code */ }()); // Crockford recommends this one
>       (function(){ /* code */ })(); // But this one works just as well
>  
[/code]

とありますが(*1)、WikipediaからリンクされているES6時代に書かれた[こちらの記事](https://exploringjs.com/es6/ch_arrow-
functions.html#_parenthesizing-arrow-function-with-block-bodies)では

> (前略)
[code]

>     (function () {
>         ···
>     }());
>  
[/code]

>
> Or just around the function expression:
[code]

>     (function () {
>         ···
>     })();
>  
[/code]

>
> Given how arrow functions work, the latter way of parenthesizing should be
> preferred from now on.

とあります。

*1) おそらく Douglas Crockford 氏の著書 [JavaScript: The Good Parts](https://www.oreilly.co.jp/books/9784873113913/) にそういう記述があるのではないかなと想像します([参考](https://www.publickey1.jp/blog/13/javascript_douglas_crockfordqcon_tokyo_2013_1.html))。

