Es una expresión de función, significa Expresión de función invocada inmediatamente (IIFE). IIFE es simplemente una función que se ejecuta inmediatamente después de su creación. Entonces, en lugar de que la función tenga que esperar hasta que se llame para ejecutarse, IIFE se ejecuta de inmediato. Construyamos el IIFE con el ejemplo. Supongamos que tenemos una función de agregar que toma dos enteros como argumentos y devuelve la suma. Hagamos que la función de agregar se convierta en un IIFE,
Paso 1: definir la función
function add (a, b){
return a+b;
}
add(5,5);
Paso 2: llame a la función envolviendo la declaración de función completa entre paréntesis
(function add (a, b){
return a+b;
})
//add(5,5);
Paso 3: para invocar la función inmediatamente, simplemente elimine el texto 'agregar' de la llamada.
(function add (a, b){
return a+b;
})(5,5);
La razón principal para usar un IFFE es preservar un ámbito privado dentro de su función. Dentro de su código javascript desea asegurarse de que no está anulando ninguna variable global. A veces puede definir accidentalmente una variable que anula una variable global. Probemos con el ejemplo. supongamos que tenemos un archivo html llamado iffe.html y los códigos dentro de la etiqueta body son-
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
Bueno, el código anterior se ejecutará sin ninguna pregunta, ahora suponga que rechazó una variable denominada documento accidental o intencionalmente.
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
const document = "hi there";
console.log(document);
</script>
</body>
terminará en un SyntaxError : redeclaración de documento de propiedad global no configurable.
Pero si su deseo es desclear un documento de nombre variable, puede hacerlo 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>
Salida:
Probemos con otro ejemplo, supongamos que tenemos un objeto de calculadora como abajo-
<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>
Bueno, está funcionando a las mil maravillas, ¿y si accidentalmente reasignemos el valor del objeto de la calculadora?
<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í, terminará con un TypeError: calculator.mul no es una función iffe.html
Pero con la ayuda de IFFE podemos crear un ámbito privado donde podemos crear otra calculadora de nombre de variable y usarla;
<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>
Salida:
