JavaScript: Entendendo IFFEs

Um Immediately Invoked Function Expressions (IIFEs), são funções que são executadas quando são inicializadas. UM IIFE (pronuncia-se "iffy") pode ser inicializado ou definido para atingir um determinado propósito. Neste tutorial, você aprenderá sobre os casos de uso para IIFEs e os benefícios de usá-los em funções tradicionais. Você também escreverá testes para suas funções e integrará CI/CD para esses testes.

O que é um IIFE?

Um IIFE (Immediately Invoked Function Expression), é uma função que executa no momento em que é invocada ou chamada no loop de eventos do JavaScript.

Ter uma função que se comporte dessa maneira pode ser útil em determinadas situações.

Os IIFEs evitam a poluição do escopo global do JS. Em uma função tradicional, se você criar uma variável dentro da função, ela ficará acessível no objeto global. Se você definir uma variável em um IIFE, ela estará acessível apenas diretamente dentro da função.

Exemplo:

(function () {
    alert('I will be executed immediately!!!');
})();

Não se preocupe com a sintaxe agora. Basta ler o exemplo uma ou duas vezes para se familiarizar com a sintaxe do IIFE.

Como criar um IIFE

A criação de um IIFE envolve duas etapas:

• Criando uma expressão de função.
• Invocando a expressão de função imediatamente.

Criando uma expressão de função

Em JavaScript, uma expressão sempre retorna um valor e pode ser usada em qualquer lugar onde se espera um valor.

• 2 * 2
• addFunc(a, b)

Na maioria dos casos, quando o analisador JavaScript encontra a palavra-chave da função, ele a interpreta como uma declaração de função e não como uma expressão de função. Portanto, uma maneira geral de criar uma expressão de função, é colocar a declaração de função no operador de agrupamento (parênteses). Incluir dentro de "()" diz ao analisador explicitamente para esperar uma expressão. Neste caso, a expressão é a função.

Exemplo:

(function () { /* function body */ });

Chamando a expressão de função imediatamente

Para invocar a expressão de função criada no exemplo acima, basta adicionar alguns parênteses no final.

(function () {
    /* function body */
}();

Outros exemplos com arrow function:

(function () { /* function body */ }());

//es6 syntax com arrow function
(() => { /* function body */ })();

Por que IFFE?

Agora que conhecemos o código, a questão permanece: por que devemos usar o IIFE? O que ganhamos ao usá-lo? A função javascript simples não é boa o suficiente?

A resposta às perguntas acima é explicada abaixo em vários pontos:

O IFFE evita a poluição global do namespace

O escopo do nome da função e as variáveis definidas dentro do IIFE são locais para o próprio IIFE. Portanto, evitando que nomes de funções e variáveis ocupem espaço no namespace global. Também ajuda a prevenir a colisão de namespace.

Variáveis dentro do IIFE permanecem dentro do IIFE

As variáveis definidas dentro do IIFE são locais para o próprio e não existem fora dele.

Exemplo:

function () {
    var privateVar = "I am private to IIFE";

    // Output: "I am private to IFFE"
    console.log(privateVar);
})();

// ReferenceError: privateVar is not defined
console.log(privateVar);

IIFE ajuda a manter a memória limpa

As funções e variáveis necessárias são criadas e usadas quando IIFE é invocado. Assim que o IIFE termina sua execução, as funções e variáveis criadas ficam disponíveis para o Garbage Collection, ajudando a manter a memória limpa.

Passando Parâmetros para IIFE

Podemos passar parâmetros para IIFE dentro do último par de parênteses separados por vírgula:

(function(name, greeting){
    alert("Hello" + name);
    console.log(greeting);
})("John Doe", "How are you");

Diferentes maneiras de criar IIFE

Podemos criar IIFE onde quer que uma expressão de função possa ser criada em javascript.

Os seguintes IIFEs são aplicados a partir de expressões de função válidas:

!function () { /* ... */ }();
~function () { /* ... */ }();
-function () { /* ... */ }();
+function () { /* ... */ }();
void function () { /* ... */ }();

Em outras palavras, no contexto em que uma expressão de função é criada, não é necessário incluir entre parênteses.

var f = function () { /* ... */ }();
true && function () { /* ... */ }();

Mas tenha cuidado ao usá-los.

Conclusão

IIFE é um padrão de design que oferece muitos benefícios se usado corretamente. Espero que este artigo tenha ajudado você a entender melhor.

Se você gostou deste artigo, não se esqueça de votar e recomendá-lo. Sinta-se à vontade para fazer qualquer pergunta nos comentários abaixo.