Función autoejecutable en JavaScript: ¿Que es y como usar? Ejemplos.

Una función autoejecutable en JavaScript es una forma elegante de ejecutar código inmediatamente sin contaminar el ámbito global. ¿Qué hace y para qué sirve? Permite encapsular lógica sin dejar variables expuestas. Descubre qué es, cómo usarla y un ejemplo práctico que te ayudará a aplicarla en tus proyectos.

1. ¿Qué es una función autoejecutable (IIFE) en JavaScript?

Una función autoejecutable (también conocida como IIFE, por sus siglas en inglés Immediately Invoked Function Expression), es una función que se define y se ejecuta automáticamente en cuanto el código la encuentra, sin necesidad de que alguien la llame manualmente.

1. Ejemplo de su funcionamiento:
2. ¿Para qué es útil estas función autoejecutable en JavaScript?
3. ¿Entonces estas funciones no pueden ser reusadas mas adelante en código o programa?

1.1. Ejemplo de su funcionamiento:

Para entenderlo mejor, primero veamos qué es una función en JavaScript. Una función es un bloque de código que se ejecuta solo cuando alguien la llama. Por ejemplo:

function saludar() {
    console.log("¡Hola, mundo!");
}

saludar(); // Aquí estamos llamando a la función para que se ejecuteLenguaje del código: JavaScript (javascript)

Pero con una función autoejecutable, no necesitamos llamarla. Se ejecuta por sí sola en cuanto el navegador lee el código.

La sintaxis básica es esta (ampliaremos):

(function() {
    console.log("¡Hola, mundo!");
})();Lenguaje del código: JavaScript (javascript)

💡 ¿QUÉ ESTA PASANDO AQUÍ?

1. Los paréntesis alrededor de la función → (function() { ... })
   • Esto convierte la función en una IIFE en lugar de una función normal.
2. Los paréntesis al final → ();
   • Estos paréntesis le dicen a JavaScript que debe ejecutar la función inmediatamente.

📌 EJEMPLO ESCENARIO EN LA VIDA REAL:
Imagina que quieres preparar café automáticamente en cuanto entras a la cocina. Normalmente, presionarías un botón para encender la cafetera (llamar la función), pero con una cafetera automática, en cuanto detecta movimiento, empieza a preparar el café sola (función autoejecutable).

1.2. ¿Para qué es útil estas función autoejecutable en JavaScript?

Estas son algunos de sus usos más comunes (ampliaremos):

• Para ejecutar código sin ensuciar el espacio global (evitar conflictos con otras variables y funciones).
• Para encapsular código y evitar que se pueda modificar desde fuera.
• Para ejecutar código inmediatamente, como inicializar configuraciones o cargar datos.

Otra forma común de escribir una función autoejecutable es:

(() => {
    console.log("¡Hola, mundo!");
})();Lenguaje del código: JavaScript (javascript)

Aquí usamos una función flecha en lugar de function. Es más moderna y compacta.

1.3. ¿Entonces estas funciones no pueden ser reusadas mas adelante en código o programa?

Exactamente. Una función autoejecutable (IIFE) está diseñada para ejecutarse inmediatamente en el momento en que se define.

📌Una vez que se ha ejecutado, no se almacena en ninguna variable o referencia (a menos que EXPLÍCITAMENTE LO HAGAS), por lo que no puedes invocarla nuevamente más adelante en el programa.

¿Y si quiero invocarla mas adelante como lo hago?

Si quieres invocar una función autoejecutable (IIFE) más adelante, debes almacenar una referencia a ella en una variable, en lugar de ejecutarla inmediatamente.

¿Cómo hacerlo?

const miFuncion = (function() {
    return function() {
        console.log("Ejecutando función...");
    };
})();

miFuncion(); // "Ejecutando función..."
miFuncion(); // "Ejecutando función..."Lenguaje del código: JavaScript (javascript)

¿Qué pasó aquí?

1. La IIFE se ejecuta inmediatamente.
2. Retorna una función, que es almacenada en miFuncion.
3. Ahora puedes ejecutar miFuncion() cuando quieras.

¿Es recomendable hacer esto?

💡 No es la forma más común de usar IIFE. Si necesitas una función reutilizable, es mejor definirla directamente en lugar de encapsularla en una IIFE.

🚀 Usa una IIFE solo cuando necesites ejecutar código inmediatamente sin contaminar el scope global.

2. ¿Para que sirven las funciones autoejecutables (IIFE) en JS?

Si bien, en el punto 1.2. ya nombramos algunos, aquí profundizamos sobre ellas y sus usos comunes:

1. Evitar contaminar el espacio global:
2. Ejecutar código inmediatamente:
3. Crear módulos antes de ES6:

2.1. Evitar contaminar el espacio global:

En JavaScript, todas las variables y funciones definidas fuera de un bloque específico (como una función) se almacenan en el espacio global.

Si hay muchas variables en este espacio, pueden sobrescribirse unas a otras accidentalmente, causando errores en el código.

🔥Las funciones autoejecutables ayudan a encapsular código, evitando que sus variables y funciones queden expuestas en el espacio global.

2.1.1. Ejemplo de como evitan contaminar el espacio global

🚨 PROBLEMA sin función autoejecutable: Contaminación del espacio global

var contador = 0; // Variable global

function incrementar() {
    contador++;
    console.log("Contador:", contador);
}

incrementar(); // Contador: 1
incrementar(); // Contador: 2

// Otra parte del código también usa 'contador'
var contador = "error"; // ❌ Sobreescribe la variable original
incrementar(); // ❌ Error inesperadoLenguaje del código: JavaScript (javascript)

¿Qué pasó aquí?

• contador se definió en el espacio global y otra parte del código lo sobrescribió accidentalmente con "error".
• Esto rompe la función incrementar() y causa errores inesperados.

✅ SOLUCIÓN con función autoejecutable:

(function() {
    var contador = 0; // Variable privada, no afecta el espacio global

    function incrementar() {
        contador++;
        console.log("Contador:", contador);
    }

    incrementar(); // Contador: 1
    incrementar(); // Contador: 2
})();

// Intentamos acceder a 'contador' fuera de la función
console.log(typeof contador); // ❌ undefined (ya no está en el espacio global)Lenguaje del código: JavaScript (javascript)

Explicación de la solución:

• La función autoejecutable crea un ámbito privado.
• contador solo existe dentro de la función, por lo que no puede ser sobrescrito desde afuera.
• El código funciona sin afectar el resto del programa.

2.1.2. Casos comunes en los que se usa esta práctica

1️⃣ Evitar conflictos entre scripts de terceros

• Si usas bibliotecas como jQuery, Bootstrap o React en la misma página, cada una define variables globales.
• Usar funciones autoejecutables evita que se pisen unas con otras.

Ejemplo:

(function() {
    var $ = "Mi propia versión de jQuery"; // No interfiere con el jQuery real
    console.log($); // "Mi propia versión de jQuery"
})();

console.log(typeof $); // ❌ undefined (jQuery real sigue intacto)Lenguaje del código: JavaScript (javascript)

2️⃣ Crear módulos antes de ES6

• Antes de import/export, los desarrolladores usaban IIFE para organizar código en módulos independientes.

3️⃣ Ejecutar código sin ensuciar el espacio global

• Por ejemplo, si un sitio web necesita ejecutar un código una sola vez al cargar la página.

Ejemplo:

(function() {
    console.log("Bienvenido al sitio web");
})();Lenguaje del código: JavaScript (javascript)

4️⃣ Evitar conflictos de nombres en proyectos grandes

• Si varias personas trabajan en un mismo código, usar IIFE ayuda a evitar nombres de variables duplicados.

2.1.3. Conclusión

Las funciones autoejecutables son una excelente herramienta para proteger variables, evitar conflictos y mantener el código limpio en proyectos pequeños y grandes. Aunque hoy en día usamos módulos ES6, sigue siendo una técnica útil en ciertos casos.

2.2. Ejecutar código inmediatamente:

Si bien, este es su fin principal y el cual ya nombramos al comienzo, a continuación dejamos algunos ejemplos de usos comunes:

2.2.1. Casos comunes donde se usa esta práctica

1️⃣ Ejecutar código en cuanto se carga la página

• Ideal para mostrar mensajes de bienvenida, inicializar configuraciones o verificar si un usuario está autenticado.

2️⃣ Configurar variables antes de que el usuario interactúe

• Se puede usar para definir variables que solo se usen una vez y no se necesiten después.
• Ejemplo:

(function() {
    var configuracion = { tema: "oscuro", idioma: "es" };
    console.log("Configuración cargada:", configuracion);
})();Lenguaje del código: JavaScript (javascript)

3️⃣ Evitar que el código pueda ser llamado nuevamente accidentalmente

• Al no quedar almacenado en una variable global, nadie puede llamarlo otra vez.

4️⃣ Cargar datos iniciales en una aplicación web

• Se puede usar para obtener datos desde una API en cuanto la página se carga.
• Ejemplo:

(async function() {
    let respuesta = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    let datos = await respuesta.json();
    console.log("Datos cargados:", datos);
})();Lenguaje del código: JavaScript (javascript)

5️⃣ Evitar conflictos con otras bibliotecas o scripts

• En proyectos grandes, una IIFE protege el código de interferencias con otras partes del programa.

2.2.2. Conclusión:

Las funciones autoejecutables son una herramienta poderosa para ejecutar código inmediatamente, organizar el código y evitar errores. Aunque hoy en día usamos módulos ES6 para algunos de estos casos, las IIFE siguen siendo útiles en muchas situaciones.

2.3. Crear módulos antes de ES6:

Antes de la llegada de ES6 (ECMAScript 2015), JavaScript no tenía un sistema nativo de módulos (como import y export). Esto dificultaba organizar el código en archivos separados y reutilizar funciones sin contaminar el espacio global.

Para solucionar este problema, los desarrolladores usaban funciones autoejecutables (IIFE) para crear módulos.
Esto permitía:
✅ Encapsular variables y funciones dentro de un módulo.
✅ Evitar conflictos con otras partes del código.
✅ Controlar qué funciones eran públicas o privadas.

Hoy en día, usamos módulos ES6 (import/export), pero este método sigue siendo útil en proyectos donde no se pueden usar módulos modernos, como en navegadores antiguos.

2.3.1. Ejemplo con módulos y IIFE:

🔴 Problema sin módulos (variables globales desordenadas)

var nombre = "Juan";
var edad = 30;

function obtenerInfo() {
    return nombre + " tiene " + edad + " años.";
}

console.log(obtenerInfo()); // "Juan tiene 30 años."Lenguaje del código: JavaScript (javascript)

Problema:

• nombre y edad están en el espacio global, por lo que otras partes del código pueden sobrescribirlas accidentalmente.
• No hay forma de ocultar nombre y edad para que sean privadas.

✅ Solución con Función Autoejecutable (IIFE) para crear un módulo

var Usuario = (function() {
    // Variables privadas dentro del módulo
    var nombre = "Juan";
    var edad = 30;

    // Métodos públicos que pueden ser usados fuera del módulo
    return {
        obtenerInfo: function() {
            return nombre + " tiene " + edad + " años.";
        }
    };
})();

console.log(Usuario.obtenerInfo()); // "Juan tiene 30 años."
console.log(typeof nombre); // ❌ undefined (no es accesible desde afuera)Lenguaje del código: JavaScript (javascript)

Explicación:
1️⃣ La función se ejecuta inmediatamente y crea un objeto con métodos públicos.
2️⃣ nombre y edad están protegidos dentro del módulo (no pueden ser accedidos desde afuera).
3️⃣ El objeto Usuario expone solo las funciones necesarias (obtenerInfo()), manteniendo las variables internas privadas.

2.3.2. Casos comunes donde se usaba esta práctica

1️⃣ Organizar código en módulos en aplicaciones grandes

• En aplicaciones con muchos archivos, se creaban módulos separados para usuarios, productos, configuraciones, etc.
• Ejemplo de un módulo de configuración:

var Config = (function() {
    var tema = "oscuro";
    var idioma = "es";

    return {
        obtenerTema: function() { return tema; },
        obtenerIdioma: function() { return idioma; }
    };
})();

console.log(Config.obtenerTema()); // "oscuro"Lenguaje del código: JavaScript (javascript)

2️⃣ Crear bibliotecas reutilizables sin afectar el espacio global

• Se usaba para crear librerías sin que interfieran con otras.
• Ejemplo:

var MiLibreria = (function() {
    return {
        saludar: function(nombre) {
            console.log("Hola, " + nombre);
        }
    };
})();

MiLibreria.saludar("Carlos"); // "Hola, Carlos"Lenguaje del código: JavaScript (javascript)

3️⃣ Proteger variables de cambios accidentales

• Como las variables dentro de la IIFE son privadas, se evita que sean modificadas por error.

2.3.3. Conclusión

Antes de los módulos ES6, las funciones autoejecutables eran una de las mejores maneras de organizar código y crear módulos en JavaScript. Aunque ahora tenemos import/export, este método sigue siendo útil en proyectos con navegadores antiguos o donde los módulos ES6 no son compatibles.

3. ¿Cómo crear una función autoejecutable?

Aquí dejamos una explicación sobres las DIFERENTES MANERAS en las que podemos hacer una función autoejecutable en JavaScript:

1. Función anónima autoejecutable.
2. IIFE con Función Flecha (ES6)
3. Función autoejecutable con nombre
4. IIFE con parámetros
5. IIFE con retorno de valor
6. Conclusión:

3.1. Función anónima autoejecutable.

(function() {
    console.log("Hola desde una IIFE anónima");
})();Lenguaje del código: JavaScript (javascript)

📌 Explicación:

• La función está encerrada entre paréntesis (function() {...}) para convertirla en una expresión de función.
• No tiene nombre, por lo que se considera una función anónima.
• Los paréntesis finales (); hacen que la función se ejecute inmediatamente después de ser definida.
• Se utiliza cuando queremos ejecutar código sin necesidad de reutilizar la función más adelante.

🖥️ Ejemplo de uso:
Supongamos que queremos ejecutar código de configuración inicial en una aplicación sin dejar variables globales.

(function() {
    let mensaje = "Inicializando...";
    console.log(mensaje);
})(); // "Inicializando..."Lenguaje del código: JavaScript (javascript)

3.2. IIFE con función flecha (ES6)

(() => {
    console.log("Soy una IIFE con función de flecha");
})();Lenguaje del código: JavaScript (javascript)

📌 Explicación:

• Es una versión más concisa de una IIFE usando una función flecha (ES6).
• No usa la palabra clave function, lo que la hace más corta y moderna.
• Se usa cuando necesitamos una IIFE simple y rápida, como para manejar eventos o ejecutar código de inmediato.

🖥️ Ejemplo de uso:

(() => console.log("Ejecutado de inmediato"))();Lenguaje del código: JavaScript (javascript)

También se pueden pasar parámetros:

((nombre) => console.log(`Hola, ${nombre}`))("Alejandro");
// Salida: "Hola, Alejandro"Lenguaje del código: JavaScript (javascript)

3.3. Función autoejecutable con nombre

(function mensaje() {
    console.log("Soy una IIFE con nombre, pero no puedo ser llamada después");
})();Lenguaje del código: JavaScript (javascript)

📌 Explicación:

• Esta es una IIFE con nombre (mensaje), pero el nombre solo es accesible dentro de la propia función.
• Aunque parece que se podría llamar con mensaje();, esto no es posible, ya que la función no se expone al ámbito global.
• Se usa cuando se necesita depurar el código más fácilmente, ya que el nombre de la función aparecerá en los errores o en el stack trace.

🖥️ Ejemplo de uso:

(function iniciar() {
    console.log("Ejecutando proceso...");
})();
// iniciar(); ❌ Error: iniciar is not definedLenguaje del código: JavaScript (javascript)

3.4. IIFE con parámetros

(function(nombre) {
    console.log(`Hola, ${nombre}`);
})("Manuel");Lenguaje del código: JavaScript (javascript)

📌 Explicación:

• La función recibe un parámetro nombre.
• Al final de la IIFE se pasan argumentos ("Manuel"), que son utilizados dentro de la función.
  • Descubre que son los parámetros y argumentos en JavaScript.
• Se usa cuando necesitamos pasar valores a la IIFE sin afectar variables globales.

🖥️ Ejemplo de uso:

(function(a, b) {
    console.log(`La suma es: ${a + b}`);
})(5, 3);
// Salida: "La suma es: 8"Lenguaje del código: JavaScript (javascript)

3.5. IIFE con retorno de valor

const resultado = (function() {
    return "Valor retornado";
})();
console.log(resultado); // "Valor retornado"Lenguaje del código: JavaScript (javascript)

📌 Explicación:

• La IIFE retorna un valor ("Valor retornado") y lo almacena en la variable resultado.
  • Descubre que es el retorno de valor en JavaScript.
• Esto nos permite ejecutar código dentro de la IIFE y guardar su resultado para usarlo más adelante.
• Se usa cuando queremos inicializar valores sin exponer lógica interna al ámbito global.

🖥️ Ejemplo de uso:

const configuracion = (function() {
    return {
        apiKey: "123ABC",
        modo: "producción"
    };
})();

console.log(configuracion.apiKey); // "123ABC"
console.log(configuracion.modo); // "producción"Lenguaje del código: JavaScript (javascript)

Aquí la configuración de la aplicación queda protegida dentro de la IIFE, evitando que variables globales sean modificadas accidentalmente.

3.6. Conclusión:

Cada tipo de IIFE tiene su utilidad según el contexto:

1. Función anónima autoejecutable: Para ejecutar código inmediatamente sin necesidad de reutilización.
2. IIFE con función flecha: Sintaxis más moderna y concisa.
3. Función autoejecutable con nombre: Facilita la depuración.
4. IIFE con parámetros: Permite pasar valores sin usar variables globales.
5. IIFE con retorno de valor: Para guardar el resultado en una variable y usarlo después.

4. Uso de IIFE con variables y ámbito (Scope)

¿QUÉ ES EL ÁMBITO?

En JavaScript, el ámbito (scope) determina la accesibilidad de variables y funciones en diferentes partes del código. Dentro de una IIFE, las variables que se declaran solo existen dentro de esa función y no afectan el resto del código.

1. ¿Qué pasa con el scope cuando declaramos una variable dentro de una función autoejecutable?
2. ¿Qué pasa cuando declaramos una variable en el ámbito global?
3. ¿Podemos modificar una variable global desde una IIFE?
4. Buena práctica: Pasar variables a una IIFE para evitar el uso de variables globales
5. Conclusión sobre el uso de IIFE con variables y ámbito (Scope):

4.1. ¿Qué pasa con el scope cuando declaramos una variable dentro de una función autoejecutable?

Como ya dijimos, cuando declaramos variables dentro de una IIFE, estas no son accesibles fuera de la función porque están encerradas dentro de su propio ámbito léxico.

Esto ayuda a evitar conflictos con otras variables en el código global.

4.1.1. Ejemplo: Variable con scope local en una IIFE

(function() {
    let mensaje = "Hola desde una IIFE";
    console.log(mensaje); // "Hola desde una IIFE"
})();

console.log(mensaje); // ❌ Error: mensaje is not definedLenguaje del código: JavaScript (javascript)

📌 Explicación:

• La variable mensaje se declara dentro de la IIFE con let.
• Al ejecutarse, la función muestra "Hola desde una IIFE".
• Fuera de la IIFE, la variable no existe, por lo que arroja un error.

4.2. ¿Qué pasa cuando declaramos una variable en el ámbito global?

Cuando una variable está en el ámbito global, puede ser utilizada dentro de una IIFE, pero las variables dentro de una IIFE no afectan el ámbito global a menos que sean explícitamente expuestas.

¿QUÉ ES EL ÁMBITO GLOBAL? El ámbito global es el entorno principal en el que se ejecuta tu código. Las variables y funciones definidas fuera de cualquier función o bloque se pueden usar en cualquier parte del programa. En un navegador, por ejemplo, el objeto global es window, y todas las variables globales son propiedades de ese objeto.

4.2.1. Ejemplo: Acceder a una variable global desde una IIFE

let nombre = "Manuel";

(function() {
    console.log(`Hola, ${nombre}`); // "Hola, Manuel"
})();Lenguaje del código: JavaScript (javascript)

📌 Explicación:

• La variable nombre está declarada en el ámbito global.
• La IIFE puede acceder a nombre porque JavaScript primero busca la variable en su propio scope y luego en el global.

4.2.2. Ejemplo: Evitar la modificación del ámbito global

let contador = 10;

(function() {
    let contador = 0; // Variable con el mismo nombre en el scope local
    contador++;
    console.log(`Dentro de la IIFE: ${contador}`); // "Dentro de la IIFE: 1"
})();

console.log(`Fuera de la IIFE: ${contador}`); // "Fuera de la IIFE: 10"Lenguaje del código: JavaScript (javascript)

📌 Explicación:

• Hay dos variables llamadas contador:
  • Una global (contador = 10)
  • Otra local dentro de la IIFE (contador = 0)
• La IIFE usa su propia variable local en lugar de modificar la global.
• Fuera de la IIFE, la variable global permanece intacta.

Esto es útil para evitar que funciones sobrescriban variables globales accidentalmente.

4.3. ¿Podemos modificar una variable global desde una IIFE?

Si necesitamos modificar una variable global desde una IIFE, podemos hacerlo de manera explícita.

4.3.1. Ejemplo: Modificar una variable global desde una IIFE

let configuracion = {};

(function() {
    configuracion.modo = "producción";
    configuracion.version = "1.0.0";
})();

console.log(configuracion); // { modo: "producción", version: "1.0.0" }Lenguaje del código: JavaScript (javascript)

📌 Explicación:

• configuracion es un objeto global.
• La IIFE modifica sus propiedades sin redefinirlo completamente.
• Esto es útil para inicializar configuraciones sin exponer variables innecesarias.

4.4. Buena práctica: Pasar variables a una IIFE para evitar el uso de variables globales

A veces, en lugar de acceder directamente a variables globales, es mejor pasarlas como parámetros.

4.4.1. Ejemplo: Evitar el uso directo de variables globales

let usuario = "Alejandro";

(function(nombre) {
    console.log(`Bienvenido, ${nombre}`);
})(usuario);Lenguaje del código: JavaScript (javascript)

📌 Explicación:

• Se pasa la variable global usuario como argumento en la IIFE.
• La IIFE recibe el valor y lo usa dentro de su ámbito local.
• Esto evita que la función dependa directamente del ámbito global, lo que mejora la encapsulación y seguridad.

4.5. Conclusión sobre el uso de IIFE con variables y ámbito (Scope):

Las IIFE son una excelente herramienta para trabajar con variables y el ámbito (scope) en JavaScript:
✅ Crean un scope local, evitando conflictos con variables globales.
✅ Protegen el código, asegurando que variables y funciones no sean modificadas accidentalmente.
✅ Pueden acceder a variables globales si es necesario, pero sin contaminarlas.
✅ Permiten encapsular código sin afectar el resto del programa.

📌 Usa IIFE cuando necesites ejecutar código inmediatamente y mantener las variables aisladas del ámbito global. 🚀

5. Buena práctica: Pasar dependencias a una IIFE en JS.

¿A QUÉ NOS REFERIMOS CON DEPENDENCIA?

En JavaScript, una dependencia es cualquier variable, objeto o función externa que una función necesita para ejecutarse correctamente. Estas dependencias pueden ser valores globales, como window, document, console, u objetos de bibliotecas externas como jQuery, Lodash o Axios.

🔥Cuando usamos una IIFE, es una buena práctica pasar las dependencias como parámetros en lugar de acceder directamente a ellas dentro de la función.

1. ¿Por qué pasar dependencias a una función autoejecutable?
2. Ejemplos de usos de dependencias como parámetros
   • Ejemplo 1: Pasar window y document a una IIFE
   • Ejemplo 2: Pasar una biblioteca externa (jQuery)
   • Ejemplo 3: Pasar una dependencia personalizada
   • Ejemplo 4: Pasar console para evitar conflictos
3. Conclusión:

5.1. ¿Por qué pasar dependencias a una función autoejecutable?

Ventajas de pasar dependencias en una IIFE:
1️⃣ Evita el uso directo del ámbito global, reduciendo riesgos de colisiones de nombres.
2️⃣ Hace el código más flexible y reutilizable, ya que la IIFE no depende directamente de variables globales.
3️⃣ Optimiza el rendimiento, porque accede a las dependencias más rápido en su propio ámbito léxico.
4️⃣ Facilita pruebas y mantenimiento, ya que podemos pasar diferentes versiones de una dependencia sin modificar la IIFE.

5.2. Ejemplos de usos de dependencias como parámetros

5.2.1. Ejemplo 1: Pasar window y document a una IIFE

En este caso, pasamos window y document como parámetros para evitar acceder a ellos directamente dentro de la función.

(function(win, doc) {
    console.log("Ancho de la ventana:", win.innerWidth);
    console.log("Título del documento:", doc.title);
})(window, document);Lenguaje del código: JavaScript (javascript)

📌 Explicación:

• window y document son variables globales, pero en lugar de usarlas directamente, las pasamos como parámetros a la IIFE.
• Esto mejora el rendimiento, ya que JavaScript accede a los parámetros más rápido que a variables globales.
• También facilita pruebas, ya que podríamos llamar a la IIFE con versiones simuladas de window o document.

5.2.2. Ejemplo 2: Pasar una biblioteca externa (jQuery)

Las bibliotecas externas como jQuery suelen exponerse en el ámbito global (window.$ o window.jQuery). Para evitar depender de la variable global, podemos pasarla como argumento.

(function($) {
    $(document).ready(function() {
        console.log("El DOM está listo.");
    });
})(jQuery);Lenguaje del código: JavaScript (javascript)

📌 Explicación:

• La IIFE recibe jQuery como parámetro y lo usa como $, sin acceder directamente a la variable global.
• Esto permite que el código funcione incluso si la variable global de jQuery cambia o es redefinida.
• También ayuda en entornos donde jQuery podría no estar disponible en el window global, como en módulos ES6.

5.2.3. Ejemplo 3: Pasar una dependencia personalizada

Podemos usar IIFE para encapsular módulos y pasar dependencias personalizadas.

let config = {
    apiUrl: "https://api.ejemplo.com",
    modo: "producción"
};

(function(cfg) {
    console.log(`Conectando a la API en modo ${cfg.modo}: ${cfg.apiUrl}`);
})(config);Lenguaje del código: JavaScript (javascript)

📌 Explicación:

• config es un objeto global con datos de configuración.
• En lugar de acceder directamente a config, lo pasamos como parámetro a la IIFE.
• Esto mejora la modularidad, permitiendo pasar diferentes configuraciones sin modificar la función.

5.2.4. Ejemplo 4: Pasar console para evitar conflictos

Algunos entornos pueden redefinir console.log. Para evitar problemas, podemos pasar console como una dependencia segura.

(function(c) {
    c.log("Este mensaje usa una IIFE con console como dependencia.");
})(console);Lenguaje del código: JavaScript (javascript)

📌 Explicación:

• La función recibe console como parámetro y lo usa como c.
• Incluso si alguien modifica console.log en el global, esta función seguirá funcionando correctamente.

5.3. Conclusión:

💡 Pasar dependencias a una IIFE es una buena práctica que mejora la seguridad, rendimiento y modularidad del código.

✅ Evita el uso directo de variables globales, reduciendo riesgos de conflictos.
✅ Mejora el rendimiento, ya que las dependencias se acceden más rápido en el ámbito local.
✅ Hace el código más reutilizable, permitiendo cambiar dependencias sin modificar la lógica interna.
✅ Facilita pruebas unitarias, ya que podemos pasar objetos simulados en lugar de depender del entorno real.

6. Alternativas a las funciones autoejecutables en JavaScript moderno

En las versiones recientes de JavaScript, existen alternativas más modernas que pueden reemplazar a las IIFE en algunos casos.

Dos de las más comunes son:

1. Uso de bloques con let y const
2. Uso de módulos ES6 (import y export)
3. ¿Cuál es la mejor alternativa?
4. ¿Entonces en JS moderno no se usan mas estas funciones autoejecutables?

A continuación, te explico cada una con ejemplos detallados.

6.1. Uso de bloques con let y const

En JavaScript moderno, podemos encapsular variables sin necesidad de usar una IIFE, gracias a los bloques de código {} y las variables declaradas con let o const.

6.1.1. Ejemplo sin IIFE (Usando bloques con let y const)

{
    let mensaje = "Hola, mundo!";
    console.log(mensaje); // "Hola, mundo!"
}

// console.log(mensaje); ❌ Error: "mensaje" no está definido fuera del bloque.Lenguaje del código: JavaScript (javascript)

Explicación:

1️⃣ La variable mensaje solo existe dentro del bloque {} y no se puede acceder fuera de él.
2️⃣ Evitamos contaminar el espacio global, como lo haríamos con una IIFE.

6.1.2. ¿Cuándo usar esto?

✔️ Cuando necesitas un ámbito de bloque para variables temporales.
✔️ Cuando no necesitas una función, pero sí encapsulación de variables.

6.2. Uso de módulos ES6 (import y export)

Hoy en día, los módulos ES6 permiten encapsular código sin necesidad de IIFE.

¿QUÉ ES UN MÓDULO? Un módulo en JavaScript es simplemente un archivo separado con su propio ámbito.

6.2.1. Ejemplo de módulo ES6

🔵 Archivo config.js (Módulo de Configuración)

export const config = {
    apiUrl: "https://api.ejemplo.com",
    version: "1.0.0"
};Lenguaje del código: JavaScript (javascript)

🔵 Archivo app.js (Importando el Módulo)

import { config } from "./config.js";

console.log(config.apiUrl); // "https://api.ejemplo.com"Lenguaje del código: JavaScript (javascript)

Explicación:

1️⃣ export permite compartir variables o funciones entre archivos.
2️⃣ import nos deja usar esos datos sin necesidad de una IIFE.
3️⃣ Se evita la contaminación del espacio global, ya que cada módulo tiene su propio ámbito.

6.2.2. ¿Cuándo usar esto?

✔️ Cuando trabajas con código modular en proyectos grandes.
✔️ Cuando necesitas separar lógica en distintos archivos.

6.3. ¿Cuál es la mejor alternativa?

📌 Si solo necesitas encapsular variables temporales → Usa un bloque con let o const.
📌 Si estás organizando código en diferentes archivos → Usa módulos ES6 (import y export).
📌 Si necesitas ejecutar código inmediatamente → Aún puedes usar una IIFE en ciertos casos.

6.4. ¿Entonces en JS moderno no se usan mas estas funciones autoejecutables?

Sí se usan, aunque JavaScript ha evolucionado con módulos ES6, las IIFE siguen siendo útiles en ciertos casos:

🔹 Para ejecutar código de inmediato sin declarar funciones globales.
🔹 Para evitar conflictos de nombres entre bibliotecas o scripts.
🔹 Para controlar el alcance de variables en eventos y loops.
🔹 Para encapsular código en entornos sin soporte para módulos ES6.

CONCLUSIÓN:

🔥Si trabajas en proyectos modernos con módulos ES6 (import/export), no necesitas IIFE. Pero si trabajas con código legacy, bibliotecas o eventos asíncronos, aún son una herramienta valiosa. 🚀

7. Errores comunes al usar IIFE en JavaScript

Las funciones autoejecutable son muy útiles, pero si no se usan correctamente, pueden generar errores difíciles de depurar.

A continuación, te explico los errores más comunes al trabajar con IIFE, junto con ejemplos y sus respectivas soluciones.

1. Error 1: Olvidar los paréntesis externos
2. Error 2: No terminar con punto y coma (;)
3. Error 3: Intentar llamar una IIFE por su nombre
4. Error 4: Usar this dentro de una IIFE en modo estricto («use strict»)
5. Error 5: No capturar el valor retornado
6. Error 6: Usar var en lugar de let o const
7. Conclusión de errores comunes usando IIFE:

7.1. Error 1: Olvidar los paréntesis externos

📌 PROBLEMA:
Una IIFE necesita estar encerrada entre paréntesis para que el motor de JavaScript la reconozca como una expresión de función y no como una declaración de función.

🚫 Código incorrecto:

function() {
    console.log("Error: No se puede declarar una función sin nombre así.");
}();Lenguaje del código: JavaScript (javascript)

Esto generará un SyntaxError, ya que JavaScript espera un nombre después de function.

💡 SOLUCIÓN:
Usar paréntesis alrededor de la función para convertirla en una expresión.

✅ Código corregido:

(function() {
    console.log("¡Ahora sí funciona!");
})();Lenguaje del código: JavaScript (javascript)

7.2. Error 2: No terminar con punto y coma (;)

📌 PROBLEMA:
Si una IIFE no termina con ;, puede causar errores si el código anterior no está correctamente delimitado.

🚫 Código incorrecto:

let mensaje = "Hola"
(function() {
    console.log("Esto causará un error.");
})();Lenguaje del código: JavaScript (javascript)

Como mensaje = "Hola" no tiene ;, el motor de JavaScript intenta interpretar la IIFE como parte de la asignación, generando un error.

💡 SOLUCIÓN:
Colocar un ; antes de la IIFE para asegurarse de que no se una con el código anterior.

✅ Código corregido:

let mensaje = "Hola";
(function() {
    console.log("Ahora funciona correctamente.");
})();Lenguaje del código: JavaScript (javascript)

7.3. Error 3: Intentar llamar una IIFE por su nombre

📌 PROBLEMA:
Si una IIFE tiene un nombre, ese nombre solo se puede usar dentro de la función, pero no se puede invocar desde afuera.

🚫 Código incorrecto:

(function saludo() {
    console.log("Hola desde una IIFE con nombre");
})();

saludo(); // ❌ Esto generará un error: saludo is not definedLenguaje del código: JavaScript (javascript)

saludo() no está disponible en el ámbito global porque está dentro de la IIFE.

💡 SOLUCIÓN:
Si necesitas reutilizar la función, no la encierres en una IIFE.

✅ Código corregido:

function saludo() {
    console.log("Hola desde una función normal");
}

saludo(); // ✅ Ahora sí se puede llamarLenguaje del código: JavaScript (javascript)

7.4. Error 4: Usar this dentro de una IIFE en modo estricto ("use strict")

📌 PROBLEMA:
En modo estricto ("use strict"), this dentro de una IIFE no hace referencia a window, sino que es undefined.

• Descubre qué es el modo estricto ("use strict"),
• Descubre qué significa this en JavaScript.

🚫 Código incorrecto:

(function() {
    "use strict";
    console.log(this); // ❌ undefined en lugar de `window`
})();Lenguaje del código: JavaScript (javascript)

Si esperas que this sea window, el código fallará en modo estricto.

💡 SOLUCIÓN:
Si necesitas this como window, pásalo como parámetro.

✅ Código corregido:

(function(win) {
    console.log(win === window); // ✅ true
})(window);Lenguaje del código: JavaScript (javascript)

7.5. Error 5: No capturar el valor retornado

📌 PROBLEMA:
Si una IIFE retorna un valor, pero no lo almacenamos en una variable, perdemos el resultado.

🚫 Código incorrecto:

(function() {
    return "Valor importante";
})();Lenguaje del código: JavaScript (javascript)

El valor "Valor importante" se pierde porque no se guarda en ninguna variable.

💡 SOLUCIÓN:
Almacenar el resultado en una variable.

✅ Código corregido:

