javascript - JavaScriptの（function（）{}）（）構文とは何ですか？

Question

以前はこれが何を意味するのか知っていましたが、今は苦労しています...

これは基本的に言っているのdocument.onloadですか？

(function () {

})();

score 947 · Accepted Answer

これは、即時呼び出し関数式、または略してIIFEです。作成後すぐに実行されます。

これは、イベント（など）のイベントハンドラーとは何の関係もありませんdocument.onload。
括弧の最初のペア内の部分を考えてみましょう。....これは通常の関数式です。次に、最後のペアを見てください。これは通常、関数を呼び出すために式に追加されます。この場合、前の式です。(function(){})();(function(){})();

このパターンは、グローバル名前空間の汚染を回避しようとするときによく使用されます。これは、IIFE内で使用されるすべての変数（他の通常の関数と同様）がスコープ外に表示されないためです。
これが、おそらく、この構造をのイベントハンドラーと混同した理由です。これは、次window.onloadのようによく使用されるためです。

(function(){
  // all your code here
  var foo = function() {};
  window.onload = foo;
  // ...
})();
// foo is unreachable here (it’s undefined)

Guffaによって提案された修正：

関数は、解析された後ではなく、作成された直後に実行されます。スクリプトブロック全体は、その中のコードが実行される前に解析されます。また、コードの解析は、コードが実行されることを自動的に意味するわけではありません。たとえば、IIFEが関数内にある場合、関数が呼び出されるまで実行されません。

更新これは非常に人気のあるトピックであるため、IIFEはES6の矢印関数を使用して作成することもできます（Gajusがコメントで指摘しているように）：

((foo) => {
 // do something with foo here foo
})('foo value')

score 121 · Accepted Answer

これは、作成された直後に実行される匿名関数です。

これは、変数に割り当てて、変数なしでのみ使用した場合と同じです。

var f = function () {
};
f();

jQueryには、あなたが考えているかもしれない同様の構造があります：

$(function(){
});

readyこれは、イベントをバインドする短い形式です。

$(document).ready(function(){
});

しかし、上記の2つの構成はIIFEではありません。

score 63 · Accepted Answer

即時呼び出し関数式（IIFE）は、即時に関数を呼び出します。これは単に、関数が定義の完了直後に実行されることを意味します。

さらに3つの一般的な表現：

// Crockford's preference - parens on the inside
(function() {
  console.log('Welcome to the Internet. Please follow me.');
}());

//The OPs example, parentheses on the outside
(function() {
  console.log('Welcome to the Internet. Please follow me.');
})();

//Using the exclamation mark operator
//https://stackoverflow.com/a/5654929/1175496
!function() {
  console.log('Welcome to the Internet. Please follow me.');
}();

戻り値に特別な要件がない場合は、次のように記述できます。

!function(){}();  // => true
~function(){}(); // => -1
+function(){}(); // => NaN
-function(){}();  // => NaN

または、次のようにすることもできます。

~(function(){})();
void function(){}();
true && function(){ /* code */ }();
15.0, function(){ /* code */ }();

あなたも書くことができます：

new function(){ /* code */ }
31.new function(){ /* code */ }() //If no parameters, the last () is not required

score 36 · Accepted Answer

この構成は、即時呼び出し関数式（IIFE）と呼ばれ、すぐに実行されることを意味します。インタプリタがその関数に到達すると自動的に呼び出される関数と考えてください。

最も一般的なユースケース：

最も一般的なユースケースの1つは、を介して作成された変数のスコープを制限することですvar。を介しvarて作成された変数のスコープは関数に制限されているため、この構造（特定のコードの関数ラッパー）は、変数スコープがその関数から漏れないようにします。

次の例でcountは、はすぐに呼び出される関数の外部では使用できません。つまり、スコープはcount関数から漏れません。ReferenceErrorとにかくすぐに呼び出される関数の外でそれにアクセスしようとすると、を取得する必要があります。

(function () { 
    var count = 10;
})();
console.log(count);  // Reference Error: count is not defined

ES6オルタナティブ（推奨）

ES6では、とを介して変数を作成できるようにletなりconstました。それらは両方ともブロックスコープです（var関数スコープとは異なります）。

したがって、前述のユースケースでIIFEの複雑な構成を使用する代わりに、変数のスコープが目的のブロックから漏れないようにするための、はるかに単純なコードを記述できるようになりました。

{ 
    let count = 10;
}
console.log(count);  // ReferenceError: count is not defined

この例では、コードのブロックに限定する変数をlet定義するために使用し、中括弧を使用して作成しました。countcount{...}

私はそれを「カーリー刑務所」と呼んでいます。

score 32 · Accepted Answer

つまり、すぐに実行します。

だから私がそうするなら：

var val = (function(){
     var a = 0;  // in the scope of this function
     return function(x){
         a += x;
         return a;
     };
})();

alert(val(10)); //10
alert(val(11)); //21

フィドル： http： //jsfiddle.net/maniator/LqvpQ/

2番目の例：

var val = (function(){
     return 13 + 5;
})();

alert(val); //18

score 32 · Accepted Answer

匿名関数を宣言してから、次のように呼び出します。

(function (local_arg) {
   // anonymous function
   console.log(local_arg);
})(arg);

score 18 · Accepted Answer

(function () {
})();

これは、IIFE（即時呼び出し関数式）と呼ばれます。有名なJavaScriptデザインパターンの1つであり、現代のモジュールパターンの核心です。名前が示すように、作成された直後に実行されます。このパターンは、実行の分離またはプライベートスコープを作成します。

ECMAScript 6より前のJavaScriptは字句スコープを使用していたため、ブロックスコープのシミュレーションにはIIFEが使用されていました。let（ECMAScript 6では、およびconstキーワードの導入によりブロックスコープが可能です。）字句スコープに関する問題のリファレンス

IIFEでブロックスコープをシミュレートする

IIFEを使用することのパフォーマンス上の利点は、スコープのルックアップを減らすことにより、、などの一般的に使用されるグローバルオブジェクトを引数としてwindow渡すことができることです。document（JavaScriptはローカルスコープでプロパティを検索し、グローバルスコープまでチェーンを上っていくことを忘れないでください）。したがって、ローカルスコープ内のグローバルオブジェクトにアクセスすると、以下のようにルックアップ時間が短縮されます。

(function (globalObj) {
//Access the globalObj
})(window);

score 15 · Accepted Answer

これは、Javascriptで即時に呼び出される関数式です。

JSのIIFEを理解するために、それを分解してみましょう。

式：値を返すもの
例：Chromeコンソールで次のことを試してください。これらはJSでの表現です。

a = 10 
output = 10 
(1+3) 
output = 4

関数式：
例：

// Function Expression 
var greet = function(name){
   return 'Namaste' + ' ' + name;
}

greet('Santosh');

関数式のしくみ：
-JSエンジンを初めて実行するとき（実行コンテキスト-作成フェーズ）、この関数（=上記の右側）は実行されず、メモリに保存されません。変数「greet」には、JSエンジンによって「undefined」値が割り当てられます。
-実行中（実行コンテキスト-実行フェーズ）、関数オブジェクトはオンザフライで作成され（まだ実行されていません）、「greet」変数に割り当てられ、「greet（'somename'）」を使用して呼び出すことができます。

3.即時呼び出し関数式：

例：

// IIFE
var greeting = function(name) {
    return 'Namaste' + ' ' + name;
}('Santosh')

console.log(greeting)  // Namaste Santosh.

IIFEの仕組み：
-関数宣言の直後の「（）」に注意してください。すべての関数オブジェクトには、呼び出し可能な「CODE」プロパティが付加されています。そして、'（）'中括弧を使用してそれを呼び出す（または呼び出す）ことができます。
-ここで、実行中（実行コンテキスト-実行フェーズ）に、関数オブジェクトが作成され、同時に実行されます -したがって、関数オブジェクトではなく、greeting変数に戻り値（文字列）があります。

JSにおけるIIFEの典型的なユースケース：

次のIIFEパターンが非常に一般的に使用されます。

