C'est une expression de fonction, elle signifie Immediately Invoked Function Expression (IIFE). IIFE est simplement une fonction qui est exécutée juste après sa création. Si la fonction doit attendre jusqu'à ce qu'elle soit appelée pour être exécutée, IIFE est exécuté immédiatement. Construisons l'exemple IIFE. Supposons que nous ayons une fonction add qui prend deux entiers comme arguments et renvoie la somme permet de transformer la fonction add en IIFE,
Étape 1: définir la fonction
function add (a, b){
return a+b;
}
add(5,5);
Étape 2: appelez la fonction en enveloppant l'intégralité de la déclaration de fonction entre parenthèses
(function add (a, b){
return a+b;
})
//add(5,5);
Étape 3: Pour réactiver immédiatement la fonction, il suffit de supprimer le texte «ajouter» de l'appel.
(function add (a, b){
return a+b;
})(5,5);
La principale raison d'utiliser un IFFE est de conserver une portée privée au sein de votre fonction. Dans votre code javascript, vous voulez vous assurer que vous ne remplacez aucune variable globale. Parfois, vous pouvez accidentellement définir une variable qui remplace une variable globale. Essayons par l'exemple. supposons que nous ayons un fichier html appelé iffe.html et que les codes à l'intérieur de la balise body soient-
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
Eh bien, le code ci-dessus s'exécutera sans aucune question, supposons maintenant que vous avez redécouvert une variable nommée document accidentellement ou intentionnellement.
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
const document = "hi there";
console.log(document);
</script>
</body>
vous vous retrouverez dans un SyntaxError : redéclaration de document de propriété globale non configurable.
Mais si vous souhaitez supprimer un document de nom de variable, vous pouvez le faire en utilisant 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>
Production:
Essayons par un autre exemple, supposons que nous ayons un objet calculatrice comme ci-dessous-
<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>
Eh bien, cela fonctionne comme un charme, et si nous réaffectons accidentellement la valeur de l'objet calculatrice.
<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>
oui vous vous retrouverez avec une TypeError: calculator.mul n'est pas une fonction iffe.html
Mais avec l'aide de l'IFFE, nous pouvons créer une portée privée où nous pouvons créer une autre calculatrice de nom de variable et l'utiliser;
<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>
Production:
