Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Para que se usa IIFE?

Buenas!

Entiendo la aplicación de IIFE, lo que no entiendo es el objetivo. Primero pensé que podía ser por un tema de seguridad, pero no estoy segura como ayudaría eso.

Además tengo una segunda pregunta. Este tipo de funciones se utilizan sólo como un wrap alrededor de todo el código JS? o en que otra situación se puede utilizar?

Estuve investigando pero MDN no dice mucho al respecto, y por lo demás explicán como construirlas (tal cual el video de esta clase) pero no su objetivo.

Gracias

1 respuesta

¡Hola Marcia!

Gracias por tu pregunta.

El objetivo principal de las IIFE (Immediately Invoked Function Expression) es encapsular el código y evitar la contaminación del scope global. Esto significa que puedes definir variables y funciones dentro de una IIFE sin preocuparte de que colisionen con otras variables o funciones fuera de ella. Esto es especialmente útil cuando trabajas en proyectos grandes o cuando utilizas librerías o frameworks de terceros.

Un ejemplo práctico de uso de una IIFE es cuando quieres crear un módulo en JavaScript. Supongamos que estás desarrollando una aplicación de tareas y quieres encapsular toda la lógica relacionada con las tareas en un módulo separado. Puedes utilizar una IIFE para definir el módulo y todas las funciones relacionadas con las tareas dentro de él. De esta manera, evitas que el código del módulo se mezcle con el resto de tu aplicación.

Aquí tienes un ejemplo de cómo se vería una IIFE en este caso:

const tareaModule = (() => {
  // Variables y funciones privadas del módulo
  let tareas = [];

  function agregarTarea(tarea) {
    tareas.push(tarea);
  }

  function eliminarTarea(indice) {
    tareas.splice(indice, 1);
  }

  // Retornar las funciones públicas del módulo
  return {
    agregarTarea,
    eliminarTarea
  };
})();

// Utilizar las funciones del módulo
tareaModule.agregarTarea('Hacer la compra');
tareaModule.agregarTarea('Lavar los platos');
tareaModule.eliminarTarea(0);

En este ejemplo, todas las variables y funciones dentro de la IIFE están encapsuladas dentro del módulo tareaModule. Esto evita que colisionen con otras variables o funciones fuera del módulo.

Sin esto, todas las funciones, variables, etc, que escribes en tu código estarán accesibles de todos los archivos ".js" que están declarados dentro de tu index.html e incluso dentro del HTML por medio de la tag <script></script>, y caso escribas variables o funciones que se repiten en otro archivo, tendrás una colisión, y puede que sobrescriba el código sin que sea tu intención, causando así inconsistencias.

Espero que esto aclare tu duda sobre el objetivo y el uso de las IIFE. Si tienes alguna otra pregunta, no dudes en preguntar. ¡Estoy aquí para ayudarte!

¡Saludos!

Si este post te ayudó, por favor marca como solucionado ✓. ¡Continúa con tus estudios!