Syntaxe particulière des appels de fonctions JavaScript

Tout comme moi, vous avez peut-être déjà remarqué la syntaxe JavaScript suivante où la définition de la fonction est elle-même suivie de parenthèses :

var object = function(){}();

Peut-être que vous ne vous êtes pas posé la question à savoir ce qu'elles faisaient là ? Peut-être êtes-vous curieux de le savoir ? En fait, je l'ignorais jusqu'à ce que je commence à faire la lecture du code de jQuery et Prototype pour comprendre le fonctionnement interne et apprendre quelques trucs sur le tas (ne m'en voulez pas, je suis surtout spécialisé dans le back-end (server-side) des applications web).

Ouvrez le code source et remarquez la syntaxe de ces librairies.

var object = function(){
   // code
}();

Pour constater ce qui se passe, on voit qu'il y a une variable obj et qu'on lui assigne le résultat d'une fonction. La variable ne contiendra pas le corps de la fonction anonyme mais bien ce que la fonction retourne. Les parenthèses à la fin indiquent à l'engin JavaScript qu'il doit exécuter immédiatement la fonction dès qu'elle est interprétée.

var result = function(){
   return 'Hello World';
}();

// Hello World
alert(result);

Qui est équivalent à la forme alternative :

var fct = function(){
   return 'Hello World';
};

alert(fct());

Remarquez dans l'exemple précédent que la fonction n'est pas suivie par (), ce qui veut dire qu'elle n'est pas exécutée. Le corps de la fonction se trouve dans la variable fct qu'on peut ensuite l'appeler avec fct().

L'autre particularité qu'il faut retenir est qu'en utilisant la première forme avec les parenthèses, il est possible de passer un argument, ce qui explique bien des choses dans le fonctionnement de jQuery (...(window);) et Prototype (...(Element.Methods);).

var result = function(text){
   return text;
}('Hello World');

alert(result);

En passant, la librairie jQuery 1.4 est officiellement sortie aujourd'hui.