// IIFE 
// Spelling of Function was not correct , result into error
(function (name) {
   var greeting = 'Namaste';
   console.log(greeting + ' ' + name);
})('Santosh');

ここで2つのことをしています。a）関数式を中括弧（）で囲みます。これは、（）内に配置されたものが式（この場合は関数式）であり、有効なコードであることを構文パーサーに通知します。
b）この関数の最後に（）を使用して、同時にこの関数を呼び出しています。

したがって、この関数は同時に作成および実行されます（IIFE）。

IIFEの重要なユースケース：

IIFEはコードを安全に保ちます。
-関数であるIIFEには独自の実行コンテキストがあります。つまり、IIFE内で作成されるすべての変数はこの関数に対してローカルであり、グローバル実行コンテキストと共有されません。

アプリケーションでiife.jsと一緒に使用されている別のJSファイル（test1.js）があるとします（以下を参照）。

// test1.js

var greeting = 'Hello';

// iife.js
// Spelling of Function was not correct , result into error
(function (name) { 
   var greeting = 'Namaste';
   console.log(greeting + ' ' + name);
})('Santosh');

console.log(greeting)   // No collision happens here. It prints 'Hello'.

したがって、IIFEは、意図せずにグローバルオブジェクトと衝突しない安全なコードを作成するのに役立ちます。

score 13 · Accepted Answer

いいえ、この構成は名前付けのスコープを作成するだけです。あなたがそれを部分的に壊すならば、あなたはあなたが外部を持っているのを見ることができます

(...)();

これは関数の呼び出しです。括弧内には次のものがあります。

function() {}

これは無名関数です。コンストラクト内でvarを使用して宣言されたものはすべて、同じコンストラクト内でのみ表示され、グローバル名前空間を汚染しません。

score 6 · Accepted Answer

これは、自己呼び出し型の無名関数です。

自己呼び出し関数のW3Schoolsの説明を確認してください。

関数式は「自己呼び出し」にすることができます。

自己呼び出し式は、呼び出されることなく自動的に呼び出されます（開始されます）。

式の後に（）が続く場合、関数式は自動的に実行されます。

関数宣言を自己呼び出しすることはできません。

score 6 · Accepted Answer

これは自己呼び出し無名関数です。定義されている間に実行されます。つまり、この関数は定義されており、定義の直後に呼び出されます。

構文の説明は次のとおりです。最初の()括弧内の関数は名前のない関数であり、次の();括弧によって、定義されたときに呼び出されていることがわかります。()そして、最初の括弧にある関数で取得されるこの2番目の括弧に任意の引数を渡すことができます。この例を参照してください。

(function(obj){
    // Do something with this obj
})(object);

ここで、渡した「オブジェクト」は、関数のシグネチャで取得しているため、「obj」によって関数内でアクセスできます。

score 5 · Accepted Answer

ここから始める：

var b = 'bee';
console.log(b);  // global

それを関数に入れると、それはもはやグローバルではなくなります-あなたの主な目標です。

function a() {
  var b = 'bee';
  console.log(b);
}
a();
console.log(b);  // ReferenceError: b is not defined -- *as desired*

すぐに関数を呼び出します--oops：

function a() {
  var b = 'bee';
  console.log(b);
}();             // SyntaxError: Expected () to start arrow function, but got ';' instead of '=>'

構文エラーを回避するには、括弧を使用します。

(function a() {
  var b = 'bee';
  console.log(b);
})(); // OK now

関数名は省略できます。

(function () {    // no name required
  var b = 'bee';
  console.log(b);
})();

それ以上に複雑にする必要はありません。

score 4 · Accepted Answer

これは関数式であり、即時呼び出し関数式（IIFE）の略です。IIFEは、作成直後に実行される関数です。そのため、関数が呼び出されて実行されるまで待機する必要があるため、IIFEはすぐに実行されます。例によってIIFEを構築してみましょう。2つの整数を引数として取り、合計を返すadd関数があるとすると、add関数をIIFEにできます。

ステップ1：関数を定義する

function add (a, b){
    return a+b;
}
add(5,5);

ステップ2：関数宣言全体を括弧で囲んで関数を呼び出します

(function add (a, b){
    return a+b;
})
//add(5,5);

ステップ3：関数をすぐに呼び出すには、呼び出しから「追加」テキストを削除するだけです。

(function add (a, b){
    return a+b;
})(5,5);

IFFEを使用する主な理由は、関数内でプライベートスコープを保持することです。確認したいJavaScriptコード内で、グローバル変数をオーバーライドしていないことを確認します。グローバル変数をオーバーライドする変数を誤って定義する場合があります。例を挙げてみましょう。iffe.htmlというhtmlファイルがあり、bodyタグ内のコードは-

<body>
    <div id = 'demo'></div>
    <script>
        document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script> 
</body>

さて、上記のコードは問題なく実行されます。ここで、documentという名前の変数を誤ってまたは意図的にクリアしたと仮定します。

<body>
    <div id = 'demo'></div>
    <script>
        document.getElementById("demo").innerHTML = "Hello JavaScript!";
        const document = "hi there";
        console.log(document);
    </script> 
</body>

構成不可能なグローバルプロパティドキュメントのSyntaxError ：再宣言が発生します。

ただし、変数名のドキュメントをクリアしたい場合は、IFFEを使用してクリアできます。

<body>
    <div id = 'demo'></div>
    <script>
        (function(){
            const document = "hi there";
            this.document.getElementById("demo").innerHTML = "Hello JavaScript!";
            console.log(document);
        })();
        document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script> 
</body>

出力：

別の例で試してみましょう。次のような電卓オブジェクトがあるとします。

<body>
    <script>
        var calculator = {
            add:function(a,b){
                return a+b;
            },
            mul:function(a,b){
                return a*b;
            }
        }
        console.log(calculator.add(5,10));
    </script> 
</body>

それは魅力のように機能しています。誤って電卓オブジェクトの値を再割り当てした場合はどうなりますか。

<body>
    <script>
        var calculator = {
            add:function(a,b){
                return a+b;
            },
            mul:function(a,b){
                return a*b;
            }
        }
        console.log(calculator.add(5,10));
        calculator = "scientific calculator";
        console.log(calculator.mul(5,5));
    </script> 
</body>

はい、TypeErrorが発生します。calculator.mulは関数iffe.htmlではありません。

しかし、IFFEの助けを借りて、別の変数名計算機を作成して使用できるプライベートスコープを作成できます。

<body>
    <script>
        var calculator = {
            add:function(a,b){
                return a+b;
            },
            mul:function(a,b){
                return a*b;
            }
        }
        var cal = (function(){
            var calculator = {
                sub:function(a,b){
                    return a-b;
                },
                div:function(a,b){
                    return a/b;
                }
            }
            console.log(this.calculator.mul(5,10));
            console.log(calculator.sub(10,5));
            return calculator;
        })();
        console.log(calculator.add(5,10));
        console.log(cal.div(10,5));
    </script> 
</body>

出力：

score 3 · Accepted Answer

自己実行関数は通常、コンテキストをカプセル化し、名前の衝突を回避するために使用されます。（function（）{..}）（）内で定義する変数はグローバルではありません。

コード

var same_name = 1;

var myVar = (function() {
    var same_name = 2;
    console.log(same_name);
})();

console.log(same_name);

この出力を生成します：

2
1

この構文を使用することで、JavaScriptコードの他の場所で宣言されたグローバル変数との衝突を回避できます。

score 3 · Accepted Answer

これは、IIFE-即時呼び出し関数式と呼ばれます。これは、その構文と使用法を示す例です。これは、関数までのみ変数の使用をスコープするために使用され、それを超えることはありません。

