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 windowobjeto 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 varpalavra-chave, o mecanismo JavaScript também adicionará a variável ao objeto global:
var counter = 10;
console.log(window.counter); // 10Linguagem 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 sumvariá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 sumvariá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.jse lib2.jsque 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.jsem um documento HTML.
Posteriormente, você também deseja carregar outra biblioteca JavaScript chamada app.jspara 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.jstambé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.jssubstitui a add()função na calculator.jsbiblioteca.
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 adde multiplyque fazem referência às funções add()e multiply(). No documento HTML, você pode usar a calculator.jsbiblioteca 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.jsenquanto 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.
