Dynamisez vos sites web avec JavaScript !

Voici un chapitre très important, tant par sa longueur que par les connaissances qu'il permet d'acquérir ! Vous allez y découvrir ce que sont exactement les fonctions et comment en créer vous-mêmes. Tout y passera, vous saurez gérer vos variables dans les fonctions, utiliser des arguments, retourner des valeurs, créer des fonctions dites « anonymes », bref, tout ce qu'il vous faut pour faire des fonctions utiles !

Sur ce, nous allons tout de suite commencer, parce qu'il y a du boulot !

Concevoir des fonctions

Dans les chapitres précédents vous avez découvert quatre fonctions :alert(),prompt(),confirm()etparseInt(). En les utilisant, vous avez pu constater que chacune de ces fonctions avait pour but de mener à bien une action précise, reconnaissable par un nom explicite.

Pour faire simple, si l'on devait associer une fonction à un objet de la vie de tous les jours, ce serait le moteur d'une voiture : vous tournez juste la clé pour démarrer le moteur et celui-ci fait déplacer tout son mécanisme pour renvoyer sa force motrice vers les roues. C'est pareil avec une fonction : vous l'appelez en lui passant éventuellement quelques paramètres, elle va ensuite exécuter le code qu'elle contient puis va renvoyer un résultat en sortie.

Le plus gros avantage d'une fonction est que vous pouvez exécuter un code assez long et complexe juste en appelant la fonction le contenant. Cela réduit considérablement votre code et le simplifie d'autant plus ! Seulement, vous êtes bien limités en utilisant seulement les fonctions natives du JavaScript. C'est pourquoi il vous est possible de créer vos propres fonctions, c'est ce que nous allons étudier tout au long de ce chapitre.

Créer sa première fonction

On ne va pas y aller par quatre chemins, voici comment écrire une fonction :

function myFunction(arguments) {
    // Le code que la fonction va devoir exécuter
}

Décortiquons un peu tout ça et analysons un peu ce que nous pouvons lire dans ce code :

• Le mot-cléfunctionest présent à chaque déclaration de fonction. C'est lui qui permet de dire « Voilà, j'écris ici une fonction ! » ;

• Vient ensuite le nom de votre fonction, icimyFunction;

• S'ensuit un couple de parenthèses contenant ce que l'on appelle des arguments. Ces arguments servent à fournir des informations à la fonction lors de son exécution. Par exemple, avec la fonctionalert()quand vous lui passez en paramètre ce que vous voulez afficher à l'écran ;

• Et vient enfin un couple d'accolades contenant le code que votre fonction devra exécuter.

Il est important de préciser que tout code écrit dans une fonction ne s'exécutera que si vous appelez cette dernière (« appeler une fonction » signifie « exécuter »). Sans ça, le code qu'elle contient ne s'exécutera jamais.

Bien, maintenant que vous connaissez un peu le principe d'une fonction, voici un petit exemple :

function showMsg() {
    alert('Et une première fonction, une !');
}

showMsg(); // On exécute ici le code contenu dans la fonction

• Essayer le code
  

Dans ce code nous pouvons voir la déclaration d'une fonctionshowMsg()qui exécute elle-même une autre fonction qui n'est autre quealert()avec un message prédéfini.
Bien sûr, tout code écrit dans une fonction ne s'exécute pas immédiatement, sinon l'intérêt serait nul. C'est pourquoi à la fin du code on appelle la fonction afin de l'exécuter, ce qui nous affiche le message souhaité.

Un exemple concret

Comme nous le disions plus haut, l'intérêt d'une fonction réside notamment dans le fait de ne pas avoir à réécrire plusieurs fois le même code. Nous allons ici étudier un cas intéressant où l'utilisation d'une fonction va se révéler utile :

var result;

result = parseInt(prompt('Donnez le nombre à multiplier par 2 :'));
alert(result * 2);

result = parseInt(prompt('Donnez le nombre à multiplier par 2 :'));
alert(result * 2);

Comme vous pouvez le constater, nous avons écrit ici exactement deux fois le même code, ce qui nous donne un résultat peu efficace. Nous pouvons envisager d'utiliser une boucle mais si nous voulons afficher un texte entre les deux opérations comme ceci alors la boucle devient inutilisable :

var result;

result = parseInt(prompt('Donnez le nombre à multiplier par 2 :'));
alert(result * 2);

alert('Vous en êtes à la moitié !');

result = parseInt(prompt('Donnez le nombre à multiplier par 2 :'));
alert(result * 2);

