IFFE (Immediately Invoked Function Expressions) es una técnica que como su nombre lo dice nos permite ejecutar de forma inmediata un bloque de código javascript.
Muchos desarrolladores desconocen el uso de esta técnica dentro del lenguaje javascript o por otra parte no entienden de forma total su funcionamiento. Veremos la forma de utilizarlo y las partes que la componen.
- Javascript - Lenguaje de scripping en el navegador.
Tipos de funciones en javascript
Existen dos tipos de funciones principales en javascript:
- Funciones nombrada: Son funciones que tienen un nombre que las identifica dentro del lenguaje, la sintaxis se muestra a continuación:
function funcionNombrada() {
return true;
};- Funciones anónimas: Son funciones que no tienen un nombre asignado:
function() {
return true;
};Primer acercamiento a las funciones auto ejecutables
-
Existe una tercer variante que se llaman funciones auto ejecutables que si bien no es una especificación del lenguaje, si es una técnica muy utilizada por varias librerías.
-
Las funciones auto ejecutables es una técnica que nos permite encapsular en un bloque de código el alcance de métodos y variables, ademas de ser un bloque que se ejecuta de forma automática cuando son cargadas por el interprete de javascript. Existen diversas formas de escribirlas a continuación se muestra un ejemplo de su estructura básica:
(function(){})();Explicación a detalle de las funciones auto ejecutables
En la descripción de las funciones auto ejecutables se habló de dos componentes el primero es la encapsulación del bloque de código en un contexto y la segundo la llamada automática a ejecución.
- Primer paso: Tomaremos con ejemplo una función nombrada y su llamada a ejecución:
function funcionNombrada(){
console.log( 'Hola Mundo' );
}
funcionNombrada();- Segundo paso: Vamos colocarle un contexto a la función nombrada y ademas a mandarla a ejecución.
function funcionNombrada(){
console.log( 'Hola Mundo' );
}
(funcionNombrada)();-
Como funciona esto: El primer par de paréntesis nos encapsulan la función en un contexto y los dos paréntesis al final nos permiten ejecutarla, el principal problema es que la función nombrada permite que sea llamada desde otra parte del programa.
-
Tercer paso: Para asegurarnos que el bloque de código se ejecute solo cuando nosotros lo necesitamos tenemos que emular este mismo comportamiento con una función anónima que solo podría ser llamada cuando lo necesitamos, a continuación se muestra la implementación de una función anónima auto ejecutable:
(function(){
console.log( 'Hola Mundo' );
})();- Pasando parámetros de inicialización a la función Para pasar parámetros a la función se utiliza el segundo par de paréntesis esto ocasionará que la función obtenga una copia local de la variable y no tenga que cambiar de contexto para acceder a una variable fuera de la funciona auto ejecutable:
(function( param1, param2 ){
console.log( param1 ); // Hola Mundo
})( 'Hola Mundo' );- Nota: Muchas librerías javascript utilizan esta técnica para encapsular y auto ejecutar sus bloques de código, jquery es una de las librerías que a mas ha difundido el uso de las funciones auto ejecutables o IFFE.
-
12 Simple (Yet Powerful) JavaScript Tips:
-
Airbnb JavaScript Style Guide:
- Autor del snippet: Mario Andrade @TheVansters
- Los snippets pertenecen a KamikazeLab