Pourquoi les parenthèses sont-elles utilisées pour envelopper un appel de fonction javascript ?

Question

Quelle est la différence entre ces deux appels de fonctions javascript ?

(function(){alert("foo")})()

par rapport à cela :

(function(){alert("foo")}())

Answer 1

Ceci est fait pour des raisons de lisibilité.

Il n'y a pas de réelle différence fonctionnelle entre les deux exemples que vous avez donnés, mais tous deux sont très proches d'une simple déclaration de fonction, qui es différents. Les parenthèses sont ajoutées pour des raisons de lisibilité, afin de les distinguer.

Voici ce que font chacun de vos snippets :

Dans le premier de vos deux extraits, la première parenthèse sera évaluée comme la valeur de la fonction incluse. Cette valeur sera ensuite appelée en tant que fonction. En fin de compte, la fonction sera exécutée, ce qui est probablement ce qui vous intéresse.

Dans votre deuxième extrait, la parenthèse extérieure sera évaluée comme contenant une fonction qui est déclarée en ligne et immédiatement exécutée. Une fois de plus, la fonction sera exécutée, ce qui est probablement ce qui vous intéresse.

Les deux exécuteront la même fonction, il n'y aura donc pas de différence significative.

La différence entre un extrait comme le vôtre et une simple déclaration de fonction :

Les fonctions que vous avez données sont également identiques aux suivantes. J'ai juste ajouté un nom de fonction et assigné la valeur de retour pour des raisons de précision syntaxique, ce que vous pouvez ignorer pour l'instant.

// javascript...
var val = 
  function myFooFunc () { 
    alert("foo"); 
  }();

Cependant, on pourrait facilement la confondre avec une simple déclaration de fonction, ce qui est différent :

// javascript...
function myFooFunc () { 
  alert("foo"); 
}

Remarquez que la seule différence réelle est que cette dernière déclaration de fonction n'est pas exécutée immédiatement. Les autres le sont. Il s'agit donc d'un comportement très différent (la simple déclaration peut être exécutée plus tard si elle est appelée par son nom, ou elle peut ne jamais être exécutée du tout). Cependant, il est souvent difficile de voir immédiatement cette différence dans la syntaxe, surtout si le corps de la fonction devient très long et nécessite un défilement à l'écran.

Pourquoi les fonctions sont-elles exécutées immédiatement ?

Lorsqu'une fonction est exécutée immédiatement après sa déclaration, la valeur est souvent renvoyée à quelque chose (elle peut faire partie d'une instruction d'affectation). Parfois, la fonction est exécutée immédiatement parce qu'elle contient des fonctions internes et qu'elle est utilisée pour fournir une portée fonctionnelle aux instructions incluses.

Essentiellement, les gens mettent des parenthèses autour de la forme "exécuté immédiatement" (vos deux extraits et le premier de mes deux extraits) afin de donner un indice visuel aux autres développeurs que la fonction est appelée immédiatement. C'est tout simplement plus facile à lire, puisque vous pourriez ne pas remarquer les parenthèses avant d'arriver à la fin de la fonction (ou les remarquer tout court).

Answer 2

Ils ont tous deux des comportements similaires.

Les parenthèses qui entourent la déclaration de la fonction indiquent au moteur JavaScript d'exécuter le code immédiatement après son analyse. Dans le premier exemple, vous créez un objet fonction et l'invoquez avec les parenthèses qui suivent. Dans le second exemple, vous demandez au moteur JavaScript de créer l'objet fonction et de l'invoquer immédiatement.

Ejemplo:

// creates a function object
var f1 = (function() { alert('foo'); }); 

// creates a function object and executes it immediately
var f2 = (function() { alert('foo'); }()); 

La différence est que f1 vous donne un objet fonction, tandis que f2 crée et invoque une fonction anonyme.