Desvendando os fundamentos do JavaScript - Capítulo I: IIFE
- #JavaScript
Fala galeraaa!
Hoje vamos começar uma série de post's TRUE!
(sem textinho de ChatGPT rsrs)
E pra iniciar o nosso mergulho nesse mundo que é a linguagem JavaScript, hoje eu trago pra vocês as famosas IIFE (Immediately Invoked Function Expression) ou em bom <html lang="pt-BR"> Expressão de Função Imediatamente Invocada.
Mas espera um pouco aí Rodrigo... Do que você ta falando?
Calma aí jovem gafanhoto! Essa é uma técnica que pode até parecer um pouco complexa à primeira vista, mas cola comigo que vocês irão entender cada aspecto de forma descomplicada!
Primeiramente, para entender as IIFE's você tem que ter noção do que se trata uma function ()
Caso você ainda não tenha noção de o que é uma função e como ela funciona, deixa um comentário aqui abaixo que irei saber e trazer um novo post bem legal sobre as funções em JavaScript.
Já que estamos com tudo pronto, vamos içar as velas!
O que são IIFE e por que precisamos delas?
Em JavaScript, uma IIFE é uma função que é definida e executada imediatamente após a sua criação.
De forma geral as funções são criadas e chamadas em outra parte do código, por exemplo:
function somar(a, b) {
return a + b
}
var resultado = somar(5, 3) // chamada da função
Perceba que eu estou chamando a função somar() passando quais números, como parâmetro, quero para realizar a operação. Sem a chamada os comandos inseridos na função nunca serão executados.
Quando se trata de IIFE, as funções não precisam desse "estopim", elas são declaradas e invocadas imediatamente após a sua definição!
E como eu uso isso no meu código??
Eu sabia que você iria me perguntar isso! Então vamos lá!
Essa é a sintaxe de uma IIFE:
(function() {
// Código da IIFE
})();
Note que não é necessário atribuir um nome à função já que não iremos referenciar a função em outra parte do código, chamamos isso de uma função anônima.
Outro detalhe importante é que envolvemos toda a função com parênteses. Isso é crucial, pois permite que a função seja tratada como uma expressão.
E por fim, Adicionamos parênteses adicionais no final para invocar imediatamente a função recém-criada.
Se não entendeu de primeira volte duas casas, compare a estrutura da IIFE com a função que expliquei anteriormente.
Beleza Rodrigo, mas é só isso? Claro que não seu apressadinho!
Essa técnica é útil por mais alguns motivos:
Escopo Isolado:
As IIFE criam um escopo isolado, evitando conflitos com variáveis globais. Isso é especialmente útil para evitar poluição do escopo global.
Exemplo:
// Código fora da IIFE
var nome = "João";
(function() {
// Código dentro da IIFE
var nome = "Maria";
console.log(nome); // Saída: Maria
})();
console.log(nome); // Saída: João
Neste exemplo, a variável nome dentro da IIFE não afeta a variável nome fora dela. Isso ajuda a evitar conflitos e poluição global.
A que está do lado de fora continua armazendo a string "João" e a dentro da IIFE armazena "Maria"... Ao executar esse código no console irá aparecer os dois nomes.
(Não acredita? Testa lá no seu VsCode)
Módulos e Encapsulamento:
IIFE são frequentemente usadas para criar módulos em JavaScript, encapsulando variáveis e funções e expondo apenas o necessário. (Mas aí já é assunto para outro post)
Chegando ao fim da sua primeira jornada!!
As IIFE são uma ferramenta poderosa em JavaScript para criar escopos isolados, evitar poluição global, executar código imediatamente e modularizar funcionalidades. Com esses conceitos, vocês podem escrever código mais organizado, modular e eficiente.
Se você curtiu deixa um comentário aqui embaixo! Dessa forma eu irei saber que esse breve conteúdo pode ter ajudado alguém de alguma forma e serve como incentivo para trazer mais!
Tamo junto!
#Partiu codar!!! 🚀
