🖕🏾 👸🏾 🕙 Por que é hora de parar de usar o JavaScript IIFE 🧙🏼 🧛🏻 👲🏻

A função Expressão de Função Imediatamente Invocada (IIFE) no JavaScript é uma construção que permite chamar uma função imediatamente após ser definida.

imagem

Neste artigo, entenderemos por que vale a pena abandonar o uso do IIFE, apesar de seus méritos anteriores.

Podemos declarar variáveis dentro de blocos autônomos

Desde que o padrão ES6 surgiu, podemos declarar variáveis e constantes dentro de um bloco com let e const. Junto com esse padrão, também foi possível alocar variáveis e constantes em blocos autônomos, inacessíveis do lado de fora.

Por exemplo:

{
 let x = 1;
}

Então x não estará acessível externamente. Isso é claramente melhor que:

(()=>{
 let x = 1;
})();

Agora que o ES6 é suportado por quase todos os navegadores modernos, precisamos parar de usar o IIFE para separar variáveis do mundo externo. Outra maneira de isolar variáveis é com módulos que agora também não têm problemas para suportá-las. Até a exportação, eles não estarão disponíveis para outros módulos.

Podemos nos livrar de quase todos os fechamentos

O fechamento é um mecanismo pelo qual uma função se lembra de suas variáveis externas e pode acessá-las. Se criarmos outro dentro da função e a devolvermos, a função retornada poderá acessar variáveis externas internas à função externa.

Por exemplo, aqui podemos obter alguns efeitos colaterais:

const id = (() => {
 let count = 0;
 return () => {
   ++count;
   return `id_${count}`;
 };
})();

Novamente, agora não faz sentido cercar todo esse jardim, pois temos blocos e módulos autônomos para isolamento de dados. Podemos colocar tudo isso em nosso próprio módulo e não precisaremos nos preocupar com o acesso a dados.

Os fechamentos causam efeitos colaterais, o que não é muito bom, pois as práticas recomendadas e o bom senso nos instruem a evitá-los sempre que possível. Eles dificultam o teste de funções que não estão limpas nesse caso.

Além disso, você não deve produzir funções aninhadas quando isso puder ser evitado: com elas, o código se torna mais confuso do que sem elas.
A melhor alternativa é substituí-los por módulos:

let count = 0;
export const id = () => {
 ++this.count;
 return `id_${count}`
}

No código acima, temos a mesma declaração para a variável count e exportamos a função id () para que ela esteja disponível para outros módulos. Então, ocultamos count e open id (), como queríamos, apenas sem usar IIFE. Como resultado, temos menos aninhamento e nos livramos da necessidade de definir outra função e executá-la.

Podemos criar aliases para variáveis de maneira diferente.

Poderíamos escrever isso:

window.$ = function foo() {
 // ...
};(function($) {
 // ...
})(jQuery);

Mas agora não há necessidade de usar o IIFE para criar aliases. Usando módulos, podemos simplesmente importar uma variável com um nome diferente, criando assim um alias para ela.

E então apenas escreva:

import { $ as jQuery } from "jquery";
const $ = () => {};

Além disso, você não deve adicionar novas propriedades ao objeto de janela, pois isso polui o escopo global.

Podemos facilmente obter um objeto global.

Com o advento do globalThis, não precisamos nos preocupar com o nome do objeto global em vários ambientes, pois ele se torna o padrão.

Poderíamos usar o IIFE para capturar um objeto global:

(function(global) {
 // ...
})(this);

Mas agora isso não é necessário. Sim, e antes era possível ficar sem isso, basta escrever a seguinte linha:

const globalObj = self || window || global;

Para ser mais preciso, você pode escrever o seguinte:

const getGlobal = () => {
 if (typeof self !== 'undefined') { return self; }
 if (typeof window !== 'undefined') { return window; }
 if (typeof global !== 'undefined') { return global; }
 throw new Error('unable to locate global object');
};

E você não pode adicionar uma chamada de função adicional e aninhamento que aparece ao usar o IIFE.

Podemos facilitar a minificação

Com os módulos JavaScript, não precisamos mais separar o restante do código do IIFE para minimizar nossos arquivos corretamente.

O Webpack, o Browserify, o Parcel, o Rollup e assim por diante podem funcionar corretamente com os módulos, portanto, devemos usá-los para criar um código mais limpo.

Conclusão

É hora de parar de usar IIFE em nosso código. Isso adiciona funcionalidade extra e aninhamento redundante.

Além disso, agora isso é um anacronismo: o IIFE foi usado mesmo antes do advento e uso generalizado de módulos em JavaScript. Em 2020, devemos usar módulos e blocos autônomos para separar o código.

Para impedir o acesso externo a variáveis dentro do módulo, podemos usar escopos de bloco.

Por que é hora de parar de usar o JavaScript IIFE

Podemos declarar variáveis ​​dentro de blocos autônomos