Fonctions

Une fonction est un regroupement d'instructions sous une même instruction dont le nom est défini par l'auteur du script.

Les avantages d'avoir recours aux fonctions sont nombreux :

des scripts organisés ;
des scripts réutilisables ;
des scripts maintenables ;
des scripts évolutifs.

Créer une fonction

Pour créer une fonction, il vous faut définir un nom respectant les règles suivantes :

il doit être significatif et représentatif des traitements correspondants ;
il doit commencer par une lettre (en minuscule ou en majuscule) ou par le caractère "_" ;
il peut comporter des lettres, des chiffres et les caractères "_" et "&" ;
il ne doit pas correspondre à un nom réservé ; c'est-à-dire un nom déjà utilisé dans Javascript.

Une fois le nom choisi (maFonction dans notre cas), il suffit de l'écrire dans votre code (suivi des signes ()) en le faisant précéder du nom réservé function :

function maFonction() {
   // Instructions à exécuter.
}

Enfin, il faut lui associer un bloc d'instructions à exécuter lorsque l'on utilisera cette fonction.

Retourner des données

Il peut être nécessaire qu'une fonction nous fournisse le résultat des traitements effectués en son sein. Pour cela, on utilise à la fin de la fonction le nom réservé return suivi de la valeur à retourner :

function direBonjour() {
   var resultat = "Bonjour Bill !";
   return resultat;
}

Cet exemple peut être réécrit ainsi :

function direBonjour() {
   return "Bonjour Bill !";
}

Les instructions situées après le retour de valeur ne sont pas exécutées. Prenez donc garde de toujours faire ce retour en dernière instruction de votre fonction.

Utiliser une fonction

Une fois notre fonction écrite, on peut l'utiliser dans n'importe quel script (à condition bien sûr que la fonction soit précédemment présente dans notre script) :

maFonction();

Si la fonction retourne des données, il est possible de récupérer ces données dans une variable (et de prévoir si nécessaire de nouveaux traitements par la suite) :

var bonjour = direBonjour();

Dans l'exemple ci-dessus, la variable "bonjour" reçoit la valeur retournée par la fonction "direBonjour", c'est-à-dire "Bonjour Bill !".

Les arguments

Une fonction peut nécessiter certaines données (dit arguments de la fonction) : un même traitement plusieurs résultats possibles.

Les arguments obligatoires

Reprenons l'exemple de la fonction "direBonjour" précédemment écrite et reproduite ci-dessous :

function direBonjour() {
   return "Bonjour Bill !";
}

La fonction "direBonjour" retourne la valeur "Bonjour Bill !". En l'état, seul Bill peut être salué. Un argument est alors nécessaire :

function direBonjour(prenom) {
   return "Bonjour " + prenom + " !";
}

