Resumo : neste tutorial, você aprenderá sobre expressões de função invocadas imediatamente em JavaScript (IIFE).
DR
Uma expressão de função JavaScript invocada imediatamente é uma função definida como uma expressão e executada imediatamente após a criação. O seguinte mostra a sintaxe de definição de uma expressão de função invocada imediatamente:
(function(){
//...
})();
Linguagem de código: JavaScript ( javascript )
Por que IIFEs
Quando você define uma função , o mecanismo JavaScript adiciona a função ao objeto global. Veja o exemplo a seguir:
function add(a,b) {
return a + b;
}
Linguagem de código: JavaScript ( javascript )
Em navegadores web, o mecanismo JavaScript adiciona a add()
função ao window
objeto global:
console.log(window.add);
Linguagem de código: JavaScript ( javascript )
Da mesma forma, se você declarar uma variável fora de uma função usando a var
palavra-chave, o mecanismo JavaScript também adicionará a variável ao objeto global:
var counter = 10;
console.log(window.counter); // 10
Linguagem de código: JavaScript ( javascript )
Se você tiver muitas variáveis e funções globais, o mecanismo JavaScript liberará apenas a memória alocada para elas até que o objeto global perca seus escopos.
Como resultado, o script pode usar a memória de forma ineficiente. Além disso, ter variáveis e funções globais provavelmente causará colisões de nomes.
Uma maneira de evitar que funções e variáveis poluam o objeto global é usar expressões de função invocadas imediatamente.
Em JavaScript, você pode ter as seguintes expressões:
'This is a string';
(10+20);
Linguagem de código: JavaScript ( javascript )
Esta sintaxe está correta mesmo que as expressões não tenham efeito. Uma função também pode ser declarada como uma expressão chamada expressão de função:
let sum = function(a, b) {
return a + b;
}
Linguagem de código: JavaScript ( javascript )
Nesta sintaxe, a parte do lado direito do operador de atribuição ( =
) é uma expressão de função. Como uma função é uma expressão, você pode colocá-la entre parênteses:
let sum = (function(a, b) {
return a + b;
});
Linguagem de código: JavaScript ( javascript )
Neste exemplo, a sum
variável é referenciada como a função anônima que adiciona dois argumentos.
Além disso, você pode executar a função imediatamente após criá-la:
let sum = (function(a,b){
return a + b;
})(10, 20);
console.log(sum);
Linguagem de código: JavaScript ( javascript )
Neste exemplo, a sum
variável contém o resultado da chamada de função.
A expressão a seguir é chamada de expressão de função invocada imediatamente (IIFE) porque a função é criada como uma expressão e executada imediatamente:
(function(a,b){
return a + b;
})(10,20);
Linguagem de código: JavaScript ( javascript )
Esta é a sintaxe geral para definir um IIFE:
(function(){
//...
})();
Linguagem de código: JavaScript ( javascript )
Observe que você pode usar uma função de seta para definir um IIFE:
(() => {
//...
})();
Linguagem de código: JavaScript ( javascript )
Ao colocar funções e variáveis dentro de uma expressão de função invocada imediatamente, você pode evitar poluí-las no objeto global:
(function() {
var counter = 0;
function add(a, b) {
return a + b;
}
console.log(add(10,20)); // 30
}());
Linguagem de código: JavaScript ( javascript )
Nomeado IIFE
Um IIFE pode ter um nome. No entanto, não pode ser invocado novamente após a execução:
(function namedIIFE() {
//...
})();
Linguagem de código: JavaScript ( javascript )
IIFE começando com ponto e vírgula (;)
Às vezes, você pode ver um IIFE que começa com ponto e vírgula (;):
;(function() {
/* */
})();
Linguagem de código: JavaScript ( javascript )
Nesta sintaxe, o ponto e vírgula é usado para encerrar a instrução caso dois ou mais arquivos JavaScript sejam concatenados cegamente em um único arquivo.
Por exemplo, você pode ter dois arquivos lib1.js
e lib2.js
que usam IIFEs:
(function(){
// ...
})()
(function(){
// ...
})()
Linguagem de código: JavaScript ( javascript )
Se você usar uma ferramenta de empacotamento de código para concatenar o código de ambos os arquivos em um único arquivo, sem o ponto e vírgula ( ;
), o código JavaScript concatenado causará um erro de sintaxe.
IIFE em ações
Suponha que você tenha uma biblioteca chamada calculator.js com as seguintes funções:
function add(a, b) {
return a + b;
}
function mutiply(a, b) {
return a * b;
}
Linguagem de código: JavaScript ( javascript )
E você carrega calculator.js
em um documento HTML.
Posteriormente, você também deseja carregar outra biblioteca JavaScript chamada app.js
para o mesmo documento:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>JavaScript IIFE</title>
</head>
<body>
<script src="calculator.js"></script>
<script src="app.js"></script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
O app.js
também tem a add()
função:
function add() {
return 'add';
}
Linguagem de código: JavaScript ( javascript )
Quando você usa a add()
função no documento HTML, ela retorna a 'add'
string em vez da soma de dois números:
let result = add(10, 20);
console.log(result); // 'add'
Linguagem de código: JavaScript ( javascript )
Isso ocorre porque a add()
função no app.js
substitui a add()
função na calculator.js
biblioteca.
Para corrigir isso, você pode aplicar IIFE em calculator.js da seguinte maneira:
const calculator = (function () {
function add(a, b) {
return a + b;
}
function multiply(a, b) {
return a * b;
}
return {
add: add,
multiply: multiply
}
})();
Linguagem de código: JavaScript ( javascript )
O IIFE retorna um objeto que contém os métodos add
e multiply
que fazem referência às funções add()
e multiply()
. No documento HTML, você pode usar a calculator.js
biblioteca da seguinte forma:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>JavaScript IIFE</title>
</head>
<body>
<script src="js/calculator.js"></script>
<script src="js/app.js"></script>
<script>
let result = calculator.add(10, 20); // add in app.js
console.log(result); // 30
console.log(add()); // add in the app.js
</script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
A calculator.add()
chamada da add()
função exportada pelo calculator.js
enquanto a segunda chamada para a add()
função faz referência à add()
função no arquivo app.js
.
jQuery e IIFE
O seguinte documento HTML usa a biblioteca jQuery:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>JavaScript IIFE - jQuery</title>
</head>
<body>
<h1>jQuery Demo</h1>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"
integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI=" crossorigin="anonymous"></script>
<script>
let counter = 1;
$('h1').click(function () {
$(this).text('jQuery Demo' + ' Clicked ' + counter++);
});
</script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
Ao importar a biblioteca jQuery, você pode acessar muitas funções úteis do jQuery por meio do objeto $
ou jQuery
. Nos bastidores, o jQuery usa o IIFE para expor sua funcionalidade.
Ao fazer isso, o jQuery só precisa usar uma variável global ( $
) para expor uma tonelada de funções sem poluir o objeto global.
O exemplo a seguir ilustra como alterar o objeto jQuery $ para _ dentro do IIFE:
(function (_) {
let counter = 1;
_('h1').click(function () {
_(this).text('jQuery Demo' + ' Clicked ' + counter++);
});
})(jQuery);
Linguagem de código: JavaScript ( javascript )
Neste exemplo, passamos o objeto jQuery para o IIFE e usamos o _
argumento.
Neste tutorial, você aprenderá sobre as expressões de função invocadas imediatamente (IIFE) JavaScript e seus propósitos.