MathieuRobin.com

Je suppose que plusieurs d'entre vous ont déjà remarqué la syntaxe un peu particulière de nombreux frameworks JavaScript. Un bloc commun de plus ou moins grande importance revient systématiquement :

(function() {
    [ ... ]
})();

jQuery, Prototype, Mootools, ExtJS, Backbone.JS et j'en passe.

Auto-exécution

C'est ce qui s'appelle l'auto-exécution (self-executed method en anglais). Essayez donc ce code :

(function() {
    alert('test');
})();

Vous aurez une alerte avec le message test sans avoir cliqué où que ce soit.

Mais pourquoi ?

Ma question préférée. Pourquoi ne pas avoir tout simplement fait ça dans ce cas :

alert('test');

C'est vrai on aurait pu et on aurait eu le même résultat. Sauf que :

Isolation

Essayons maintenant de faire ça :

(function() {
    var str = "test";
    alert(str);
})();
alert(str);

Là vous aurez une première alerte qui affichera bien test puis selon le navigateur : une alerte avec un joli undefined ou une ligne dans la console qui vous dit que str n'est pas défini. Vous venez d'utiliser une propriété privée.

Encore une critique

Vous allez me dire qu'on aurait pu faire ça :

function message () {
    var str = "test";
    alert(str);
};
message();
alert(str);

C'est vrai, on aurait le même résultat concernant l'isolation, mais vous avez dû déclencher l'appel à message() par vous-même. Et vous squattez en plus la variable globale message. Pas besoin de vous expliquer les dangers des variables globales je crois

Sécurité

Quand à l'appel manuel de message(), en soit ce n'est pas très grave. Sauf que là, vous mettez à disposition une fonction qui peut-être appelée à loisir. Alors que dans le cas étudié, vous créez une fonction anonyme auto-exécutée. Impossible donc de la rappeler sans rafraîchir la page. Tout de suite moins pratique.

Conclusion

Non seulement vous avez un espace de travail totalement isolé mais en plus vous n'empiétez sur rien en n'occupant inutilement aucune variable globale. Et le tout sans avoir à vous prendre la tête sur le déroulement de l'exécution. Le pied.

Variante

Pour ceux qui n'aiment pas cette syntaxe, Backbone.js utilise une écriture un peu similaire mais un peu plus parlante :

(function() {
    [ ... ]
}).call();

Paramètres

Bon faut pas oublier que nous sommes dans une fonction après tout, donc pour lui passer des paramètres, rien de compliqué :

(function(arg) {
    alert(arg); // test
})('test');