Pílulas de JavaScript: expressão de função invocada imediatamente (IIFE)
Este é um post de uma série na qual compartilho alguns aprendizados da minha jornada no JavaScript no formato de mini artigos. Veja os posts anteriores no meu perfil!
Uma expressão de função invocada imediatamente (em inglês, immediately invoked function expression, ou IIFE) é uma função chamada imediatamente depois de ser declarada.
(function helloWorld(){
alert('Hello, world!');
}
)();
// alerta 'Hello, world!'No exemplo acima, envolvemos a declaração da função em parênteses e acrescentamos mais um par de parênteses no final, invocando assim a função de imediato. Podemos criar uma IIFE também com uma função anônima:
(function (){
alert('What's up?');
}
)();
// alerta 'What's up?'Como faríamos na chamada de qualquer função, podemos também utilizar o último par de parênteses para inserir argumentos, como no exemplo abaixo:
(function (message){
alert(message);
}
)('Let's go!');
// alerta 'Let's go!'Uma das principais utilidades da expressão de função invocada imediatamente é a possibilidade de usar seu escopo para criar um fechamento (ou closure) e impedir que dados sejam acessados dentro desse escopo fechado. Na prática, funciona assim:
const myFunction = (
function () {
const password = 1337; return function () {
console.log(password);
}
}
)();// 1337
A função é executada imediatamente, pois trata-se de uma IIFE. Ela retorna uma função anônima, que fica armazenada em myFunction e captura (ou foca) a variável password. Isso significa que ela mantém a referência para o seu escopo pai, como é o caso de toda função aninhada.
Agora, temos em myFunction um estado mutável privado que não pode ser acessado de fora da função. No entanto, quando realizamos o console.log por dentro da função retornada, conseguimos acessar o valor de password!
Existe também uma sintaxe diferente para a IIFE. Podemos mover o segundo par de parênteses para dentro do primeiro par, envolvendo assim a expressão inteira com o primeiro par de parênteses:
(function bark(){
alert('Woof!');
}());O resultado é idêntico, tratando-se apenas de uma decisão de estilo.
É interessante observar que deixar essas variáveis em escopos fechados não tem vantagens apenas na segurança dos dados. Se menos variáveis são criadas no escopo global, reduzimos o ruído e a chance de conflito entre seus nomes.
Por hoje é só e até a próxima ❤
