Appel de fonction anonyme en Javascript

Question

Je lisais des sources JS sur Twitter - en vue d'améliorer ma base de connaissances JS, lorsque je suis tombé sur cette étrange façon d'appeler une fonction anonyme :

!function( $ ) {
    ...
}( window.jQuery );

... et ça marche ! :)

Il est évident pour tout le monde, que ceci :

function ( $ ) { ... } ( window.jQuery )

ne fonctionne pas (erreur de syntaxe), alors que celle-ci est correcte :

(function ( $ ) { .... })( window.jQuery )

Quelqu'un peut-il expliquer cette magie (pourquoi le cas avec !function fonctionne) ?

Answer 1

Lorsque le mot-clé function est rencontrée en position d'instruction (en tant que premier token d'une instruction), la déclaration de fonction est exprimée comme un déclaration de fonction . Les déclarations de fonction sont hissées au sommet de la portée, ne peuvent pas être invoquées immédiatement et doivent avoir un nom.

Lorsque le mot clé est rencontré dans une position d'expression (c'est-à-dire pas comme premier élément d'une déclaration, dans votre exemple ! est le premier jeton), la déclaration de la fonction est exprimée comme un fonction expression qui peut être anonyme et renvoie la valeur de la fonction nouvellement créée. Puisqu'elle renvoie la valeur de la fonction nouvellement créée, vous pouvez l'invoquer immédiatement en ajoutant des parenthèses après elle.

Le fait de placer la déclaration entre parenthèses a le même effet, mais c'est plus courant que de la faire précéder d'un préfixe ! o + :

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

Answer 2

Le deuxième formulaire function () {} est un déclaration . Le site ! l'opérateur convertit ce dernier en un expression . Vous trouverez également des cas où les gens utilisent - o + avant le function mot-clé.

Lorsque vous avez une expression qui évalue une fonction, vous pouvez appeler cette fonction en utilisant la fonction () opérateur.

Une autre façon (peut-être plus facile à comprendre) d'obtenir le même effet est d'utiliser une autre série de parenthèses :

( function(x) { body; } )(arg);

En plaçant la fonction à l'intérieur de la parenthèse, vous la convertissez à nouveau en une expression, qui s'évalue en une fonction. Cette fonction est appelée avec arg comme argument.

Comme une fonction de flèche :

( (x) => { body; } )(arg);

Answer 3

En ce qui concerne le point d'exclamation, ce n'est pas de la magie. Il convertit le résultat en un vrai/faux.

Votre problème est peut-être que votre fonction anonyme contient une erreur.

Answer 4

Cela ressemble à un bug de syntaxe javascript :

une fonction nommée peut être une déclaration, mais une fonction anonyme est considérée comme une expression.

Pro : vous pouvez faire function() { ... }()

Con : vous ne pouvez pas faire function() { ... }

Mais pourquoi les gens voudraient-ils définir une fonction anonyme sans l'invoquer ? L'inconvénient n'est donc pas vraiment un problème.

Answer 5

Vous devrez envelopper la fonction dans une parenthèse.

(function ( $ ) { ... }) ( window.jQuery )