¡Función javascript líder! sintaxis

He estado viendo esta sintaxis en algunas bibliotecas ahora y me pregunto cuál es el beneficio. (tenga en cuenta que estoy al tanto de los cierres y de lo que está haciendo el código, solo me preocupan las diferencias sintácticas)

!function(){
  // do stuff
}();

Como alternativa a lo más común

(function(){
  // do stuff
})();

para auto invocar funciones anónimas.

Me pregunto algunas cosas. En primer lugar, ¿qué está permitiendo que el mejor ejemplo funcione realmente? ¿Por qué es necesaria la explosión para que esta afirmación sea sintácticamente correcta? También me dijeron que +funciona, y estoy seguro de que algunos otros, en lugar de!

Segundo, ¿cuál es el beneficio? Todo lo que puedo decir es que salva un solo personaje, pero no puedo imaginar que sea un beneficio tan grande para atraer a numerosos adoptantes. ¿Hay algún otro beneficio que me estoy perdiendo?

La única otra diferencia que puedo ver sería el valor de retorno de la función de invocación automática, pero en estos dos ejemplos, realmente no nos importa el valor de retorno de la función, ya que se usa solo para crear un cierre. Entonces, ¿alguien puede decirme por qué uno podría usar la primera sintaxis?

Idealmente, debería poder hacer todo esto simplemente como:

function(){
  // do stuff
}(); 

Eso significa declarar una función anónima y ejecutarla. Pero eso no funcionará debido a los detalles de la gramática JS.

Entonces, la forma más corta de lograr esto es usar alguna expresión, por ejemplo, UnaryExpression (y así CallExpression):

!function(){
  // do stuff
}(); 

O por diversión:

-function(){
  // do stuff
}(); 

O:

+function(){
  // do stuff
}(); 

O incluso:

~function(){
  // do stuff
  return 0;
}( );

En Javascript, functionse espera que una línea que comience sea ​​una declaración de función y se vea como

function doSomething() {
}

Una función de auto invocación como

function(){
  // do stuff
}();

no se ajusta a esa forma (y provocará un error de sintaxis en el primer par de apertura porque no hay nombre de función), por lo que los corchetes se utilizan para delinear una expresión de función anónima .

(function(){
  // do stuff
})();

Pero cualquier cosa que cree una expresión (a diferencia de una declaración de función) servirá, por lo tanto, el !. Le está diciendo al intérprete que esto no es una declaración de función. Aparte de eso, la precedencia del operador dicta que la función se invoque antes de la negación.

No estaba al tanto de esta convención, pero si se vuelve común, puede contribuir a la legibilidad. Lo que quiero decir es que cualquiera que lea la !functionparte superior de un gran bloque de código esperará una auto invocación, de la forma en que ya estamos condicionados a esperar lo mismo cuando lo veamos (function. Excepto que perderemos esos molestos paréntesis. Esperaría que esa sea la razón, a diferencia de cualquier ahorro en velocidad o recuento de caracteres.

Además de las cosas que ya se dijeron, la sintaxis con el! es útil si escribe javascript sin punto y coma:

var i = 1
!function(){
  console.log('ham')
}()

i = 2
(function(){
  console.log('cheese')
})()

El primer ejemplo genera 'ham' como se esperaba, pero el segundo arrojará un error porque la declaración i = 2 no finaliza debido al siguiente paréntesis.

También en los archivos JavaScript concatenados no tiene que preocuparse si al código anterior le faltan puntos y coma. Entonces no es necesario lo común; (function () {}) (); para asegurarte de que el tuyo no se rompa.

Sé que mi respuesta es un poco tarde, pero creo que aún no se ha mencionado :)

Por un lado, jsPerf muestra que usar !(UnaryExpression's) suele ser más rápido. A veces resultan iguales, pero cuando no lo son, no he visto que el no golpeado triunfe demasiado sobre los demás todavía: http://jsperf.com/bang-function

Esto se probó en el último Ubuntu con el Chrome más antiguo (por decir ..), versión 8. Por lo tanto, los resultados pueden diferir, por supuesto.

Editar: ¿Qué tal algo loco como delete?

delete function() {
   alert("Hi!"); 
}();

o void?

void function() {
   alert("Hi!"); 
}();

Como puede ver aquí , la mejor manera de hacer métodos auto invocados en JavaScript es usar:

(function(){}()); -> 76,827,475 ops/sec

!function(){}();  -> 69,699,155 ops/sec

(function(){})(); -> 69,564,370 ops/sec

Entonces, con negar "!" y todos los demás operadores unarios como +, -, ~, eliminar, anular, se ha dicho mucho, solo para resumir:

!function(){
  alert("Hi!");
}(); 

O

void function(){
  alert("Hi!");
}();

O

delete function(){
  alert("Hi!");
}();

Y algunos casos más con operadores binarios para divertirse :)

1 > function() {
   alert("Hi!"); 
}();

O

1 * function() {
   alert("Hi!"); 
}();

O

1 >>> function() {
   alert("Hi!"); 
}();

O incluso

1 == function() {
   alert("Hi!"); 
}();

Dejando el ternario para otra persona chicos :)