Programmation JavaScript/Fonctions utilisateur
Déclaration et identification
[modifier | modifier le wikicode]Dans tous les cas (sauf deux), la fonction nécessite un Identificateur établi avec les mêmes règles que pour les variables.
Pour déclarer une fonction, on emploie la syntaxe suivante:
function ma_fonction()
C'est à dire, utilisation du mot réservé function suivi de l'identificateur et de parenthèses. Ces dernières serviront à définir les paramètres de la fonction.
Fonction sans paramètres
[modifier | modifier le wikicode]La plupart des fonctions servent à effectuer des opérations sur des variables données en argument, mais ce n'est pas une obligation.
function init()
{
if (!navigator.cookieEnabled)...
}
Transmission de paramètres
[modifier | modifier le wikicode]Transmission classique
[modifier | modifier le wikicode]Les paramètres sont transmis à la fonction entre les parenthèses de la déclaration. Comme javascript est un langage à typage dynamique, les paramètres se résument à de simples identificateurs séparés par des virgules.
function display_message(s1,s2)
{
var result = s1 + " " + s2;
alert(result);
}
Autre mode de paramétrage
[modifier | modifier le wikicode]JavaScript offre beaucoup de souplesse dans l'envoi d'arguments à une fonction. Le langage ne vous oblige pas à rédiger des fonctions au nombre d'arguments préétablis.
Un mécanisme simple permet à tout moment de compter et d'accéder aux paramètres. JavaScript autorise l'appel d'une fonction en omettant les paramètres. Ceci ne déclenche pas d'erreur, mais c'est une incivilité, source de bugs.
La fonction, elle, peut à tout moment se rendre compte de la présence, absence, nombre et nature des paramètres, et ceci à travers un tableau intégré à la fonction et nommé "arguments".
function foo(param1)
{
if (arguments.length==0)
alert("fonction foo : paramètre manquant");
}
// Appel de la fonction sans paramètre :
foo(); // Affiche "paramètre manquant";
L'exemple suivant montre comment tirer partie du tableau arguments pour traiter des données dont on ne connaît pas le nombre au départ.
function concat_chaînes()
{
result = "";
for(i = 0; i < arguments.length; i++) // Pour chaque argument
{
result += arguments[i] + " "; // Ajouter le contenu et une espace à result
}
return result; // renvoyer le résultat
}
alert(concat_chaînes("Concaténation","de","chaînes")); // Affiche "Concaténation de chaînes "
Valeur renvoyée
[modifier | modifier le wikicode]Avec le mot réservé return, la fonction est capable de retourner une valeur au programme appelant. Cette valeur est contenue dans une donnée en tout point comparable à une variable typée.
return vide
[modifier | modifier le wikicode]Le mot réservé return peut s'employer sans valeur de retour, uniquement dans le but de "sortir" de la fonction. Il est possible d'utiliser plusieurs fois return dans une fonction, l'exécution sera interrompue au premier return rencontré.
function foo(p)
{
var resultat = "";
if (condition_1)
return; // Sortie de secours
else
resultat = traitement(p);
return resultat; // Sortie normale
}
Note : Bien que parfaitement valide, cette pratique est généralement déconseillée en algorithmie. Une fonction doit s'efforcer d'avoir une entrée et une sortie. Cependant le recours à cette pratique est parfois nécessaire pour conserver une structure de code simple, par exemple pour éviter un trop grand niveau d'imbrication de conditions.
Corps de la fonction
[modifier | modifier le wikicode]Variables
[modifier | modifier le wikicode]La fonction peut avoir besoin de créer des variables pour mener à bien ses calculs. Dans ce cas, il est indispensable de garder en tête qu'une variable non-précédée du mot réservé var se révèle globale, et donc source de conflits. Une bonne pratique consiste à déclarer ses variables en début de fonction, même si rien ne vous y oblige.
function foo()
{
var v1;
var v2;
}
Sous-fonction
[modifier | modifier le wikicode]Une fonction peut contenir des sous-fonctions qui lui sont propre et l'aide à accomplir sa tâche.
function foo(n)
{
function bar(p)
{
return p*p*p;
}
for (var i = 0; i < n; i++)
bar(i);
}
Appel de la fonction
[modifier | modifier le wikicode]Nous pouvons admettre quatre modèles de fonction :
Avec ou sans paramètres, avec ou sans valeur de retour.
Sans valeur de retour
[modifier | modifier le wikicode]Sans valeur de retour, la fonction est un verbe. Il suffit de la nommer avec ses paramètres, et elle s'exécute :
<body onload="init()">
Avec valeur de retour
[modifier | modifier le wikicode]Si l'on a prévu que la fonction renvoie une valeur, on peut recueillir celle-ci dans une variable, ou l'utiliser directement, ou l'ignorer si bon nous semble. Le résultat renvoyé par la fonction a toutes les caractéristiques d'une variable (type, valeur, utilisabilité avec des opérateurs...
var le_cube_de_trois = cube(3); // Valeur de retour recueillie dans une variable
alert("Cube de 3 : " + cube(3)); // Affiche "Cube de 3 : 27" (concaténation)
cube(3); // Appel sourd de la fonction, on ignore le résultat
Sans paramètre
[modifier | modifier le wikicode]Les parenthèses demeurent nécessaire à l'identification complète de la fonction. Elles restent vide. (Les espaces sont possibles, ainsi que les commentaires slash-étoile)
n = foo(); n = foo ( ); n = foo(/* J'occupe l'espace... */);
Avec paramètre
[modifier | modifier le wikicode]Les paramètres envoyés à une fonction peuvent être sous forme de constante, de référence à une variable ou d'expression littérale.
result = foo("Chaîne littérale", ma_var, true); // Littéral, variable et constante booléenne
Que deviennent les variables envoyées
[modifier | modifier le wikicode]Les variables envoyées en paramètre d'une fonction subissent ou ne subissent pas de modifications selon leur nature:
Primitives
[modifier | modifier le wikicode]Si la variable est d'un type primitif comme string, bool et number, le mécanisme d'appel de la fonction envoie en fait des copies de la variable. Les modifications opérées par la fonction n'ont pas de répercussion sur la variable originale, sous réserve, bien entendu qu'il n'y ait pas de collision d'identification avec une variable globale.
function foo(str)
{
str = "c'est pas si important";
}
s = "Très important";
foo(s);
alert(s); // Affiche "Très important" : pas d'altération
Instance d'un objet
[modifier | modifier le wikicode]Il en est tout autrement avec les instances d'un objet transmis en paramètre. Dans ce cas, le mécanisme d'appel de la fonction envoie un pointeur sur l'objet, et la fonction a toute latitude pour opérer des modifications sur les propriétés ou données de l'objet.
function modif_array(tab)
{
tab[0] = "c'est pas si important";
}
t = Array();
t[0] = "Très important";
modif_array(t);
alert(t[0]); // Affiche "c'est pas si important" : modification du contenu de l'objet
Fonction sans identificateur
[modifier | modifier le wikicode]Une fonction déclarée sans identificateur est une expression de type "function" qui peut être utilisée comme argument d'une fonction, ou affectée à une variable. L'invocation d'une telle fonction se fait en utilisant le paramètre ou la variable.
var superieur = function(a,b){
return a>b;
};
if (superieur(5,4)) alert("5 > 4");
function affiche(objet, f_tostring)
{
alert( f_tostring(objet) );
}
var personne = { "nom":"clinton", "prenom":"bill" };
affiche(personne, function(o){
return o.prenom + " " + o.nom;
}
);
Notation fléchée
[modifier | modifier le wikicode]Les versions récentes du langage Javascript supportent la notation fléchée pour la création de fonction[1].
Dans cette notation, le ou les arguments sont spécifiés avant la flèche => qui est suivie soit d'un bloc de code à exécuter (accolades), soit d'une valeur ou expression à retourner.
Exemple de calcul de somme (bloc de code) :
donnees => {
var somme = 0;
for (var i=0 ; i<donnees.length ; i++)
somme += donnees[i];
return somme;
}
Exemple de fonction retournant la valeur d'une expression :
(a,b) => a + b;
Les deux cas se distinguent par l'utilisation d'accolades. Pour retourner une expression de type objet, comme les accolades doivent être utilisés pour ce cas, il faut entourer l'objet de parenthèses :
(a,b) => ( {
min: a,
max: b
} );
Références
[modifier | modifier le wikicode]- ↑ Parmi les navigateurs supportant cette syntaxe : Chrome 45, Edge 12, Firefox 22, Safari 10 et Opera 32 selon https://www.w3schools.com/js/js_arrow_function.asp