È un'espressione di funzione, sta per Immediately Invoked Function Expression (IIFE). IIFE è semplicemente una funzione che viene eseguita subito dopo la sua creazione. Quindi, quando la funzione deve attendere che venga chiamata per essere eseguita, IIFE viene eseguita immediatamente. Costruiamo IIFE con l'esempio. Supponiamo di avere una funzione add che accetta due numeri interi come args e restituisce la somma e consente di rendere la funzione add in un IIFE,
Passaggio 1: definire la funzione
function add (a, b){
return a+b;
}
add(5,5);
Passaggio 2: chiamare la funzione racchiudendo tra parentesi l'intera dichiarazione di funzione
(function add (a, b){
return a+b;
})
//add(5,5);
Passaggio 3: per richiamare immediatamente la funzione è sufficiente rimuovere il testo "aggiungi" dalla chiamata.
(function add (a, b){
return a+b;
})(5,5);
Il motivo principale per utilizzare un IFFE è quello di preservare un ambito privato all'interno della tua funzione. All'interno del tuo codice javascript vuoi assicurarti di non sovrascrivere alcuna variabile globale. A volte potresti accidentalmente definire una variabile che sovrascrive una variabile globale. Proviamo con l'esempio. supponiamo di avere un file html chiamato iffe.html e che i codici all'interno del tag body siano-
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
Bene, il codice sopra verrà eseguito senza alcuna domanda, ora supponiamo che tu abbia dichiarato una variabile chiamata documento accidentale o intenzionale.
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
const document = "hi there";
console.log(document);
</script>
</body>
finirai in un SyntaxError : redeclaration di documento di proprietà globale non configurabile.
Ma se il tuo desiderio è di dichiarare un documet con nome variabile, puoi farlo usando 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>
Produzione:
Proviamo con un altro esempio, supponiamo di avere un oggetto calcolatrice come muggito-
<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>
Bene funziona come un incantesimo, e se riassegnassimo accidentalmente il valore dell'oggetto calcolatrice.
<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>
Sì, finirai con un TypeError: calcolatore.mul non è una funzione iffe.html
Ma con l'aiuto di IFFE possiamo creare un ambito privato in cui possiamo creare un altro calcolatore di nomi di variabili e usarlo;
<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>
Produzione:
