Executando verificação de segurança...
2
deMenezes
1 min de leitura ·

Como usar uma IIFE (função autoinvocada) para criar um código modular e sem conflitos de escopo

IIFE não tem nada a ver com o if de if else (queria tirar esse elefante branco da sala 🤣).

uma iife simples em javascript

A IIFE, ou Immediately Invoked Function Expression, é a declaração e execução de uma função juntas.

Declaração? Execução? Relembre!

Uma função em Javascript tem 2 "momentos":

  • Declaração
  • Execução/invocação
// Declaração

function displayName(name) {
  console.log(name);
}

// Execução

displayName('Menezes');

Legal, mas... para quê?

No post completo no meu blog eu mostro:

  • O que é e para quê serve uma IIFE
  • Como passar argumentos para uma IIFE
  • Hoisting
  • Falo um pouco sobre funções anônimas
  • Vantagens de usar IIFE
    • Evitar o conflito de variáveis com encapsulamento
    • Manter a imutabilidade do código
  • Exemplos de IIFE no dia a dia, como:
    • Proteger variáveis do escopo global
    • Inicializar blocos de código
    • Modularidade (um exemplo muito show com uma conta corrente)
    • Minificação de código

Se tiver algum feedback ou dúvida sobre o conteúdo, pode comentar aqui ou lá no blog, que vai ser um prazer te ajudar :D

O Link do post está aqui na fonte:

Fonte: https://demenezes.dev/posts/iife-funcao-autoinvocada/

Carregando publicação patrocinada...
2
josefilho

Fala, @deMenezes. A técnica em si, é realmente muito interessante. Li seu texto e notei que embora tu tenha apresentado bons cenários de caso de uso para exemplificar a aplicação dos IIFEs, acredito que posso adicionar alguns detalhes ao texto.

Qual era o contexto em que ele se fazia necessário?

Em uma época aonde o Javascript ainda era terra sem lei, a maior dor era como isolar escopo e expor apenas o necessário em um módulo. Neste contexto IIFEs eram a salvação.
Tanto que era comum ver libs JS até idos de 2017/18 ainda usando IIFEs no module pattern. De lá pra cá, já tem um tempo que não vejo isso.

Tá, mas o quê mudou?

Depois da introdução de blocked scope variables (o tal do "let" e "const") o problema de ter variáveis protegidas por escopo foi resolvido. Por exemplo:

{
  let x = "qualquer valor"
  // Seu código alterando esse valor
}

console.log(x);
// Erro, pois a variável não foi declarada

Já o problema de expor apenas as interfaces desejadas de um módulo, pode ser resolvido com o uso de módulosimport/export.

Saldo final

IIFEs ainda devem ter algum uso, mas não consigo pensar em nenhum exemplo prático. Porém, acredito que conhecer e entender esta técnica certamente enriquece muito nosso entendimento de como Javascript lidava e lida com escopo e hoisting. Valeu por trazer este tópico.

1
deMenezes
Autor
Autor

Olá, @josefilho, tudo certo?

Vou tentar comentar um a um

Contexto onde as IIFEs são necessárias

Essa parte realmente não fui atrás para pesquisar, mas foi legal entender o que tu colocou.

Escopo de bloco

Apesar de já ter feito alguns testes, o ponto que me fez não abordar isso é que nunca vi esses blocos em códigos em produção, sempre optaram por IIFEs mesmo.

Acho que isso é um bom complemento a esse post, ou talvez um novo separado só sobre esse assunto, que eu possa linkar os dois.

Expor interfaces desejadas

Quando não mencionei a solução do export/impoprt, foi porque estava pensando em projetos pequenos, onde a pessoa está recém começando e usa apenas um arquivo JS.

Mas é claro que incluir essa solução no texto vai deixar ele mais completo.

Saldo final (hehe)

Eu gosto quando a galera manda feedback. Eu sempre salvo tudo no meu backlog para atualizar o post no futuro (e aqui não vai ser diferente).

Obrigado pelas informações 😄