Funções Auto-invocáveis (IIFE) em Java Script

Você já se deparou com uma função que se executa assim que é definida? Esse comportamento é conhecido como IIFE (Immediately Invoked Function Expression) ou Funções Auto-invocáveis. Essa técnica é amplamente utilizada para evitar poluir o escopo global e é uma parte importante do JavaScript. Neste post, aprenda funções Auto-invocáveis (IIFE) em Java Script.

O que é uma IIFE?

Uma IIFE é uma função JavaScript que é definida e imediatamente invocada logo após sua criação. A sintaxe para isso é simples, como mostra o exemplo a seguir:

(function() {
    console.log("Esta função foi invocada imediatamente!");
})();

Aqui, o uso dos parênteses (function() { ... }) cria uma expressão de função, e os parênteses () no final invocam essa função imediatamente.

Por que usar uma IIFE?

Em JavaScript, variáveis declaradas fora de funções são globais, o que significa que elas podem ser acessadas e modificadas por qualquer parte do código. Isso pode levar a conflitos e bugs em programas maiores. Usar uma IIFE ajuda a isolar o código, criando um escopo local.

Exemplos de uso de IIFE:

Evitar a poluição do escopo global:

(function() {
    var nome = "João";
    console.log(nome); // João
})();
console.log(nome); // ReferenceError: nome is not defined

Aqui, a variável nome só está acessível dentro da IIFE. Fora dela, o JavaScript não reconhece essa variável, evitando conflitos.

Criação de escopo local para proteger variáveis:

var contador = (function() {
    var valor = 0;
    return function() {
        valor += 1;
        return valor;
    };
})();

console.log(contador()); // 1
console.log(contador()); // 2

Nesse exemplo, a IIFE cria um escopo fechado para a variável valor. A função retornada tem acesso a essa variável, mas o valor de valor permanece protegido, evitando que outras partes do código o modifiquem diretamente.

IIFE com parâmetros

Uma IIFE também pode receber argumentos, o que torna a técnica ainda mais versátil. Veja um exemplo:

(function(nome) {
    console.log("Olá, " + nome);
})("Maria");

Aqui, a função auto-invocável aceita um parâmetro nome e o utiliza internamente, sem expor a variável ao escopo global.

IIFE e programação modular

Antes do surgimento de módulos nativos em JavaScript (como ES6 modules), IIFEs eram usadas para criar um padrão de modularidade no código, encapsulando lógicas específicas e retornando apenas os componentes necessários. Isso se tornou uma base para muitas bibliotecas JavaScript, como o jQuery.

var modulo = (function() {
    var privado = "Sou um valor privado";

    return {
        publico: function() {
            console.log(privado);
        }
    };
})();

modulo.publico(); // Sou um valor privado

Aqui, privado é inacessível fora do módulo, mas ainda pode ser usado pela função pública retornada.

Outro exemplo prático

Com esse tipo de função é possível fugir do escopo global do browser, limitando-se apenas ao escopo local da função. Veja:

 (function() {
    console.log('Será executado na hora e fugirá do escopo global')
 }) () //Invocação da função

 let result = (function () { 
 let nome = "Bene"; 
 return nome; 
 })();
  
// Imediatamente gera a saída:
 result; // 'Bene' 

Tudo que for manipulado dentro da função somente atuará no escopo local da função, isolando-se do escopo mais abrangente.

As IIFEs são um recurso poderoso e versátil do JavaScript. Elas ajudam a criar escopos locais, evitando a poluição do escopo global e protegendo variáveis de modificações externas.

Embora o uso de módulos tenha se tornado o padrão moderno, as IIFEs ainda são úteis em muitos cenários, especialmente em projetos legados ou em bibliotecas que precisam manter compatibilidade com versões anteriores do JavaScript.

Dúvidas ou sugestões sobre funções Auto-invocáveis (IIFE) em Java Script? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: iife