Todos los misterios de IIFE (Inmediately-invoked function expressions)

Nombre jodido si los hay y puede asustar un poco al principio, pero este concepto (IIFE) es mucho mas fácil de lo que pensás. Básicamente, significa ejecutar una función ni bien la creás, ¡así de fácil!.

Y vos te preguntarás… ¿para qué quiero hacer tal cosa?, ¿de qué me sirve?, ¿qué problemas resuelve? ¡Seguí leyendo para enterarte!

Inmediate Invoke Function Expresion (o IIFE) es el patrón para modular en ECMAScript 5 o ES5 (no te asustes, es otra forma en que se conoce al Javascript viejo) es IIFE. Ésta sería la forma rebuscada de modularizar en Javascript, cuando no contábamos con ninguna herramienta para modularizar.

Cómo creamos una IIFE

Como sabrás, una Function Expresion (las ultimas dos letritas de FE) es una forma particular de crear una función en Javascript. Consiste en crear una función y asignarla a una variable (no olvidemos que las funciones son objetos en Javascript):

var f = function() {}

Recordemos que la otra forma de declarar una función es Function Statement, en donde declaramos una función, pero no retornamos ninguna función para asignarla a ninguna variable:

function f() {}

Volviendo a las Function Expresion, nosotros podríamos declarar la función PERO sin asignarla a ninguna variable, algo así:

function() {}

Pero acá tenemos un problema, ya que ésta función no tiene ningún nombre y Javascript no me deja hacer eso, me arroja el error:

Uncaught SyntaxError: Unexpected token (

Porque el motor de Javascript está esperando que después de la palabra «function» venga el nombre de la función, o que esta expresión sea asignada en una variable, como ya mostramos antes.

La forma que podemos declarar una Function Expresion SIN tener que asignar esa función a una variable es poniendo todo entre paréntesis:

(function () {})

Fijáte bien que tenemos una Function Expresion y es anónima (porque no tiene ningún nombre). Fijáte también que esa función no fue ejecutada ni nada, sólo existe en memoria pero nadie la ejecutó, de hecho, así como está, nadie va a poder ejecutarla ya que no tiene nombre y no hay forma de ejecutarla sin tener una referencia a esa función.

Entonces… ¿cómo la ejecutamos? Para poder ejecutar la función en el mismo momento en que la creamos, al igual que con cualquier otra función, se puede invocar con paréntesis de la siguiente forma:

(function() {})()

Fijáte que ahora tenemos una Function Expresion (anónima) y que en la misma línea la estamos ejecutando (la ejecutamos de la misma forma que ejecutamos a cualquier otra función, de hecho con paréntesis «()».

Resumiendo todos los pasos:

Es más, podemos pasarle un parámetro a la función, de la siguiente forma:

(function(parametro) {

})('Hola');

Lo que hacemos es declarar una función que recibe el parámetro «parametro«, y la estamos ejecutando con el parámetro ‘Hola’.

IIFE y haciendo el código mas seguro

Como sabrán, si dentro de una función declaramos una variable de la siguiente manera:

function a() {
    var miVariable=1;
}

esta variable se vuelve privada para esa función, o sea, miVariable no puede ser accedida en el Execution Context Global. Entonces, ¿cómo hacemos para crear «bloques seguros de código» donde las variables que cree sean privadas?: usando IIFE.

(function () {
    var miVariable=1;
})()

function a() {
    var miVariable=1;
}
a();

• Primero, tenés que acordarte de ejecutar la función después de crearla. Y… ¿qué pasa si sólo querés ejecutar ese bloque de código UNA sola vez?. Con IIFE te aseguras de crear el execution context de la IIFE y cuando nadie mas necesite ese execution context este se destruye automáticamente.
• Estás ocupando espacio en memoria para esa función. En cambio, si usás IIFE ese espacio no se crea, ya que no se guarda en ninguna variable la función que estás creando y ejecutando al mismo tiempo.
• Podés llegar a tener una colisión de nombre en tus funciones si empezás a crear funciones una y otra vez sólo para crear bloques seguros de código.
• Y por último, pero no menos importante, tu código queda mucho mas limpio y entendible.

Por lo dicho anteriormente se usa IIFE, acá podes ver cómo crean los Execution Context cuando usas IIFE:

Conclusiones

IIFE es una forma muy práctica y potente para crear bloques de código privados. Si bien en estos días hay muchas otras técnicas para hacer tu código mas seguro, es bueno conocer esta forma de hacerlo, ya que muchas librerías de Javascript siguen usando esta forma. Ya sea por motivos de compatibilidad, por costumbre o por desconocer otra forma de hacerlo las IIFE siguen vigentes en estos días así que conocerlas te va ayudar muchísimo tanto para leer código de otras personas como para escribir los tuyos.