(function () {
  function Question(q,a,c) {
    this.q = q;
    this.a = a;
    this.c = c;
  }

  Question.prototype.displayQuestion = function() {
    console.log(this.q);
    for (var i = 0; i < this.a.length; i++) {
      console.log(i+": "+this.a[i]);
    }
  }

  Question.prototype.checkAnswer = function(ans) {
    if (ans===this.c) {
      console.log("correct");
    } else {
      console.log("incorrect");
    }
  }

  var q1 = new Question('Is Javascript the coolest?', ['yes', 'no'], 0);
  var q2 = new Question('Is python better than Javascript?', ['yes', 'no', 'both are same'], 2);
  var q3 = new Question('Is Javascript the worst?', ['yes', 'no'], 1);

  var questions = [q1, q2, q3];

  var n = Math.floor(Math.random() * questions.length)

  var answer = parseInt(prompt(questions[n].displayQuestion()));
  questions[n].checkAnswer(answer);
})();

score 2 · Accepted Answer

自己実行型の無名関数。作成されるとすぐに実行されます。

これが役立つ短いダミーの例の1つは次のとおりです。

function prepareList(el){
  var list = (function(){
    var l = []; 
    for(var i = 0; i < 9; i++){
     l.push(i);
    }
    return l;
  })();

  return function (el){
    for(var i = 0, l = list.length; i < l; i++){
      if(list[i] == el) return list[i];
    }
    return null;
  }; 
} 

var search = prepareList();
search(2);
search(3);

したがって、リストを毎回作成するのではなく、一度だけ作成します（オーバーヘッドが少なくなります）。

score 2 · Accepted Answer

TL; DR：式を括弧で囲むことができます。これは、の式とブロック形式が組み合わされた場合に関数呼び出しと競合します。`function`

私は反例が好きです。なぜなら、それらは論理の素晴らしい絵を描いており、他の誰も何もリストしていないからです。function(){}()「ブラウザがその表現を認識して想定できないのはなぜですか？」と質問するかもしれません。この問題を3つの例と並べてみましょう。

var x;

// Here, fibonacci is a block function
function fibonacci(x) {
    var value = x < 2 ? x : fibonacci(x-1) + fibonacci(x-2);
    if (x === 9) console.log("The " + x + "th fibonacci is: " + value);
    return value;
}

(x = 9);

console.log("Value of x: " + x);
console.log("fibonacci is a(n) " + typeof fibonacci);

関数を式に変換すると、状況がどのように変化するかを観察します。

var x;

// Here, fibonacci is a function expression
(function fibonacci(x) {
    var value = x < 2 ? x : fibonacci(x-1) + fibonacci(x-2);
    if (x === 9) console.log("The " + x + "th fibonacci is: " + value);
    return value;
})

(x = 9);

console.log("Value of x: " + x);
console.log("fibonacci is a(n) " + typeof fibonacci);

括弧の代わりにnot-operatorを使用した場合も同じことが起こります。これは、両方の演算子がステートメントを式に変換するためです。

var x;

// Here, fibonacci is a function expression
! function fibonacci(x) {
    var value = x < 2 ? x : fibonacci(x-1) + fibonacci(x-2);
    if (x === 9) console.log("The " + x + "th fibonacci is: " + value);
    return value;
}

(x = 9);

console.log("Value of x: " + x);
console.log("fibonacci is a(n) " + typeof fibonacci);

関数を式に変換することにより、関数はその(x = 9)下の2行で実行されます。式関数とブロック関数の動作が異なるため、どちらの例もあいまいさなしに正常に実行されます（仕様に関して）。

名前のスコープ

もう1つの重要な観察事項は、名前付きブロック関数はスコープ全体に表示されますが、関数式はそれ自体にのみ表示されることです。つまり、は、最初の例のブロックである場合にfibonacciのみ最後まで表示されます。console.log3つの例すべてで、fibonacciはそれ自体に表示され、fibonacci再帰であるそれ自体を呼び出すことができます。

矢印関数

ロジックのもう1つの側面は、矢印関数です。ブロック関数と式関数の定義が一緒にマージされた場合、仕様には矢印関数の任意のルールと例外を含める必要がありました。

function hello() {console.log("Hello World")}
(x) => console.log("hello " + x)
console.log("If you are reading this, no errors occurred");

関数ブロックは正常に機能しますが、関数式の後に矢印関数が続くと、構文エラーが発生します。

! function hello() {console.log("Hello World")}
(x) => console.log("hello " + x)
console.log("If you are reading this, no errors occurred");

