Expresiones de función invocadas inmediatamente (IIFE) de JavaScript

Una expresión de función invocada inmediatamente es una forma de ejecutar funciones inmediatamente, tan pronto como se crean. Los IIFE son muy útiles porque no contaminan el objeto global y son una forma sencilla de aislar declaraciones de variables


UnExpresión de función invocada inmediatamente(IIFE para amigos) es una forma de ejecutar funciones inmediatamente, tan pronto como se crean.

Los IIFE son muy útiles porqueno contaminan el objeto globaly son una forma sencilla deaislar declaraciones de variables.

Esta es la sintaxis que define un IIFE:

(function() {
  /* */
})()

Los IIFE también se pueden definir con funciones de flecha:

(() => {
  /* */
})()

Básicamente tenemos una función definida entre paréntesis, y luego agregamos()para ejecutar esa función:(/* function */)().

Esos paréntesis envolventes son en realidad los que hacen que nuestra función, internamente, se considere una expresión. De lo contrario, la declaración de la función no sería válida, porque no especificamos ningún nombre:

Invalid function declaration

Las declaraciones de función quieren un nombre, mientras que las expresiones de función no lo requieren.

También puede poner los paréntesis de invocacióndentrola expresión paréntesis, no hay diferencia, solo una preferencia de estilo:

(function() {
  /* */
}())

(() => { /* */ }())

Sintaxis alternativa usando operadores unarios

Hay una sintaxis más extraña que puede usar para crear un IIFE, pero rara vez se usa en el mundo real y se basa en el uso dealgunaoperador unario:

-(function() {
  /* */
})() +
  (function() {
    /* */
  })()

~(function() { /* */ })()

!(function() { /* */ })()

(no funciona con funciones de flecha)

Nombrado IIFE

Un IIFE también puede denominarse funciones regulares (no funciones de flecha). Esto no cambia el hecho de que la función no se "filtra" al alcance global y no se puede invocar nuevamente después de su ejecución:

(function doSomething() {
  /* */
})()

IIFE que comienzan con punto y coma

Es posible que vea esto en la naturaleza:

;(function() {
  /* */
})()

Esto evita problemas al concatenar ciegamente dos archivos JavaScript. Dado que JavaScript no requiere punto y coma, puede concatenar con un archivo con algunas declaraciones en su última línea que provoquen un error de sintaxis.

Este problema se resuelve esencialmente con paquetes de código "inteligentes" comopaquete web.


Más tutoriales de js: