Hola, les saluda Miguel y esta vez les traigo un artículo.
Índice
El modismo más popular para la expresión de funciones
Bienvenido a The JS Bifrost, su camino hacia una base sólida como una roca para JavaScript a nivel de Dios. Este es el próximo artículo de la serie. Este artículo trata sobre uno de los patrones de codificación más populares llamado «iffy», que es una función de JavaScript que se ejecuta inmediatamente después de la creación.
Definición
Un IIFE es un patrón de codificación llamado Expresión de función invocada inmediatamente, que es una forma de ejecutar una función JavaScript inmediatamente después de su creación. También se pronuncia como «dudoso». Veamos la sintaxis tradicional y más utilizada para declarar un IIFE.
The ES6 way: (() => { /* statements */ })()The ES5 way: (function() { /* statements */ })()
Sintaxis
Analicemos la sintaxis del ejemplo anterior paso a paso:
1. Cuando JavaScript encuentra un función palabra clave en una declaración válida, espera que se lleve a cabo una definición / declaración de función. Para evitar que el motor de JavaScript arroje un error de sintaxis, se crea una expresión de función envolviendo la definición de la función entre paréntesis. Los paréntesis envolventes se considerarán internamente como una expresión.
2. Alternativamente, hay otra variación de escribir un IIFE:
!function() { alert("Hello, I am an IIFE!"); }(); // Prints Hello, I am an IIFE!
Los «!» operador como prefijo, le dirá a JavaScript que cualquier cosa después del operador no es parte de una expresión. (Puedes reemplazar «!» con cualquier operador unario que convertirá esa función en una expresión.) Pero esta variación no devolverá ningún valor del IIFE.
3. Al final de la definición, agregue otro par de paréntesis que se denominan paréntesis de invocación y punto y coma. El paréntesis de invocación es lo que le dice al compilador que la expresión de la función debe ejecutarse inmediatamente.
Example1: (function() { /* statement */ }()); Example2: (function() { /* statement */ })();
«()», para invocar la función, la expresión se coloca dentro o fuera de los paréntesis de ajuste de la función.
¿Anónimo o nombrado?
Las funciones IIFE son funciones anónimas: según la definición, la función anónima no tiene identificador. Esta es una expresión de función que no requiere un nombre.
Los paréntesis de envoltura tratarán lo que está dentro, como una expresión y evaluarán inmediatamente para devolver un valor.
También se pueden denominar funciones. Sin embargo, tener un nombre es innecesario ya que los IIFE no pueden ser referidos / invocados más de una vez después de su ejecución. (Aparte del nombre de la función que aparece en los seguimientos de pila).
(function foo() { /* statements */ })();
Un ejemplo rápido para mostrar que los IIFE también pueden tomar argumentos cuando se invocan. Ahora estamos pasando un argumento al IIFE cuando lo ejecutamos.
(function(myTxt) { console.log(myTxt); })(“Hello!, I am an IIFE”); // Prints Hello!, I am an IIFE
¿Por qué?
Los IIFE son útiles porque no contaminan ni sobrescriben el objeto global y son una forma sencilla de aislar declaraciones de variables.
- Privacidad de datos: los IIFE tienen su propio alcance, es decir, las variables que declare en la Expresión de función no estarán disponibles fuera de la función.
(function () { var myName = "John"; })(); // Variable myName is not accessible from the outside scope // myName throws "Uncaught ReferenceError: myName is not defined"
Estas variables ahora están dentro del ámbito de la función contenedora porque las variables var
estarán dentro del ámbito de la función y no estarán disponibles en el ámbito global.
- Sin colisión de nombres: las funciones y variables definidas dentro de IIFE no entran en conflicto con otras funciones y variables, incluso si tienen el mismo nombre.
Si tiene muchas variables y funciones globales con el mismo nombre, el motor de JavaScript solo liberará la memoria asignada para ellas hasta que el objeto global pierda el alcance. Las variables y funciones globales probablemente causarán colisiones de nombres. Con el uso de IIFE, definir variables dentro de funciones o entre llaves las hace inaccesibles al espacio de nombres global, lo que ayudará a minimizar la contaminación del ámbito global.
Asignar el IIFE a una variable almacena el valor de retorno de la función, no la definición de la función en sí.
var MyVar = (function () { var myName = "John"; return name; })(); // Immediately creates the output // "John"
El alcance del bloque ES6 es el nuevo IIFE
En ES6, las palabras clave const y let permiten a los desarrolladores declarar variables en el alcance del bloque, lo que significa que esas variables existen solo dentro del bloque correspondiente. Cuando declaras una variable global usando la palabra clave var
, estás agregando esa variable a la lista de propiedades del objeto global. En el caso del navegador web, el objeto global es el window
. Sin embargo, cuando usa las palabras clave let or const
para declarar una variable, esa variable no se adjunta al objeto global como una propiedad. Por lo tanto, las variables tendrán su propio alcance y no le permitirán volver a declararlas haciendo que sus datos sean privados.
{ const myName = 'John'; console.log(myName); }
Esto ayudará cuando desee que su código sea privado donde nada se filtre en el alcance global de la ventana.
Conclusión
Los casos de uso más comunes para IIFE son:
Creación de funciones y variables privadas.
Minimizar la contaminación del ámbito global debido a colisiones de nombres.
Eso es todo lo que hay que saber sobre los IIFE para comenzar a usarlos en su código.
Gracias por leer.
Añadir comentario