(x)ここで、 2行目が前の行の関数を呼び出しているのか、それとも矢印関数の関数引数であるのかはあいまいです。

矢印関数は実際に何年にもわたってECMAScript標準に準拠しており、言語の初期設計の要因ではなかったことに注意してください。私のポイントは、式とブロック関数を区別することで、JavaScript構文をもう少し論理的で一貫性のあるものにすることができるということです。

score 1 · Accepted Answer

もう1つのユースケースは、キャッシュオブジェクトがグローバルではないメモ化です。

var calculate = (function() {
  var cache = {};
  return function(a) {

    if (cache[a]) {
      return cache[a];
    } else {
      // Calculate heavy operation
      cache[a] = heavyOperation(a);
      return cache[a];
    }
  }
})();

score 1 · Accepted Answer

IIFE（即時呼び出し関数式）は、スクリプトがロードされて終了するとすぐに実行される関数です。

iife.jsという名前のファイルに記述された以下の関数について考えてみます。

(function(){
       console.log("Hello Stackoverflow!");
   })();

上記のコードは、iife.jsをロードするとすぐに実行され、「Hello Stackoverflow！」と出力されます。'開発ツールのコンソール。

詳細な説明については、即時呼び出し関数式（IIFE）を参照してください。

score 1 · Accepted Answer

次のコード：

(function () {

})();

即時呼び出し関数式（IIFE）と呼ばれます。

( yourcode )Javascriptの演算子が式に強制するため、関数式と呼ばれます。関数式と関数宣言の違いは次のとおりです。

// declaration:
function declaredFunction () {}

// expressions:

// storing function into variable
const expressedFunction = function () {}

// Using () operator, which transforms the function into an expression
(function () {})

式は、単一の値に評価できる一連のコードです。上記の例の式の場合、この値は単一の関数オブジェクトでした。

関数オブジェクトに評価される式ができたら、すぐに演算子を使用して関数オブジェクトを呼び出す()ことができます。例えば：

(function() {

  const foo = 10;        // all variables inside here are scoped to the function block
  console.log(foo);

})();

console.log(foo);  // referenceError foo is scoped to the IIFE

なぜこれが便利なのですか？

大規模なコードベースを処理している場合、および/またはさまざまなライブラリをインポートしている場合、名前の競合が発生する可能性が高くなります。IIFE内で関連している（したがって同じ変数を使用している）コードの特定の部分を記述している場合、すべての変数と関数名はIIFEの関数ブラケットにスコープされます。これにより、名前の競合の可能性が減り、より不注意に名前を付けることができます（たとえば、接頭辞を付ける必要はありません）。

score 1 · Accepted Answer

この関数は、自己呼び出し関数と呼ばれます。自己呼び出し（自己実行とも呼ばれる）関数は、定義の直後に呼び出される（呼び出される）名前のない（匿名の）関数です。詳細はこちら

これらの関数が行うことは、関数が定義されると、関数がすぐに呼び出されることです。これにより、（別の行で呼び出す場合と比較して）時間と余分なコード行が節約されます。

次に例を示します。

(function() {
    var x = 5 + 4;
    console.log(x);
})();

score 0 · Accepted Answer

即時呼び出し関数式（IIFE）は、作成されるとすぐに実行される関数です。イベントや非同期実行とは関係ありません。以下に示すようにIIFEを定義できます。

(function() {
     // all your code here
     // ...
})();

括弧の最初のペアfunction（）{...}は、括弧内のコードを式に変換します。括弧の2番目のペアは、式の結果として得られる関数を呼び出します。

AnIIFEは、自己呼び出し型の無名関数として説明することもできます。最も一般的な使用法は、varを介して作成された変数のスコープを制限するか、名前の衝突を回避するためにコンテキストをカプセル化することです。

score 0 · Accepted Answer

自己呼び出し無名関数が使用される理由は、呼び出されることを意図したコードを（関数と変数にスコープを与えるとともに）「セットアップ」するため、他のコードから呼び出されてはならないためです。

