É uma expressão de função, significa Expressão de Função Invocada Imediatamente (IIFE). IIFE é simplesmente uma função que é executada logo após ser criada. Assim, como a função precisa esperar até que seja chamada para ser executada, o IIFE é executado imediatamente. Vamos construir o IIFE por exemplo. Suponha que tenhamos uma função add, que recebe dois números inteiros como args e retorna a soma, para que a função add seja transformada em um IIFE,
Etapa 1: definir a função
function add (a, b){
return a+b;
}
add(5,5);
Etapa 2: Chame a função envolvendo toda a declaração de função entre parênteses
(function add (a, b){
return a+b;
})
//add(5,5);
Etapa 3: para ativar a função imediatamente, remova o texto 'adicionar' da chamada.
(function add (a, b){
return a+b;
})(5,5);
O principal motivo para usar um IFFE é preservar um escopo privado dentro de sua função. Dentro do seu código javascript, você deseja garantir que não substitua nenhuma variável global. Às vezes, você pode definir acidentalmente uma variável que substitui uma variável global. Vamos tentar pelo exemplo. suponha que tenhamos um arquivo html chamado iffe.html e os códigos dentro da tag body estejam-
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
Bem, o código acima será executado sem qualquer pergunta, agora assuma que você decleard uma variável chamada documento acidental ou intencional.
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
const document = "hi there";
console.log(document);
</script>
</body>
você terminará em um SyntaxError : redeclaração de documento de propriedade global não configurável.
Mas se seu desejo é declear um nome de variável documet, você pode fazê-lo usando o 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>
Resultado:
Vamos tentar com outro exemplo, suponha que tenhamos um objeto de calculadora como abaixo
<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>
Bem, está funcionando como um encanto, e se acidentalmente atribuirmos novamente o valor do objeto da 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>
sim, você terminará com um TypeError: calculator.mul não é uma função iffe.html
Porém, com a ajuda do IFFE, podemos criar um escopo privado, onde podemos criar outra calculadora de nome de variável e usá-la;
<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>
Resultado:
