função javascript levando estrondo! sintaxe

Eu tenho visto essa sintaxe em algumas bibliotecas agora e estou me perguntando qual é o benefício. (observe que estou ciente dos fechamentos e do que o código está fazendo, estou preocupado apenas com as diferenças sintáticas)

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

Como alternativa aos mais comuns

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

para auto-invocar funções anônimas.

Estou pensando em algumas coisas. Primeiro, o que está permitindo que o exemplo principal realmente funcione? Por que o estrondo é necessário para tornar esta afirmação sintaticamente correta? Disseram-me também que +funciona, e tenho certeza que alguns outros, no lugar de!

Segundo, qual é o benefício? Tudo o que posso dizer é que ele salva um único personagem, mas não consigo imaginar que seja um benefício tão grande atrair muitos adotantes. Há algum outro benefício que estou perdendo?

A única outra diferença que vejo é o valor de retorno da função auto-invocadora, mas em ambos os exemplos, não nos importamos com o valor de retorno da função, pois ela é usada apenas para criar um fechamento. Então, alguém pode me dizer por que alguém pode usar a primeira sintaxe?

Idealmente, você deve ser capaz de fazer tudo isso simplesmente como:

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

Isso significa declarar uma função anônima e executá-la. Mas isso não funcionará devido a detalhes da gramática JS.

A forma mais curta de conseguir isso é usar alguma expressão, por exemplo, UnaryExpression (e, portanto, CallExpression):

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

Ou para a diversão:

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

Ou:

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

Ou até:

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

Em Javascript, functionespera-se que uma linha que comece com seja uma instrução de função e pareça

function doSomething() {
}

Uma função auto-invocável como

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

não se encaixa nesse formulário (e causará um erro de sintaxe no primeiro ponto de abertura porque não há nome da função); portanto, os colchetes são usados ​​para delinear uma expressão de função anônima .

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

Mas qualquer coisa que crie uma expressão (em oposição a uma instrução de função) fará, portanto, o !. Está dizendo ao intérprete que isso não é uma declaração de função. Fora isso, a precedência do operador determina que a função seja invocada antes da negação.

Eu não estava ciente dessa convenção, mas se ela se tornar comum, poderá contribuir para a legibilidade. O que quero dizer é que qualquer pessoa que esteja lendo !functionno topo de um grande bloco de código esperará uma auto-invocação, da maneira como estamos condicionados a esperar o mesmo quando vemos (function. Exceto que perderemos esses parênteses irritantes. Eu esperava que esse fosse o motivo, em oposição a qualquer economia na velocidade ou na contagem de caracteres.

Além das coisas que já foram ditas, a sintaxe com o! é útil se você escrever javascript sem ponto e vírgula:

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

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

O primeiro exemplo gera 'ham' conforme o esperado, mas o segundo gera um erro porque a instrução i = 2 não é finalizada devido aos seguintes parênteses.

Também em arquivos javascript concatenados, você não precisa se preocupar se o código anterior está com ponto e vírgula ausente. Portanto, não há necessidade do comum; (function () {}) (); para garantir que o seu próprio não se estrague.

Eu sei que minha resposta está meio atrasada, mas acho que ainda não foi mencionada :)

Por um lado, o jsPerf mostra que o uso !(da UnaryExpression) geralmente é mais rápido. Às vezes, eles saem para ser igual, mas quando eles não estão, eu não vi o não-bateu um triunfo muito sobre os outros ainda: http://jsperf.com/bang-function

Isso foi testado no Ubuntu mais recente com o Chrome mais antigo (por exemplo ..), versão 8. Portanto, os resultados podem diferir, é claro.

Edit: Que tal algo louco como delete?

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

ou void?

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

Como você pode ver aqui , a melhor maneira de executar métodos auto-chamados em javascript é usando:

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

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

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

Então, com negar "!" e todos os outros operadores unários como +, -, ~, delete, void, muito foi dito, apenas para resumir:

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

Ou

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

Ou

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

E mais alguns casos com operadores binários por diversão :)

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

Ou

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

Ou

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

Ou até

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

Deixando o ternário para outra pessoa caras :)