JavaScript es un lenguaje de programación muy complejo con una sintaxis amplia que nos permite ejecutar todo tipo de acciones. Dentro de esta sintaxis, se han creado muchísimos patrones de diseño que cumplen determinadas funciones. En este post, te enseñaremos qué son las funciones autoejecutables en JavaScript y cómo ejecutar una funcion despues de un tiempo javascript , un aspecto particular de la sintaxis de este lenguaje.
¿Qué son las funciones autoejecutables en JavaScript?
Las funcion autoinvocada o funciones autoejecutables en JavaScript son uno de los patrones de diseño más particulares de este lenguaje de programación. Como su nombre indica, este patrón de diseño se caracteriza porque las funciones se llaman a sí mismas después de ser declaradas. Esto quiere decir que se ejecutarán de manera inmediata después de ser creadas.
A este patrón de diseño se le conoce como iife por su nombre en inglés: inmediately invoked function expression (expresión de función inmediatamente invocada). Este nombre nos indica que el patrón de diseño utiliza funciones que se ejecutan a penas son declaradas. A continuación, veremos cómo escribirlas.
¿Cómo se declaran las funciones autoejecutables en JavaScript?
La escritura de funciones autoejecutables en JavaScript define, dentro de un paréntesis, una función que llama a su acción con la apertura de llaves, como cualquier otra función. Luego, fuera de este paréntesis, se insertan dos paréntesis vacíos justo después del primero para hacer que la función se ejecute. A continuación, te mostramos un ejemplo con una función simple autoejecutable :
//ifee
(function ( ) {
}) ( );
Como puedes notar, la sintaxis de funciones autoejecutables en JavaScript declara una función anónima. A continuación, te mostramos otro ejemplo con una función asíncrona que ejecuta una acción básica:
(async ( ) => {
const result = await helloWorldAsync ( );
}) ( )
Con las líneas de código anteriores, hemos creado una función asíncrona (declarada con la palabra clave async) que llama a otra función dentro de sí misma por medio de un await. Esta función es anónima y se ejecuta automáticamente gracias a la forma en que está escrita. Es decir, la sintaxis de este tipo de funciones es algo como lo siguiente:
//autoejecutable
(función ( ) {código a ejecutar}) ( );
Como puedes ver, las funciones autoejecutables en JavaScript se componen, básicamente, de dos paréntesis. En el primero se escribe la función y el segundo queda vacío. Entonces, con el primer par de paréntesis estamos encerrando nuestra función y declarándola. Luego, con el segundo par, estamos definiendo que el contenido de los paréntesis anteriores es una función y la estamos ejecutando inmediatamente.
¿Para qué se usan las funciones autoejecutables en JavaScript?
Como puedes notar, las funciones autoejecutables en JavaScript nos ahorran el hecho de declarar una función y llamarla en pasos separados, uniendo este proceso de manera inmediata. Esto nos permite declarar, ejecutar y desechar una función en tan solo una sección de código. Por ello, este patrón de diseño se utiliza en varios escenarios. A continuación, te mencionamos algunos.
Ejecutar funciones asíncronas
En nuestro post sobre la diferencia entre promesas y async y await, te hemos mostrado cómo ejecutar la misma acción (un simple hello world) usando la sintaxis de promesas y la sintaxis async y await. Allí, te hemos demostrado que ejecutar una función async (en este ejemplo el nombre de la función era helloWorldAsync) es mucho más sencillo gracias al await. Este await se ve de la siguiente manera:
const result = await helloWorldAsync ( )
Sin embargo, una de las reglas que te hemos comentado en nuestro post sobre transformar promesas con async y await es que un await siempre debe estar contenido en una función async. Entonces, podemos hacer uso de las funciones autoejecutables en JavaScript para crear una función async anónima que se encargue de ejecutar automáticamente helloWorldAsync. Esta función es exactamente igual a la función asíncrona que te hemos mostrado antes:
(async ( ) => {
const result = await helloWorldAsync ( );
}) ( )
Limpiar el entorno global
Otro de los usos para las funciones autoejecutables en JavaScript es evitar llenar de variables y funciones el entorno global. Al ser ejecutadas y desechadas inmediatamente, este tipo de funciones hacen que sea el objeto devuelto el que se enlace al contexto global, no la función. Es decir, nos permiten ejecutar inmediatamente código que no se utilizará de nuevo, limpiando nuestro entorno.
Para conocer otros escenarios en los que es útil usar este tipo de funciones, te recomendamos leer el artículo sobre IIFE de la Mozilla Developer Network.
¿Quieres seguir aprendiendo?
Ahora que sabes qué son las funciones autoejecutables en JavaScript, ¡es momento de seguir aprendiendo sobre este poderoso lenguaje de programación! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás la teoría y práctica detrás de lenguajes de programación como JavaScript, HTML, CSS y JSX. ¿Quieres seguir aprendiendo con nosotros? ¡Inscríbete ya y triunfa en el sector IT!