Notre solution, ici, est donc de faire appel au système des fonctions de cette façon :

function byTwo() {
    var result = parseInt(prompt('Donnez le nombre à multiplier par 2 :'));
    alert(result * 2);
}

byTwo();

alert('Vous en êtes à la moitié !');

byTwo();

Essayer le code

Concrètement, qu'est-ce qui a changé ? Eh bien, tout d'abord, nous avons créé une fonction qui contient le code à exécuter deux fois (ou autant de fois qu'on le souhaite). Ensuite, nous faisons la déclaration de notre variableresultdirectement dans notre fonction (oui, c'est possible, vous allez obtenir de plus amples explications d'ici peu) et surtout nous appelons deux fois notre fonction plutôt que de réécrire le code qu'elle contient.

Voilà l'utilité basique des fonctions : éviter la répétition d'un code. Mais leur utilisation peut être largement plus poussée, continuons donc sur notre lancée !

La portée des variables

Bien, vous savez créer une fonction basique mais pour le moment vous ne pouvez rien faire de bien transcendant. Pour commencer à faire des fonctions vraiment utiles il vous faut apprendre à utiliser les arguments et les valeurs de retour mais nous allons tout d'abord devoir passer par une étude barbante des fonctions :

La portée des variables

Derrière ce titre se cache un concept assez simple à comprendre mais pas forcément simple à mettre en pratique car il est facile d'être induit en erreur si on ne fait pas attention. Tout d'abord, nous allons commencer par faire un constat assez flagrant à l'aide de deux exemples :

var ohai = 'Hello world !';

function sayHello() {
    alert(ohai);
}

sayHello();

Essayer le code

Ici, pas de problème, on déclare une variable dans laquelle on stocke du texte puis on crée une fonction qui se charge de l'afficher à l'écran et enfin on exécute cette dernière. Maintenant, nous allons légèrement modifier l'ordre des instructions mais l'effet devrait normalement rester le même :

function sayHello() {
    var ohai = 'Hello world !';
}

sayHello();

alert(ohai);

Essayer le code

Alors ? Aucun résultat ? Ce n'est pas surprenant ! Il s'est produit ce que l'on appelle une erreur : en clair, le code s'est arrêté car il n'est pas capable d'exécuter ce que vous lui avez demandé. L'erreur en question (nous allons revenir sur l'affichage de cette erreur dans un futur chapitre) nous indique que la variableohain'existe pas au moment de son affichage avec la fonctionalert()alors que nous avons pourtant bien déclaré cette variable dans la fonctionsayHello().

Là, ça fonctionnera ! Voilà tout le concept de la portée des variables : toute variable déclarée dans une fonction n'est utilisable que dans cette même fonction ! Ces variables spécifiques à une seule fonction ont un nom : les variables locales.

Les variables globales

À l'inverse des variables locales, celles déclarées en-dehors d'une fonction sont nommées les variables globales car elles sont accessibles partout dans votre code, y compris à l'intérieur de vos fonctions.

À ce propos, qu'est-ce qui se produirait si je créais une variable globale nomméemessageet une variable locale du même nom ? Essayons !

var message = 'Ici la variable globale !';

function showMsg() {
    var message = 'Ici la variable locale !';
    alert(message);
}

showMsg();

alert(message);

Essayer le code

Comme vous pouvez le constater, quand on exécute la fonction, la variable locale prend le dessus sur la variable globale de même nom pendant tout le temps de l'exécution de la fonction. Mais une fois la fonction terminée (et donc, la variable locale détruite) c'est la variable globale qui reprend ses droits.
Il existe une solution pour utiliser la variable globale dans une fonction malgré la création d'une variable locale de même nom, mais nous étudierons cela bien plus tard car ce n'est actuellement pas de votre niveau.

À noter que, dans l'ensemble, il est plutôt déconseillé de créer des variables globales et locales de même nom, cela est souvent source de confusion.

Les variables globales ? Avec modération !

