Indagamos por diferentes espacios y así traerte la respuesta para tu duda, en caso de preguntas puedes dejarnos la inquietud y contestamos con mucho gusto, porque estamos para ayudarte.
Solución:
La forma en que suelo explicar esto a la gente es mostrar cómo es similar a otros patrones de JavaScript.
Primero, debes saber que hay dos formas de declarar una función (en realidad, hay al menos cinco, pero estos son los dos principales culpables):
function foo() /*code*/
y
var foo = function() /*code*/;
Incluso si esta construcción parece extraña, probablemente la use todo el tiempo al adjuntar eventos:
window.onload=function()/*code*/;
Debería notar que la segunda forma no es muy diferente de una declaración de variable regular:
var bar = 5;
var baz = 'some string';
var foo = function() /*code*/;
Pero en JavaScript, siempre tiene la opción de usar un valor directamente o mediante una variable. Si bar es 5entonces las siguientes dos declaraciones son equivalentes:
var myVal = bar * 100; // use 'bar'
var myVal = 5 * 100; // don't use 'bar'
Bueno, si puedes usar 5 por sí solo, ¿por qué no puedes usar function() *code* solo tambien? De hecho, puedes. Y eso se llama una función anónima. Así que estos dos ejemplos también son equivalentes:
var foo = function() /*code*/; // use 'foo'
foo();
(function()/*code*/)(); // don't use 'foo'
La única diferencia que debería ver está en los corchetes adicionales. Eso es simplemente porque si comienza una línea con la palabra clave function, el analizador pensará que está declarando una función utilizando el primer patrón en la parte superior de esta respuesta y generará una excepción de error de sintaxis. Así que envuelva toda su función anónima dentro de un par de llaves y el problema desaparecerá.
En otras palabras, las siguientes tres afirmaciones son válidas:
5; // pointless and stupid
'some string'; // pointless and stupid
(function()/*code*/)(); // wonderfully powerful
[EDIT in 2020]
La versión anterior de mi respuesta recomendaba la forma de envoltura de paréntesis de Douglas Crockford para estas “funciones anónimas invocadas inmediatamente”. El usuario @RayLoveless recomendó en 2012 usar la versión que se muestra ahora. En ese entonces, antes de ES6 y las funciones de flecha, no había una diferencia idiomática obvia; simplemente tenía que evitar que la declaración comenzara con el function palabra clave. De hecho, había muchas formas de hacerlo. Pero usando paréntesis, estas dos declaraciones eran equivalentes sintáctica e idiomáticamente:
( function() /* code */() );
( function() /* code */ )();
Pero el comentario del usuario @zentechinc a continuación me recuerda que las funciones de flecha cambian todo esto. Así que ahora solo una de estas afirmaciones es correcta.
( () => /* code */ () ); // Syntax error
( () => /* code */ )();
¿Por qué diablos importa esto? En realidad, es bastante fácil de demostrar. Recuerde que una función de flecha puede venir en dos formas básicas:
() => return 5; ; // With a function body
() => console.log(5); ;
() => 5; // Or with a single expression
() => console.log(5);
Sin los paréntesis que envuelven este segundo tipo de función de flecha, terminas con un lío idiomático:
() => 5(); // How do you invoke a 5?
() => console.log(5)(); // console.log does not return a function!
Ese patrón creará un nuevo contexto de ejecución (EC) en el que vivirán todos los objetos de variables locales (VO), y también morirán cuando salga el EC. La única excepción a esta vida útil es para los VO que se vuelven parte de un cierre.
Tenga en cuenta que JavaScript no tiene una función mágica de “inicio”. Puede asociar este patrón con tal, ya que la mayoría de las bibliotecas JS que se respetan a sí mismas (jQuery, YUI, etc.) harán esto para no contaminar el NS global más de lo necesario.
Una demostración:
var x = 1; // global VO
(function()
var x = 2; // local VO
)();
x == 1; // global VO, unchanged by the local VO
El segundo conjunto de “paréntesis” (que en realidad se denominan paréntesis, o un conjunto de paréntesis), son simplemente para invocar la expresión de función que lo precede directamente (como se define en el conjunto anterior de paréntesis).
El código crea una función anónima y luego la ejecuta inmediatamente. Similar a:
var temp = function()
// init part
temp();
El propósito de esta construcción es crear un alcance para el código dentro de la función. Puede declarar variables y funciones dentro del alcance, y serán locales para ese alcance. De esa forma, no saturan el alcance global, lo que minimiza el riesgo de conflictos con otros scripts.
Si te ha resultado provechoso nuestro post, sería de mucha ayuda si lo compartes con el resto entusiastas de la programación y nos ayudes a difundir nuestro contenido.