これは関数式であり、Immediately Invoked Function Expression（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>
さて、上記のコードは何の質問もなく実行されます。今度は、ドキュメントという変数を誤ってまたは意図的にクリアしたと仮定します。
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
const document = "hi there";
console.log(document);
</script>
</body>
あなたはにendupうに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>
出力：