Maintenant que vous savez faire la différence entre les variables globales et locales, il vous faut savoir quand est-ce qu'il est bon d'utiliser l'une ou l'autre. Car malgré le sens pratique des variables globales (vu qu'elles sont accessibles partout) elles sont parfois à proscrire car elles peuvent rapidement vous perdre dans votre code (et engendrer des problèmes si vous souhaitez partager votre code, mais vous découvrirez cela par vous-même). Voici un exemple de ce qu'il ne faut pas faire :

var var1 = 2,
    var2 = 3;

function calculate() {
    alert(var1 * var2); // Affiche : « 6 » (sans blague ?!)
}

calculate();

Dans ce code, vous pouvez voir que les variablesvar1etvar2ne sont utilisées que pour la fonctioncalculate()et pour rien d'autre, or ce sont ici des variables globales. Par principe, cette façon de faire est stupide : vu que ces variables ne servent qu'à la fonctioncalculate(), autant les déclarer dans la fonction de la manière suivante :

function calculate() {
    var var1 = 2,
        var2 = 3;
    alert(var1 * var2);
}

calculate();

Ainsi, ces variables n'iront pas interférer avec d'autres fonctions qui peuvent utiliser des variables de même nom. Et surtout, cela reste quand même plus logique !

Bien, vous avez terminé la partie concernant la portée des variables. Faites bien attention ! Cela peut vous paraître simple au premier abord mais il est facile de se faire piéger, je vous conseille de faire tous les tests qui vous passent par la tête afin de bien explorer toutes les possibilités et les éventuels pièges.

Les arguments et les valeurs de retour

Maintenant que vous connaissez le concept de la portée des variables, nous allons pouvoir aborder les arguments et les valeurs de retour. Ils permettent de faire communiquer vos fonctions avec le reste de votre code. Ainsi, les arguments permettent d'envoyer des informations à votre fonction tandis que les valeurs de retour représentent tout ce qui est retourné par votre fonction une fois que celle-ci a fini de travailler.

Les arguments

Créer et utiliser un argument

Comme nous venons de le dire, les arguments sont des informations envoyées à une fonction. Ces informations peuvent servir à beaucoup de choses, libre à vous de les utiliser comme vous le souhaitez. D'ailleurs, il vous est déjà arrivé d'envoyer des arguments à certaines fonctions, par exemple avec la fonctionalert():

// Voici la fonction alert sans argument, elle n'affiche rien :
alert();

// Et avec un argument, elle affiche ce que vous lui envoyez :
alert('Mon message à afficher');

Selon les fonctions, vous n'aurez parfois pas besoin de spécifier d'arguments, parfois il vous faudra en spécifier un, voire plusieurs. Il existe aussi des arguments facultatifs que vous n'êtes pas obligés de spécifier.

Pour créer une fonction avec un argument, il vous suffit d'écrire de la façon suivante :

function myFunction(arg) { // Vous pouvez mettre une espace entre le nom de la fonction et la parenthèse ouvrante si vous le souhaitez, la syntaxe est libre !
    // Votre code…
}

Ainsi, si vous passez un argument à cette même fonction, vous retrouverez dans la variableargce qui a été passé en paramètre. Exemple :

function myFunction(arg) { // Notre argument est la variable « arg »
    // Une fois que l'argument a été passé à la fonction, vous allez le retrouver dans la variable « arg »
    alert('Votre argument : ' + arg);
}

myFunction('En voilà un beau test !');

Essayer le code

Encore mieux ! Puisqu'un argument n'est qu'une simple variable, vous pouvez très bien lui passer ce que vous souhaitez, tel que le texte écrit par un utilisateur :

function myFunction(arg) {
    alert('Votre argument : ' + arg);
}

myFunction(prompt('Que souhaitez-vous passer en argument à la fonction ?'));

Essayer le code

Certains d'entre vous seront peut-être étonnés de voir la fonctionprompt()s'exécuter avant la fonctionmyFunction(). Ceci est parfaitement normal, faisons un récapitulatif de l'ordre d'exécution de ce code :

• La fonctionmyFunction()est déclarée, son code est donc enregistré en mémoire mais ne s'exécute pas tant qu'on ne l'appelle pas ;

• À la dernière ligne, nous faisons appel àmyFunction()mais en lui passant un argument, la fonction va donc attendre de recevoir tous les arguments avant de s'exécuter ;

• La fonctionprompt()s'exécute puis renvoie la valeur entrée par l'utilisateur, ce n'est qu'une fois cette valeur renvoyée que la fonctionmyFunction()va pouvoir s'exécuter car tous les arguments auront enfin été reçus ;

• Enfin,myFunction()s'exécute !

La portée des arguments

Si nous avons étudié dans la partie précédente la portée des variables ce n'est pas pour rien : cette portée s'applique aussi aux arguments. Ainsi, lorsqu'une fonction reçoit un argument, celui-ci est stocké dans une variable dont vous avez choisi le nom lors de la déclaration de la fonction. Voici, en gros, ce qui se passe quand un argument est reçu dans la fonction :

function scope(arg) {
    // Au début de la fonction, la variable « arg » est créée avec le contenu de l'argument qui a été passé à la fonction
  
    alert(arg); // Nous pouvons maintenant utiliser l'argument comme souhaité : l'afficher, le modifier, etc.

    // Une fois l'exécution de la fonction terminée, toutes les variables contenant les arguments sont détruites
}

Ce fonctionnement est exactement le même que lorsque vous créez vous-mêmes une variable dans la fonction : elle ne sera accessible que dans cette fonction et nulle part ailleurs. Les arguments sont propres à leur fonction, ils ne serviront à aucune autre fonction.

Les arguments multiples

Si votre fonction a besoin de plusieurs arguments pour fonctionner il faudra les écrire de la façon suivante :

function moar(first, second) {
    // On peut maintenant utiliser les variables « first » et « second » comme on le souhaite :
    alert('Votre premier argument : ' + first);
    alert('Votre deuxième argument : ' + second);
}

Comme vous pouvez le constater, les différents arguments sont séparés par une virgule, comme lorsque vous voulez déclarer plusieurs variables avec un seul mot-clévar! Maintenant, pour exécuter notre fonction, il ne nous reste plus qu'à passer les arguments souhaités à notre fonction, de cette manière :

moar('Un !', 'Deux !');

Bien sûr, nous pouvons toujours faire interagir l'utilisateur sans problème :

moar(prompt('Entrez votre premier argument :'), prompt('Entrez votre deuxième argument :'));

Essayer le code complet

Vous remarquerez d'ailleurs que la lisibilité de la ligne de ce code n'est pas très bonne, nous vous conseillons de modifier la présentation quand le besoin s'en fait ressentir. Pour notre part, nous aurions plutôt tendance à écrire cette ligne de cette manière :

moar(
    prompt('Entrez votre premier argument :'),
    prompt('Entrez votre deuxième argument :')
);

C'est plus propre, non ?

Les arguments facultatifs

Maintenant, admettons que nous créions une fonction basique pouvant accueillir un argument mais que l'on ne le spécifie pas à l'appel de la fonction, que se passera-t-il ?

function optional(arg) {
    alert(arg); // On affiche l'argument non spécifié pour voir ce qu'il contient
}

optional();

Essayer le code

undefined, voilà ce que l'on obtient, et c'est parfaitement normal ! La variablearga été déclarée par la fonction mais pas initialisée car vous ne lui avez pas passé d'argument. Le contenu de cette variable est donc indéfini.

Prenons un exemple concret : imaginez que l'on décide de créer une fonction qui affiche à l'écran une fenêtre demandant d'inscrire quelque chose (comme la fonctionprompt()). La fonction possède deux arguments : le premier doit contenir le texte à afficher dans la fenêtre, et le deuxième (qui est un booléen) autorise ou non l'utilisateur à quitter la fenêtre sans entrer de texte. Voici la base de la fonction :

function prompt2(text, allowCancel) {
    // Le code… que l'on ne créera pas :p
}

L'argumenttextest évidemment obligatoire vu qu'il existe une multitude de possibilités. En revanche, l'argumentallowCancelest un booléen, il n'y a donc que deux possibilités :

• Àtrue, l'utilisateur peut fermer la fenêtre sans entrer de texte ;

• Àfalse, l'utilisateur est obligé d'écrire quelque chose avant de pouvoir fermer la fenêtre.

Comme la plupart des développeurs souhaitent généralement que l'utilisateur entre une valeur, on peut considérer que la valeur la plus utilisée serafalse.

Et c'est là que l'argument facultatif entre en scène ! Un argument facultatif est évidemment facultatif (eh oui ! ) mais doit généralement posséder une valeur par défaut dans le cas où l'argument n'a pas été rempli, dans notre cas ce serafalse. Ainsi, on peut donc améliorer notre fonction de la façon suivante :

function prompt2(text, allowCancel) {

    if (typeof allowCancel === 'undefined') { // Souvenez-vous de typeof, pour vérifier le type d'une variable
        allowCancel = false;
    }

    // Le code… que l'on ne créera pas =p
}

prompt2('Entrez quelque chose :'); // On exécute la fonction seulement avec le premier argument, pas besoin du deuxième

De cette façon, si l'argument n'a pas été spécifié pour la variableallowCancel(comme dans cet exemple) on attribue alors la valeurfalseà cette dernière. Bien sûr, les arguments facultatifs ne possèdent pas obligatoirement une valeur par défaut, mais au moins vous saurez comment faire si vous en avez besoin.

Petit piège à éviter : inversons le positionnement des arguments de notre fonction. Le second argument passe en premier et vice-versa. On se retrouve ainsi avec l'argument facultatif en premier et celui obligatoire en second, la première ligne de notre code est donc modifiée de cette façon :

function prompt2(allowCancel, text) {

Imaginons maintenant que l'utilisateur de votre fonction ne souhaite remplir que l'argument obligatoire, il va donc écrire ceci :

prompt2('Le texte');

Oui, mais le problème c'est qu'au final son texte va se retrouver dans la variableallowCancelau lieu de la variabletext!

Alors quelle solution existe-t-il donc pour résoudre ce problème ? Aucune ! Vous devez impérativement mettre les arguments facultatifs de votre fonction en dernière position, vous n'avez pas le choix.

Les valeurs de retour

Comme leur nom l'indique, nous allons parler ici des valeurs que l'on peut retourner avec une fonction. Souvenez-vous pour les fonctionsprompt(),confirm()etparseInt(), chacune d'entre elles renvoyait une valeur que l'on stockait généralement dans une variable. Nous allons donc apprendre à faire exactement la même chose ici mais pour nos propres fonctions.

Pour faire retourner une valeur à notre fonction, rien de plus simple, il suffit d'utiliser l'instructionreturnsuivie de la valeur à retourner. Exemple :

function sayHello() {
    return 'Bonjour !'; // L'instruction « return » suivie d'une valeur, cette dernière est donc renvoyée par la fonction
}

alert(sayHello()); // Ici on affiche la valeur retournée par la fonction sayHello()

Maintenant essayons d'ajouter une ligne de code après la ligne contenant notrereturn:

function sayHello() {
    return 'Bonjour !';
    alert('Attention ! Le texte arrive !');
}

alert(sayHello());

Essayer le code

Comme vous pouvez le constater, notre premieralert()ne s'est pas affiché ! Cela s'explique par la présence dureturn: cette instruction met fin à la fonction, puis retourne la valeur. Pour ceux qui n'ont pas compris, la fin d'une fonction est tout simplement l'arrêt de la fonction à un point donné (dans notre cas, à la ligne dureturn) avec, éventuellement, le renvoi d'une valeur.

Ce fonctionnement explique d'ailleurs pourquoi on ne peut pas faire plusieurs renvois de valeurs pour une même fonction : si on écrit deuxreturnà la suite, seul le premier sera exécuté puisque le premierreturnaura déjà mis un terme à l'exécution de la fonction.

Voilà tout pour les valeurs de retour. Leur utilisation est bien plus simple que pour les arguments mais reste vaste quand même, je vous conseille de vous entraîner à vous en servir car elles sont très utiles !

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.

Les fonctions anonymes : les bases

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 :

function (arguments) {
    // Le code de votre fonction anonyme
}

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 :

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 :

sayHello(); // Affiche : « Bonjour ! »

Essayer le code complet

On peut dire, en quelque sorte, que la variablesayHelloest 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.

Retour sur l'utilisation des points-virgules

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 :

function structure() {
    // Du code…
}

il s'agit d'une structure seule, pas besoin de point-virgule. Tandis que si j'écris :

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 :

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.

Les fonctions anonymes : isoler son code

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 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 :

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 :

(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 :

function test() {
    // Du code…
}

test();

Comme vous pouvez le constater, pour exécuter la fonctiontest()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 :

(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 :

// 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.

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 :

(function() {
    // Code isolé
})();

Et voilà enfin notre code 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) :

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

Essayer le 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 :

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 !

En résumé

• Il existe des fonctions natives, mais il est aussi possible d'en créer, avec le mot-cléfunction.

• Les variables déclarées avecvarau sein d'une fonction ne sont accessibles que dans cette fonction.

• Il faut éviter le plus possible d'avoir recours aux variables globales.

• Une fonction peut recevoir un nombre défini ou indéfini de paramètres. Elle peut aussi retourner une valeur ou ne rien retourner du tout.

• Des fonctions qui ne portent pas de nom sont des fonctions anonymes et servent à isoler une partie du code.

• Q.C.M.
  

• Questionnaire didactique
  

• Déclarer une fonction
  

• Écrire une fonction pour comparer deux nombres
  

• Écrire une fonction qui demande un nombre à l'utilisateur