const resultado = (function() {
    return "Valor importante";
})();
console.log(resultado); // ✅ "Valor importante"Lenguaje del código: JavaScript (javascript)

7.6. Error 6: Usar var en lugar de let o const

📌 PROBLEMA:
Si dentro de una IIFE usamos var, la variable se eleva (hoisting) y se puede acceder desde fuera de la función, lo que puede causar problemas.

🚫 Código incorrecto:

(function() {
    var mensaje = "Este mensaje debería ser privado";
})();

console.log(mensaje); // ❌ Undefined en strict mode o accede a `mensaje` si no está en strict modeLenguaje del código: JavaScript (javascript)

var no crea un verdadero ámbito local dentro de una IIFE, lo que puede exponer variables accidentalmente.

💡 SOLUCIÓN:
Usar let o const en lugar de var.

✅ Código corregido:

(function() {
    let mensaje = "Este mensaje es privado";
    console.log(mensaje);
})();

// console.log(mensaje); ❌ Generará un error: mensaje is not definedLenguaje del código: JavaScript (javascript)

7.7. Conclusión de errores comunes usando IIFE:

✅ Olvidar los paréntesis externos.
✅ No usar ; antes de una IIFE.
✅ Intentar llamar una IIFE por su nombre.
✅ Usar this sin pasarlo como dependencia.
✅ No almacenar el valor retornado de una IIFE.
✅ Usar var en lugar de let o const.
✅ Usar await sin async.

8. ¿Se usan las funciones autoejecutables si tengo una web con WordPress?

Sí, en WordPress todavía se pueden usar funciones autoejecutables (IIFE) en varios casos, especialmente cuando trabajas con JavaScript personalizado dentro de temas o plugins.

1. Casos comunes donde se usan IIFE en WordPress
   • Evitar conflictos con otras bibliotecas
   • Crear código JavaScript en bloques personalizados
   • Agregar código en functions.php con wp_add_inline_script
   • Plugins de WordPress con JavaScript personalizado
2. Conclusión: ¿Se siguen usando las IIFE en WordPress?

8.1. Casos comunes donde se usan IIFE en WordPress

8.1.1. Evitar conflictos con otras bibliotecas

En WordPress, muchas veces se carga jQuery en modo sin conflictos (noConflict), lo que significa que el símbolo $ no está disponible globalmente.

Para solucionarlo, se usa una IIFE que recibe $ como parámetro:

✨ Ejemplo en WordPress: Usando jQuery en Modo Seguro

(function($) {
    $(document).ready(function() {
        console.log("Este código jQuery es seguro en WordPress");
    });
})(jQuery);Lenguaje del código: JavaScript (javascript)

🔎 Explicación:

• La IIFE encapsula $, lo que permite usar jQuery sin preocuparse por conflictos con otras librerías.

8.1.2. Crear código JavaScript en bloques personalizados

Si agregas código JavaScript a un bloque de Gutenberg o a un widget personalizado, puedes usar una IIFE para evitar contaminar el espacio global.

✨ Ejemplo en WordPress: Código en Bloque Personalizado

(function() {
    console.log("Código encapsulado en un bloque personalizado de WordPress");
})();Lenguaje del código: JavaScript (javascript)

🔎 Explicación:

• Evita que variables y funciones interfieran con otros scripts de WordPress.

8.1.3. Agregar código en functions.php con wp_add_inline_script

A veces, necesitas agregar JavaScript personalizado desde functions.php con wp_add_inline_script().

Aquí una IIFE es útil para encapsular el código:

✨ Ejemplo en WordPress: Inyectando Código en functions.php

function agregar_mi_script_personalizado() {
    $codigo_js = "(function() {
        console.log('Este código se inyectó desde functions.php');
    })();";
    
    wp_add_inline_script('jquery', $codigo_js);
}
add_action('wp_enqueue_scripts', 'agregar_mi_script_personalizado');Lenguaje del código: PHP (php)

🔎 Explicación:

• Se usa una IIFE para encapsular el código y evitar conflictos con otros scripts de WordPress.

8.1.4. Plugins de WordPress con JavaScript personalizado

Si desarrollas un plugin en WordPress que usa JavaScript, es recomendable encapsular el código en una IIFE para evitar colisiones con otras funciones globales.

✨ Ejemplo en WordPress: Plugin con JavaScript Aislado

(function() {
    console.log("JavaScript de mi plugin de WordPress");
})();Lenguaje del código: JavaScript (javascript)

🔎 Explicación:

• Se usa una IIFE para aislar el código del plugin y evitar interferencias con otros scripts en la web.

8.2. Conclusión: ¿Se siguen usando las IIFE en WordPress?

Sí, todavía se usan en WordPress, especialmente cuando:
1️⃣ Se necesita evitar conflictos con otras bibliotecas como jQuery.
2️⃣ Se crea JavaScript en bloques personalizados o widgets.
3️⃣ Se inyecta código en functions.php usando wp_add_inline_script().
4️⃣ Se desarrollan plugins con JavaScript encapsulado.

Sin embargo, en proyectos modernos de WordPress, donde se usan módulos ES6, las IIFE pueden ser reemplazadas por import/export.

9. Peguntas frecuentes y resumen sobre funciones autoejecutables en JS.