¿Ubicación de paréntesis para la ejecución automática de funciones JavaScript anónimas?

Recientemente estaba comparando la versión actual de json2.js con la versión que tenía en mi proyecto y noté una diferencia en cómo se creaba y se ejecutaba la expresión de la función.

El código utilizado para envolver una función anónima entre paréntesis y luego ejecutarla,

(function () {
  // code here
})();

pero ahora envuelve la función ejecutada automáticamente entre paréntesis.

(function () {
  // code here
}());

Hay un comentario de CMS en la respuesta aceptada de Explicar la sintaxis de la función anónima encapsulada de JavaScript que "ambos: (function(){})();y (function(){}());son válidos".

Me preguntaba cuál es la diferencia. ¿El primero toma memoria al dejar una función global y anónima? ¿Dónde debería ubicarse el paréntesis?

Son prácticamente iguales.

El primero envuelve una función entre paréntesis para convertirla en una expresión válida y la invoca. El resultado de la expresión no está definido.

El segundo ejecuta la función y los paréntesis alrededor de la invocación automática la convierten en una expresión válida. También se evalúa como indefinido.

No creo que haya una forma "correcta" de hacerlo, ya que el resultado de la expresión es el mismo.

> function(){}()
SyntaxError: Unexpected token (
> (function(){})()
undefined
> (function(){return 'foo'})()
"foo"
> (function(){ return 'foo'}())
"foo"

En ese caso, no importa. Está invocando una expresión que se resuelve en una función en la primera definición y definiendo e invocando inmediatamente una función en el segundo ejemplo. Son similares porque la expresión de la función en el primer ejemplo es solo la definición de la función.

Hay otros casos más obviamente útiles para invocar expresiones que se resuelven en funciones:

(foo || bar)()

No hay ninguna diferencia más allá de la sintaxis.

En cuanto a sus inquietudes sobre el segundo método para hacerlo:

Considerar:

(function namedfunc () { ... }())

namedfuncaún no estará en el ámbito global aunque haya proporcionado el nombre. Lo mismo ocurre con las funciones anónimas. La única forma de conseguirlo en ese ámbito sería asignarlo a una variable dentro de los parens.

((namedfunc = function namedfunc () { ... })())

Los parens externos son innecesarios:

(namedfunc = function namedfunc () { ... })()

Pero no querías esa declaración global de todos modos, ¿verdad?

Entonces se reduce a:

(function namedfunc () { ... })()

Y puede reducirlo aún más: el nombre es innecesario ya que nunca se usará (a menos que su función sea recursiva ... e incluso entonces podría usar arguments.callee)

(function () { ... })()

Esa es la forma en que lo pienso (puede que sea incorrecto, todavía no he leído la especificación ECMAScript). Espero eso ayude.

¡La diferencia simplemente existe porque a Douglas Crockford no le gusta el primer estilo para IIFE ! (en serio) ¡¡ Como puedes ver en este video !!.

La única razón para la existencia de la envoltura adicional (){en ambos estilos} es ayudar a hacer esa sección de código Function Expression , porque Function Declaration no se puede llamar inmediatamente. Algunas secuencias de comandos / Minify-ERS uso justo +, !, -y ~en lugar de paréntesis, también. Me gusta esto:

+function() {  
    var foo = 'bar';  
}();

!function() {  
    var foo = 'bar';  
}();

-function() {  
    var foo = 'bar';  
}();

~function() {  
    var foo = 'bar';  
}();

Y todos estos son exactamente los mismos que sus alternativas. La elección entre estos casos es completamente por su cuenta y no hace ninguna diferencia. {Las de ()productos 1 byte del archivo más grande ;-)}