Qué son las expresiones de función invocada inmediatamente en JavaScript

Resumen: en este tutorial, aprenderás sobre las expresiones de función invocadas inmediatamente (IIFE) de JavaScript.

Introducción a IIFE

Una expresión de función invocada inmediatamente por JavaScript es una función definida como una expresión y ejecutada inmediatamente después de su creación. A continuación, se muestra la sintaxis para definir una expresión de función invocada inmediatamente:

(function(){
    //...
})();

Por qué IIFEs

Cuando defines una función, el motor de JavaScript agrega la función al objeto global. Veamos el siguiente ejemplo:

function add(a,b) {
    return a + b;
}

En los navegadores web, el motor JavaScript agrega la función add() al objeto global de window:

console.log(window.add);

Del mismo modo, si declaras una variable fuera de una función usando la palabra clave var, el motor de JavaScript también agrega la variable al objeto global:

var counter = 10;
console.log(window.counter); // 10

Si tiene muchas variables y funciones globales, el motor de JavaScript solo liberará la memoria asignada para ellas hasta que el objeto global pierda sus ámbitos.

Como resultado, la secuencia de comandos puede usar la memoria de manera ineficiente. Además de eso, tener variables y funciones globales probablemente cause colisiones de nombres.

Una forma de evitar que las funciones y variables contaminen el objeto global es usar expresiones de función invocadas inmediatamente.

En JavaScript, puedes tener las siguientes expresiones:

'This is a string';
(10+20);

Esta sintaxis es correcta, aunque las expresiones no tengan ningún efecto. Una función también se puede declarar como una expresión que se denomina expresión de función:

let sum = function(a, b) {
    return a + b;
}

En esta sintaxis, la parte del lado derecho del operador de asignación (=) es una expresión de función. Debido a que una función es una expresión, puedes envolverla entre paréntesis:

let sum = (function(a, b) {
    return a + b;
});

En este ejemplo, se hace referencia a la variable sum como la función anónima que agrega dos argumentos.

Además, puedes ejecutar la función inmediatamente después de crearla:

let sum = (function(a,b){
    return a + b;
})(10, 20);

console.log(sum);

En este ejemplo, la variable sum contiene el resultado de la llamada a la función.

La siguiente expresión se denomina expresión de función invocada inmediatamente (IIFE) porque la función se crea como una expresión y se ejecuta inmediatamente:

(function(a,b){
        return a + b;
})(10,20);

Esta es la sintaxis general para definir un IIFE:

(function(){
    //...
})();

Ten en cuenta que puedes usar una función de flecha para definir un IIFE:

(() => {
    //...
})();

Al colocar funciones y variables dentro de una expresión de función invocada inmediatamente, puedes evitar contaminarlas en el objeto global:

(function() {
    var counter = 0;
    function add(a, b) {
        return a + b;
    }
    console.log(add(10,20)); // 30
}());

Identificador de IIFE

Un IIFE puede tener un nombre. Sin embargo, no se puede volver a invocar después de la ejecución:

(function namedIIFE() {
    //...
})();

IIFE comenzando con un punto y coma (;)

A veces, puedes ver un IIFE que comienza con un punto y coma (;):

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

En esta sintaxis, el punto y coma se usa para terminar la declaración en caso de que dos o más archivos JavaScript se concatenen en un solo archivo.

Por ejemplo, puedes tener dos archivos lib1.js y lib2.js que usan IIFE:

(function(){
    // ...
})()


(function(){
    // ...
})()

Si utilizas una herramienta de agrupación de código para concatenar el código de ambos archivos en un solo archivo, sin el punto y coma (;), el código JavaScript concatenado provocará un error de sintaxis.

IIFE en acción

Supongamos que tienes un script llamado calculator.js con las siguientes funciones:

function add(a, b) {
    return a + b;
}

function mutiply(a, b) {
    return a * b;
}

Y carga la calculator.js en un documento HTML.

Más tarde, también querrás cargar otro script de JavaScript llamado app.js en el mismo documento:

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript IIFE – Estrada Web Group</title>
</head>
<body>
  <script src="calculator.js"></script>
  <script src="app.js"></script>
</body>
</html>

El script app.js también tiene la función add():

function add() {
    return 'add';
}

Cuando usas la función add() en el documento HTML, devuelve la cadena 'add' en lugar de la suma de dos números:

let result = add(10, 20);
console.log(result); // 'add'

Esto se debe a que la función add() en app.js anula la función add() en el script de calculator.js.

Para solucionar esto, puedes aplicar IIFE en calculator.js de la siguiente manera:

const calculator = (function () {
    function add(a, b) {
        return a + b;
    }

    function multiply(a, b) {
        return a * b;
    }
    return {
        add: add,
        multiply: multiply
    }
})();

El IIFE devuelve un objeto que contiene los métodos de suma y multiplicación que hacen referencia a las funciones de add() y multiply(). En el documento HTML, puedes usar el script calculator.js de la siguiente manera:

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript IIFE</title>
</head>
<body>
  <script src="js/calculator.js"></script>
  <script src="js/app.js"></script>
  <script>
    let result = calculator.add(10, 20); // add in app.js
    console.log(result); // 30
    console.log(add()); // add in the app.js
  </script>
</body>
</html>

La calculator.add() llamó a la función add() incluida en el script calculator.js mientras que la segunda llamada a la función add() hace referencia a la función add() en app.js.

jQuery e IIFE

El siguiente documento HTML utiliza jQuery:

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript IIFE - jQuery</title>
</head>
<body>
  <h1>jQuery Demo</h1>
  <script src="https://code.jquery.com/jquery-3.4.1.slim.js"
    integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI=" crossorigin="anonymous"></script>
  <script>
    let counter = 1;
    $('h1').click(function () {
      $(this).text('jQuery Demo' + ' Clicked ' + counter++);
    });
  </script>
</body>
</html>

Cuando incluyes la librería de jQuery, puedes acceder a muchas funciones útiles a través del objeto $ o jQuery. Por detrás jQuery usa el IIFE para exponer su funcionalidad.

Al hacer esto, jQuery solo necesita usar una variable global ($) para exponer un montón de funciones sin contaminar el objeto global.

El siguiente ejemplo ilustra cómo cambiar el objeto jQuery $ a _ dentro del IIFE:

(function (_) {
      let counter = 1;
      _('h1').click(function () {
        _(this).text('jQuery Demo' + ' Clicked ' + counter++);
      });
  })(jQuery);

En este ejemplo, pasamos el objeto jQuery al IIFE y usamos el argumento _ en su lugar.

En este tutorial, aprendiste acerca de las expresiones de función de invocación inmediata de JavaScript (IIFE) y sus propósitos.