✊🏾 📜 ♟️ ¿Por qué es hora de dejar de usar JavaScript IIFE? 🥐 🛁 🧑

La función de expresión de función invocada inmediatamente (IIFE) en JavaScript es una construcción que le permite llamar a una función inmediatamente después de que se define.

imagen

En este artículo, entenderemos por qué vale la pena abandonar el uso de IIFE, a pesar de sus méritos anteriores.

Podemos declarar variables dentro de bloques autónomos

Desde que se creó el estándar ES6, podemos declarar variables y constantes dentro de un bloque con let y const. Junto con este estándar, también fue posible asignar variables y constantes en bloques autónomos, inaccesibles desde el exterior.

Por ejemplo:

{
 let x = 1;
}

Entonces x no será accesible externamente. Esto es claramente mejor que:

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

Ahora que ES6 es compatible con casi todos los navegadores modernos, debemos dejar de usar IIFE para separar las variables del mundo exterior. Otra forma de aislar variables es con módulos que ahora tampoco tienen problemas para admitirlas. Hasta que los exportemos, no estarán disponibles para otros módulos.

Podemos deshacernos de casi todos los cierres

El cierre es un mecanismo por el cual una función recuerda sus variables externas y puede acceder a ellas. Si dentro de la función creamos otra y la devolvemos, entonces la función devuelta podrá acceder a variables externas que son internas a la función externa.

Por ejemplo, aquí podemos obtener algunos efectos secundarios:

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

Nuevamente, ahora no tiene sentido cercar todo este jardín, ya que tenemos bloques y módulos autónomos para el aislamiento de datos. Podemos poner todo esto en nuestro propio módulo, luego no tendremos que preocuparnos por el acceso a los datos.

Los cierres causan efectos secundarios, que no son muy buenos, ya que las mejores prácticas y el sentido común nos indican que los evitemos siempre que sea posible. Hacen que sea difícil probar funciones que no están limpias en este caso.

Además, no debe producir funciones anidadas cuando esto se puede evitar: con ellas, el código se vuelve más confuso que sin ellas.
La mejor alternativa es reemplazarlos con módulos:

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

En el código anterior, tenemos la misma declaración para la variable count y exportamos la función id () para que esté disponible para otros módulos. Entonces, ocultamos count y open id (), como queríamos, solo sin usar IIFE. Como resultado, obtenemos menos anidamiento y eliminamos la necesidad de definir otra función y ejecutarla.

Podemos crear alias para variables de manera diferente.

Podríamos escribir esto:

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

Pero ahora no hay necesidad de usar IIFE para crear alias. Usando módulos, simplemente podemos importar una variable con un nombre diferente, creando así un alias para ella.

Y luego solo escribe:

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

Además, no debe agregar nuevas propiedades al objeto de ventana, ya que esto contamina el alcance global.

Podemos obtener fácilmente un objeto global.

Con el advenimiento de globalThis, no tenemos que preocuparnos por el nombre del objeto global en varios entornos a medida que se convierte en el estándar.

Podríamos usar IIFE para capturar un objeto global:

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

Pero ahora esto no es necesario. Sí, y antes de que fuera posible prescindir de esto, simplemente escribiendo la siguiente línea:

const globalObj = self || window || global;

Para ser más precisos, puedes escribir esto:

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');
};

Y luego no puede agregar una llamada de función adicional y anidamiento que aparece cuando se usa IIFE.

Podemos facilitar la minificación

Con los módulos de JavaScript, ya no necesitamos separar el resto del código de IIFE para minimizar nuestros archivos correctamente.

Webpack, Browserify, Parcel, Rollup, etc. pueden funcionar correctamente con los módulos, por lo que debemos usarlos para crear un código más limpio.

Conclusión

Es hora de dejar de usar IIFE en nuestro código. Esto agrega funcionalidad adicional y anidamiento redundante.

Además, ahora esto es un anacronismo: IIFE se usó incluso antes del advenimiento y el uso generalizado de módulos en JavaScript. En 2020, debemos usar módulos y bloques autónomos para separar el código.

Para evitar el acceso externo a variables dentro del módulo, podemos usar ámbitos de bloque.