Ici, un argument "prenom" (nom suivant les mêmes règles de nommage qu'une variable) a été ajouté à notre fonction : il se retrouve encadré par les parenthèses suivants le nom de notre fonction.

Grâce à cet argument, notre fonction est désormais bien plus utile :

var bonjourBill = direBonjour("Bill");
var bonjourSteve = direBonjour("Steve");

Dans l'exemple ci-dessus, la variable "bonjourBill" est valorisée par "Bonjour Bill !" ; "bonjourSteve" par "Bonjour Steve !".

L'argument "prenom" est valorisé par "Bill" lors de la première utilisation de la fonction et par "Steve" lors de la deuxième utilisation.

Il est possible d'ajouter autant d'arguments que nécessaires. Pour cela, il faut les séparer par le signe , :

function direBonjour(prenom, nom) {
return "Bonjour " + prenom + " " + nom + " !";
}

Ici, deux arguments "prenom" et "nom" sont ajoutés. Lors de l'utilisation de la fonction, il nous faut désormais valoriser ces deux arguments :

var bonjourBill = direBonjour("Bill", "Gates");
var bonjourSteve = direBonjour("Steve", "Jobs");

Dans l'exemple ci-dessus, la variable "bonjourBill" est valorisée par "Bonjour Bill Gates !" ; "bonjourSteve" par "Bonjour Steve Jobs !".

La création d'une fonction avec des arguments implique, lors de son utilisation, de valoriser chaque argument déclaré.

Les arguments facultatifs

Il est possible de fournir (en plus des arguments obligatoires si déclarés) des arguments supplémentaires donc facultatifs. Pour cela, on utilise le nom réservé "arguments" au sein du bloc d'instructions de la fonction concernée :

function direBonjour() {
var resultat = "Bonjour";
if (arguments.length == 1) {
resultat += " " + arguments[0];
}
resultat += " !";
return resultat;
}

Le nom réservé "arguments" est un tableau de données répertoriant les arguments transmis à la fonction lors de son utilisation. "arguments.length" permet de connaître le nombre d'arguments transmis (incluant ceux obligatoires) tandis que "arguments[0]" permet de récupérer la valeur du premier argument transmis ("arguments[1]" pour le deuxième et ainsi de suite). On verra dans la partie "Tableaux (objet Array)" ces deux écritures plus en détail.

Pour en revenir à l'exemple précédent, la fonction "direBonjour" est dépourvue d'arguments obligatoires. Une première utilisation de cette fonction sans fournir d'argument :

var bonjour = direBonjour();

La valeur retournée par notre fonction valorise la variable "bonjour" par "Bonjour !" (la condition du if échoue ; "arguments.length" vaut 0).

Une deuxième utilisation de cette fonction avec un argument transmis :

var bonjour = direBonjour("Bill");

Intéressons-nous à la structure conditionnelle "if" de notre bloc d'instructions :

la condition est remplie : "arguments" vaut 1 ;
une concaténation est effectuée entre la valeur de "resultat", un espace (" ") et la valeur de l'argument transmis ("Bill").

La valeur retournée par la fonction est alors "Bonjour Bill !".

Cette souplesse offerte avec les arguments de fonction est vraiment très intéressante. Ceci dit, veillez à ne pas trop en abuser au risque de rendre vos scripts plus complexes à comprendre.

La portée des variables

L'utilisation des fonctions apporte un nouveau concept à apprendre : la portée des variables.

Lorsque vous créer une variable au sein d'un bloc d'instructions d'une fonction, cette variable n'est connue que par cette fonction.

Pour illustrer ces propos, voici un exemple :

var nombre = 5;
function maFonction () {
var nombre = 1;
}
maFonction();
nombre++;

Ci-dessous, l'explication de l'exécution de cet exemple (dernière instruction exclue) :

la variable "nombre" est créée et valorisée à 5 ;
la fonction "maFonction" est créée (à ce stade, elle n'est pas utilisée) ;
la fonction "maFonction" est utilisée (le bloc d'instructions de "maFonction" est exécutée) ;
la variable "nombre" est créée et valorisée à 1.

Reste alors la dernière instruction à exécuter : "nombre++;". Mais qu'elle est la valeur de la variable "nombre" : est-ce 5 (avant exécution de "maFonction") ? Est-ce 1 (après exécution de "maFonction") ?

Le nom réservé "var" fait que la variable "nombre" présente dans le bloc d'instructions de "maFonction" n'est connue que de la fonction : on parle de variable locale. Il s'agit d'une autre variable ; elles ont le même nom mais sont bien deux variables distinctes.

La valeur de "nombre" est donc celle connue à l'extérieur du bloc d'instructions de "maFonction", c'est-à-dire 5. Après la dernière instruction, "nombre" vaut désormais 6.

Reprenons le même exemple en omettant cette fois-ci le nom réservé "var" présent dans le bloc d'instructions de "maFonction" :

var nombre = 5;
function maFonction () {
nombre = 1;
}
maFonction();
nombre++;

Ci-dessous, l'explication de l'exécution de cet exemple (dernière instruction exclue) :

la variable "nombre" est créée et valorisée à 5 ;
la fonction "maFonction" est créée (à ce stade, elle n'est pas utilisée) ;
la fonction "maFonction" est utilisée (le bloc d'instructions de "maFonction" est exécutée) ;
la variable "nombre" est valorisée à 1.

L'absence du nom réservé "var" fait que la variable "nombre" présente dans le bloc d'instructions de "maFonction" est connue hors de la fonction : on parle de variable globale. Il s'agit d'une et une seule variable.

La valeur de "nombre" est donc modifiée lors de l'exécution du bloc d'instructions de "maFonction" : "nombre" vaut 1. Après la dernière instruction, "nombre" vaut désormais 2.

Selon vos besoins, il vous faudra alors choisir entre variable locale ou variable globale. Ce choix se fera avec la présence ou non du nom réservé "var" dans le bloc d'instructions de la fonction.