つまり、プログラムの最初に「クラスを作成する」プログラムのようなものです。インスタンス化された後（自動的に）、使用できる関数は無名関数によって返される関数だけです。ただし、他のすべての関数はhidden'関数は、状態（スコープの作成中に設定された変数）とともに引き続き存在します。

とてもかっこいい。

score 0 · Accepted Answer

ES6構文の場合（簡単な例を探してこのページにアクセスし続けるので、自分で投稿します）：

// simple
const simpleNumber = (() => {
  return true ? 1 : 2
})()

// with param
const isPositiveNumber = ((number) => {
  return number > 0 ? true : false
})(4)

score 0 · Accepted Answer

これは、これを使用する理由のより詳細な説明です。

「IIFEを使用する主な理由は、データのプライバシーを確保することです。JavaScriptのvarは変数を含む関数にスコープするため、IIFE内で宣言された変数に外部からアクセスすることはできません。」

http://adripofjavascript.com/blog/drips/an-introduction-to-iffes-immediately-invoked-function-expressions.html

score 0 · Accepted Answer

ここにはすでに多くの良い答えがありますが、ここに私の2セントがあります：p

IIFE（即時呼び出し関数式）は、次の目的で使用できます。

グローバル名前空間での汚染の回避。

IIFE（または通常の関数）で定義された変数は、グローバルスコープの定義を上書きしません。
外部コードによるアクセスからコードを保護します。

IIFE内で定義したものはすべて、IIFE内でのみアクセスできます。コードが外部コードによって変更されるのを防ぎます。関数の結果として明示的に返すもの、または外部変数に値として設定したものだけが、外部コードからアクセスできます。
繰り返し使用する必要のない関数に名前を付けることは避けてください。名前付き関数をIIFEパターンで使用することは可能ですが、通常は繰り返し呼び出す必要がないため、使用しません。
多くのJSライブラリで使用されているユニバーサルモジュール定義用。詳細については、この質問を確認してください。

IIFEは一般的に次のように使用されます。

(function(param){
   //code here
})(args);

無名関数の前後の括弧を省略して、無名関数の前に演算子()を使用できます。void

void function(param){
   //code here
}(args);

score -1 · Accepted Answer

2セットの角かっこは少し混乱すると思いますが、グーグルの例で別の使用法を見ました。それらは似たようなものを使用していました。これが理解を深めるのに役立つことを願っています。

var app = window.app || (window.app = {});
console.log(app);
console.log(window.app);

したがって、windows.appが定義されていない場合window.app = {}はすぐに実行されるため、条件評価中にwindow.app割り当てられるため、結果は両方になり、現在はになります。したがって、コンソール出力は次のようになります。{}appwindow.app{}

Object {}
Object {}

score -2 · Accepted Answer

通常、JavaScriptコードはアプリケーション内でグローバルスコープを持っています。その中でグローバル変数を宣言すると、開発の他の領域で同じ重複変数を他の目的に使用する可能性があります。この重複のために、エラーが発生する可能性があります。したがって、即時呼び出し関数式を使用することでこのグローバル変数を回避できます。この式は自己実行式です。このIIFE式内でコードを作成すると、グローバル変数はローカルスコープとローカル変数のようになります。

IIFEを作成する2つの方法

(function () {
    "use strict";
    var app = angular.module("myModule", []);
}());

また

(function () {
    "use strict";
    var app = angular.module("myModule", []);
})();

上記のコードスニペットでは、「<em>varapp」はローカル変数になりました。

score -2 · Accepted Answer

通常、関数をプログラムに書き込んだ直後に関数を呼び出すことはありません。非常に簡単に言えば、関数を作成した直後に呼び出すと、IIFEと呼ばれます。これは派手な名前です。

javascript - JavaScriptの（function（）{}）（）構文とは何ですか？

29 に答える 29

2番目の例：

TL; DR：式を括弧で囲むことができます。これは、の式とブロック形式が組み合わされた場合に関数呼び出しと競合します。function

名前のスコープ

矢印関数

なぜこれが便利なのですか？

Related

Reference

TL; DR：式を括弧で囲むことができます。これは、の式とブロック形式が組み合わされた場合に関数呼び出しと競合します。`function`