Les fonctions anonymes
Après les fonctions, voici les fonctions anonymes ! Ces fonctions particulières sont extrêmement importantes en Javascript ! Elles vous serviront pour énormément de choses : les objets, les événements, les variables statiques, les closures, etc. Bref, des trucs que vous apprendrez plus tard. 
Non, vous n'allez pas en avoir l'utilité immédiatement, il vous faudra lire encore quelques chapitres supplémentaires pour commencer à vous en servir réellement. Toujours est-il qu'il vaut mieux commencer à apprendre à vous en servir tout de suite.
Comme leur nom l'indique, ces fonctions spéciales sont anonymes car elles ne possèdent pas de nom ! Voilà la seule et unique différence avec une fonction traditionnelle, ni plus, ni moins. Pour déclarer une fonction anonyme, il vous suffit de faire comme pour une fonction classique mais sans indiquer de nom :
Code : JavaScript
1 2 3 |
function (arguments) { // Le code de votre fonction anonyme } |
C'est bien joli, mais du coup comment fait-on pour exécuter cette fonction si elle ne possède pas de nom ?
Eh bien il existe de très nombreuses façons de faire ! Cependant, dans l'état actuel de vos connaissances, nous devons nous limiter à une seule solution : assigner notre fonction à une variable. Nous verrons les autres solutions au fil des chapitres suivants (nous vous avions bien dit que vous ne sauriez pas encore exploiter tout le potentiel de ces fonctions).
Pour assigner une fonction anonyme à une variable, rien de plus simple :
Code : JavaScript
1 2 3 |
var sayHello = function() { alert('Bonjour !'); }; |
Ainsi, il ne nous reste plus qu'à appeler notre fonction par le biais du nom de la variable à laquelle nous l'avons affectée :
Code : JavaScript
1 |
sayHello(); // Affiche : « Bonjour ! » |
On peut dire, en quelque sorte, que la variable sayHello est devenue une fonction ! En réalité, ce n'est pas le cas, nous devrions plutôt parler de référence, mais nous nous pencherons sur ce concept plus tard.
Certains d'entre vous auront sûrement noté le point-virgule après l'accolade fermante de la fonction dans le deuxième code, pourtant il s'agit d'une fonction, on ne devrait normalement pas en avoir besoin ! Eh bien si !
En Javascript, il faut savoir distinguer dans son code les structures et les instructions. Ainsi, les fonctions, les conditions, les boucles, etc. sont des structures, tandis que tout le reste (assignation de variable, exécution de fonction, etc.) sont des instructions.
Bref, si nous écrivons :
Code : JavaScript
1 2 3 |
function structure() { // Du code… } |
il s'agit d'une structure seule, pas besoin de point-virgule. Tandis que si j'écris :
Code : JavaScript
1 |
var instruction = 1234; |
il s'agit d'une instruction permettant d'assigner une valeur à une variable, le point-virgule est nécessaire. Maintenant, si j'écris de cette manière :
Code : JavaScript
1 2 3 |
var instruction = function() { // Du code… }; |
il s'agit alors d'une instruction assignant une structure à une variable, le point virgule est donc toujours nécessaire car, malgré la présence d'une structure, l'action globale reste bien une instruction.
Une utilisation intéressante des fonctions anonymes concerne l'isolement d'une partie de votre code, le but étant d'éviter qu'une partie de votre code n'affecte tout le reste.
Ce principe peut s'apparenter au système de sandbox mais en beaucoup moins poussé. Ainsi, il est possible de créer une zone de code isolée permettant la création de variables sans aucune influence sur le reste du code. L'accès au code en-dehors de la zone isolée reste toujours partiellement possible (ce qui fait donc que l'on ne peut pas réellement parler de sandbox). Mais, même si cet accès reste possible, ce système peut s'avérer très utile. Découvrons tout cela au travers de quelques exemples !
Commençons donc par découvrir comment créer une première zone isolée :
Code : JavaScript - Sélectionner
1 2 3 4 5 6 7 8 9 |
// Code externe
(function() {
// Code isolé
})();
// Code externe |
Hou là, une syntaxe bizarre ! Il est vrai que ce code peut dérouter un petit peu au premier abord, nous allons donc vous expliquer ça pas à pas.
Tout d'abord, nous distinguons une fonction anonyme :
Code : JavaScript
1 2 3 |
function() { // Code isolé } |
Viennent ensuite deux paires de parenthèses, une première paire encadrant la fonction et une deuxième paire suivant la première :
Code : JavaScript
1 2 3 |
(function() { // Code isolé })() |
Pourquoi ces parenthèses ? Eh bien pour une raison simple : une fonction, lorsqu'elle est déclarée, n'exécute pas immédiatement le code qu'elle contient, elle attend d'être appelée. Or, nous, nous souhaitons exécuter ce code immédiatement ! La solution est donc d'utiliser ce couple de parenthèses.
Pour expliquer simplement, prenons l'exemple d'une fonction nommée :
Code : JavaScript
1 2 3 4 5 |
function test() { // Du code… }
test(); |
Comme vous pouvez le constater, pour exécuter la fonction test() immédiatement après sa déclaration, nous avons dû l'appeler par la suite, mais il est possible de supprimer cette étape en utilisant le même couple de parenthèses que pour les fonctions anonymes :
Code : JavaScript
1 2 3 |
(function test() { // Code. })(); |
Le premier couple de parenthèses permet de dire « je désigne cette fonction » pour que l'on puisse ensuite indiquer, avec le deuxième couple de parenthèses, que l'on souhaite l'exécuter. Le code évolue donc de cette manière :
Code : JavaScript -
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Ce code :
(function test() {
})();
// Devient :
(test)();
// Qui devient :
test(); |
Alors, pour une fonction nommée, la solution sans ces deux couples de parenthèses est plus propre, mais pour une fonction anonyme il n'y a pas le choix : on ne peut plus appeler une fonction anonyme une fois déclarée (sauf si elle a été assignée à une variable), c'est pourquoi on doit utiliser ces parenthèses.
À titre d'information, sachez que ces fonctions immédiatement exécutées se nomment des Immediately Executed Functions, abrégées IEF. Nous utiliserons cette abréviation dorénavant.
Une fois les parenthèses ajoutées, la fonction (qui est une structure) est exécutée, ce qui fait que l'on obtient une instruction, il faut donc ajouter un point-virgule :
Code : JavaScript
1 2 3 |
(function() { // Code isolé })(); |
Et voilà enfin notre code isolé !
Je vois juste une IEF pour ma part… En quoi mon code est isolé ?
Notre fonction anonyme fonctionne exactement comme une fonction classique, sauf qu'elle ne possède pas de nom et qu'elle est exécutée immédiatement, ce sont les deux seules différences. Ainsi donc, la règle de la portée des variables s'applique aussi à cette fonction anonyme.
Bref, l'intérêt de cet « isolement de code » concerne la portée des variables : vous pouvez créer autant de variables que vous le souhaitez dans cette fonction avec les noms que vous souhaitez, tout sera détruit une fois que votre fonction aura fini de s'exécuter. Exemple (lisez bien les commentaires) :
Code : JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 |
var test = 'noir'; // On crée une variable « test » contenant le mot « noir »
(function() { // Début de la zone isolée
var test = 'blanc'; // On crée une variable du même nom avec le contenu « blanc » dans la zone isolée
alert('Dans la zone isolée, la couleur est : ' + test);
})(); // Fin de la zone isolée. Les variables créées dans cette zone sont détruites.
alert('Dans la zone non-isolée, la couleur est : ' + test); // Le texte final contient bien //le mot « noir » vu que la « zone isolée » n'a aucune influence sur le reste du code |
Allez, une dernière chose avant de finir ce chapitre !
Les zones isolées sont pratiques (vous découvrirez bien vite pourquoi) mais parfois on aimerait bien enregistrer dans le code global une des valeurs générées dans une zone isolée. Pour cela il vous suffit de procéder de la même façon qu'avec une fonction classique, c'est-à-dire comme ceci :
Code : JavaScript
1 2 3 4 5 6 7 |
var sayHello = (function() {
return 'Yop !';
})();
alert(sayHello); // Affiche : « Yop ! » |
Et voilà tout ! Le chapitre des fonctions est enfin terminé ! Il est très important, je vous conseille de le relire un autre jour si vous n'avez pas encore tout compris. Et pensez bien à vous exercer entre temps !
Créé avec HelpNDoc Personal Edition: Créer des documents d'aide CHM facilement