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

Las funciones son uno de los componentes básicos de cualquier lenguaje de programación y JavaScript ha llevado las funciones a un nivel completamente nuevo. Se dice que las funciones son una colección de declaraciones que se ejecutarán en una secuencia adecuada en un contexto particular. Ahora, JavaScript proporciona una variedad de métodos para definir y ejecutar funciones, hay funciones con nombre, funciones anónimas y luego hay funciones que se ejecutan tan pronto como se montan, estas funciones se conocen como expresiones de función invocadas inmediatamente o IIFE. Profundicemos más para saber más sobre los IIFE.

Sintaxis: IIFEs sigue una sintaxis particular como se muestra a continuación.

(function (){ 
// Function Logic Here. 
})();

Ahora probemos un poco más para entender la relación entre el Nombre y la Sintaxis de este tipo de Funciones.

¿Por qué el nombre Expresiones de funciones invocadas inmediatamente?

• Invocado inmediatamente: esta parte es fácil de explicar y demostrar. Este tipo de función se invoca inmediatamente ya que estas funciones se ejecutan tan pronto como se montan en la pila, no requiere una llamada explícita para invocar la función. Si nos fijamos en la sintaxis en sí tenemos dos pares de paréntesis cerrados, el primero contiene la lógica a ejecutar y el segundo es generalmente lo que incluimos cuando invocamos una función, el segundo paréntesis se encarga de decirle al compilador que el La expresión de la función debe ejecutarse inmediatamente.
• Expresiones de función: es fácil de entender que una expresión de función es una función que se usa como una expresión. JavaScript nos permite usar funciones como expresión de función si asignamos la función a una variable, envolvemos la función entre paréntesis o ponemos un no lógico delante de una función. El siguiente programa ilustra las diferentes formas en que podemos crear una expresión de función.

  // Creating Function Expression by assigning to a variable. var myFunc = function() { return "GeeksforGeeks"; };    // Creating Function Expression Using Logical Not. !function() { return "GeeksforGeeks"; };    // Creating Function Expression Using Parentheses. (function() { return "GeeksforGeeks"; });

  Ahora, si observa el tercer código de ejemplo, es idéntico a la primera parte de la sintaxis de un IIFE, por lo tanto, podemos concluir que la primera parte del IIFE contiene una expresión de función, mientras que la parte final la invoca de inmediato.

Conversión de funciones a IIFE

Como ya hemos visto qué es un IIFE y cómo se puede desglosar su forma sintaxial para que tenga más sentido, podemos convertir una función regular en un IIFE siguiendo solo dos pasos como sigue.

• Dada cualquier definición de función regular, envuelva la definición dentro de un par de paréntesis cerrados, esto creará su expresión de función.
• Por último, agregue otro par de paréntesis y un punto y coma para marcar el final de la declaración, y habrá convertido su función normal en un IIFE.

  // Regular Function. function Greet() {     console.log("Welcome to GFG!"); }; // Execution of Regular Function. Greet();    // IIFE creation and execution. (function() { console.log("Welcome to GFG!"); })();

  Producción:

  Welcome to GFG!
  Welcome to GFG!

Puntos importantes

1. IIFE sigue su propio alcance como cualquier otra función/variable en JavaScript. La parte del nombre que se invoca inmediatamente a veces es confusa para los nuevos desarrolladores, ya que esperan que IIFE se ejecute independientemente del alcance de la función, esto es incorrecto. Por ejemplo, tomemos el siguiente ejemplo donde el IIFE se define dentro de una función y solo se invocará inmediatamente si llamamos a la función principal.

   function myFunc() {     console.log("Welcome to");     // This will be executed after executing the previous log.     (function() { console.log("GeeksForGeeks!"); })();     console.log("Hi There!"); }    // Calling the Function. myFunc();

   Producción:

   Welcome to
   GeeksForGeeks!
   Hi There!
   

2. Los IIFE tienen su propio alcance, es decir, las variables que declare en la expresión de la función no estarán disponibles fuera de la función.
3. De manera similar a otras funciones, los IIFE también pueden ser nombrados o anónimos, pero incluso si un IIFE tiene un nombre, es imposible referirlo/invocarlo.
4. Los IIFE también pueden tener parámetros. Por ejemplo,

   // Declaring the parameter required. (function(dt) {     console.log(dt.toLocaleTimeString());     // Passing the Parameter. })(new Date());

   Producción:

   4:30:12 PM
   

Casos de uso de IIFE

• Evite contaminar el espacio de nombres global 
• Para crear cierres
• Evite conflictos de nombres de variables entre bibliotecas y programas.
• IIFE se utiliza para crear variables y métodos públicos y privados.
• Se utiliza para ejecutar funciones asíncronas y de espera.
• Se utiliza en la biblioteca JQuery
• Se utiliza para trabajar con la función require.