Explicar la sintaxis de la función anónima encapsulada

A pesar de que esta es una vieja pregunta y respuesta, se trata de un tema que hasta el día de hoy lanza muchos desarrolladores para un bucle. No puedo contar el número de candidatos a desarrolladores de JavaScript que he entrevistado que no pudieron decirme la diferencia entre una declaración de función y una expresión de función y que no tenían idea de lo que es una expresión de función invocada inmediatamente.

Me gustaría mencionar, sin embargo, una cosa muy importante que es que el fragmento de código de Premasagar no funcionaría incluso si le hubiera dado un identificador de nombre.

function someName() {
    alert(2 + 2);
}();

La razón por la que esto no funcionaría es que el motor JavaScript interpreta esto como una declaración de función seguida de un operador de agrupación completamente no relacionado que no contiene ninguna expresión, y los operadores de agrupación deben contener una expresión. Según JavaScript, el fragmento de código anterior es equivalente al siguiente.

function someName() {
    alert(2 + 2);
}

();

Otra cosa que me gustaría señalar que puede ser de alguna utilidad para algunas personas es que cualquier el identificador de nombre que proporcione para una expresión de función es prácticamente inútil en el contexto del código, excepto dentro de la definición de la función en sí.

var a = function b() {
    // do something
};
a(); // works
b(); // doesn't work

var c = function d() {
    window.setTimeout(d, 1000); // works
};

Por supuesto, usar identificadores de nombre con las definiciones de función siempre es útil cuando se trata de depurar código, pero eso es algo completamente diferente... :-)

Ya se han publicado grandes respuestas. Pero quiero señalar que las declaraciones de función devuelven un registro de finalización vacío:

14.1.20 - Semántica en Tiempo de Ejecución: Evaluación

FunctionDeclaration : function BindingIdentifier ( FormalParameters ) { FunctionBody }

1. Return NormalCompletion(vacío).

Este hecho no es fácil de observe, porque la mayoría de las formas de intentar obtener el valor devuelto convertirán la declaración de función en una expresión de función. Sin embargo, eval lo muestra:

var r = eval("function f(){}");
console.log(r); // undefined

Llamar a un registro de finalización vacío no tiene sentido. Por eso function f(){}() no puede funcionar. De hecho, el motor JS ni siquiera intenta llamarlo, los paréntesis se consideran parte de otra declaración.

Pero si encierra la función entre paréntesis, se convierte en una función expresión:

var r = eval("(function f(){})");
console.log(r); // function f(){}

Las expresiones de función devuelven un objeto de función. Y por lo tanto se puede llamar: (function f(){})().

En javascript, esto se llama Expresión de Función inmediatamente Invocada (IIFE) .

Para convertirla en una expresión de función tienes que:

1. Enciérralo usando ()

2. Coloque un operador vacío ante él

3. Asígnalo a una variable.

De lo contrario se tratará como definición de función y entonces no podrá llamarla / invocarla al mismo tiempo de la siguiente manera camino:

 function (arg1) { console.log(arg1) }(); 

Lo anterior te dará error. Porque solo puede invocar una expresión de función inmediatamente.

Esto se puede lograr de dos maneras: Camino 1:

(function(arg1, arg2){
//some code
})(var1, var2);

Camino 2:

(function(arg1, arg2){
//some code
}(var1, var2));

Camino 3:

void function(arg1, arg2){
//some code
}(var1, var2);

Camino 4:

  var ll = function (arg1, arg2) {
      console.log(arg1, arg2);
  }(var1, var2);

Todo lo anterior invocará inmediatamente la expresión de la función.

Tengo otra pequeña observación. Su código funcionará con un pequeño cambio:

var x = function(){
    alert(2 + 2);
}();

Utilizo la sintaxis anterior en lugar de la versión más extendida:

var module = (function(){
    alert(2 + 2);
})();

Porque no logré que la sangría funcionara correctamente para los archivos javascript en vim. Parece que a Vim no le gustan los tirantes rizados dentro de paréntesis abiertos.

Tal vez la respuesta más corta sería que

function() { alert( 2 + 2 ); }

Es una función literalque define una función (anónima). Un par adicional (), que se interpreta como una expresión, no se espera en el nivel superior, solo literales.

(function() { alert( 2 + 2 ); })();

Está en una sentencia de expresión que invoca una función anónima.

(function(){
     alert(2 + 2);
 })();

Arriba es una sintaxis válida porque cualquier cosa pasada dentro de paréntesis es considerada como expresión de función.

function(){
    alert(2 + 2);
}();

Arriba no es una sintaxis válida. Debido a que el analizador sintáctico de Java script busca el nombre de la función después de la palabra clave de la función, ya que no encuentra nada, arroja un error.

Se pueden usar con parámetros-argumentos como

var x = 3; 
var y = 4;

(function(a,b){alert(a + b)})(x,y)

Resultaría como 7

Esos paréntesis adicionales crean funciones anónimas adicionales entre el espacio de nombres global y la función anónima que contiene el código. Y en Javascript las funciones declaradas dentro de otras funciones solo pueden acceder al espacio de nombres de la función principal que las contiene. Como hay un objeto adicional (función anónima) entre el ámbito global y el ámbito de código real no se conserva.