function

Nommer un morceau de code et le paramétrer

Une fonction permet d'éviter d'avoir à écrire plusieurs fois le même code lorsqu'un même traitement doit être mis en oeuvre à plusieurs endroits dans le programme.

Exemple 1.

Un programme dressant la table du 8 :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Table du 8 </title>
    </head>
    <body>
        <script>
        for(let i = 1; i < 11; i++) {
            document.write(`8 * ${i} = ${8 * i} <br>`);
        }
        </script>
    </body>
</html>

Si, dans le même programme, nous avons également besoin de la table de n = 9, de n = 7... on pourrait copier-coller le code précédent. Mais il y a mieux à faire : nommer ce code en le transformant en fonction, n devenant un paramètre de la fonction.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Tables </title>
        <style>
        body{height: 20rem;}
        h2{color: magenta;}
        </style>
    </head>
    <body>
        <script>
        function table(n) {
        	document.write(`<h2>Table du  ${n} </h2>`);
		    for(let i = 1; i < 11; i += 1) {
		        document.write(` ${n} * ${i} = ${n * i} <br>`);
		    }
		    document.write('<br>');
		}
		
		
		table(8); // appel de la fonction table avec l'argument 8
		table(7); // appel de la fonction table avec l'argument 7
        </script>
    </body>
</html>

n est appelé paramètre de la fonction table.

Une fonction peut présenter zéro, ou un, ou plusieurs paramètres.

Exemple 2.

Si l'on veut pouvoir par exemple afficher la table de 1*n à 12*n (au lieu de l'affichage de 1*n à 10*n), on peut ajouter un paramètre marquant le dernier coefficient voulu.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Tables </title>
    </head>
    <body>
        <script>
        function table(n, fin ) {
        	document.write(`<h2>Table du ${n} </h2>`);
		    for(let i = 1; i <= fin; i += 1) {
		        document.write(`${n} * ${i} = ${n * i} <br>`);
		    }
		    document.write('<br>');
		}
		
		
		table(8,12);  
		table(7,5);  
		
        </script>
    </body>
</html>

Image par une fonction

Les deux fonctions définies ci-dessus ne font pas correspondre d'image à n (ou au couple (n, fin) ). Ces fonctions se contentent d'afficher à l'écran un message. Dans certains langages, on parle plutôt de procédure que de fonction dans une telle situation.

A quoi ressemblerait une fonction faisant correspondre une image à l'entier n ?

Prenons l'exemple d'une fonction mathématique qui à un nombre x associe son carré :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> fonction carré </title>
    </head>
    <body>
        <script>
        function carre(x) {
        	 return x * x;
		}
		
		
		carre(3);
		
		document.write(carre(5));  document.write("<br>"); 
		document.write(carre(6) + 2);  document.write("<br>"); 
		
        </script>
    </body>
</html>

On constate ci-dessus que le premier appel ( carre(3); ) ne donne aucun affichage. C'est normal, l'appel consiste à appliquer la fonction au nombre 3 : le calcul de 3*3 est effectué et la fonction se termine (on n'a pas demandé d'afficher le résultat).
Dans le second appel, le principe est le même : on calcule 5 * 5, mais cette fois ce calcul est suivi d'une demande d'affichage (avec document.write()). On obtient donc le résultat à l'écran.
Dans la dernière ligne, on voit que le résultat d'une fonction peut être utilisé comme le serait une valeur de variable.

Si l'on reprend l'exemple de la table de multiplication, on pourrait définir la fonction table de façon à ce qu'elle "calcule" la chaîne de caractères correspondant à la table mais sans affichage.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Tables </title>
    </head>
    <body>
        <script>
        function table(n, fin) {
			ch = `<h2>Table du ${n} </h2>`;
		    for(let i = 1; i <= fin; i += 1) {
				ch += `${n} * ${i} = ${n * i} <br>`;
		    }
		   ch += `<br>`;
		   return ch;
		}
		
		
		table(8,12);  // pas d'affichage, le calcul de la chaîne est fait mais sans affichage.
		document.write(table(7,5)); // calcul puis affichage.
		
        </script>
    </body>
</html>

Le rôle de découpe en unités logiques

Un rôle important des fonctions est de découper votre programme en "petites unités logiques", en "petits modules indépendants" faciles à comprendre. L'usage des fonctions, par ce rôle, facilite la conception d'un programme mais aussi sa relecture, sa réutilisation, les corrections.

Nous verrons des exemples dans la suite (exercices...).

Présentons l'idée sur un exemple non détaillé. Imaginons que nous programmions un jeu. Dans ce jeu, une partie du programme gère l'affichage, une partie gère l'enregistrement des scores, une partie gère l'évolution d'un personnage, etc...

Si tout le code (boucles, tests if ...) est mis bout à bout, même en étant commenté, il devient illisible.

Si par contre, chaque action importante est effectuée via une fonction portant un nom explicite (par exemple afficherScore()), alors le code devient plus facile à lire :

je ne lis qu'une seule fois le code nécessaire à l'affichage.
Lorsque je lis afficherScore(), je n'ai pas besoin de réfléchir : je sais ce qui va être effectué.
Enfin si mon affichage n'est pas correct, je n'ai à modifier le code qu'à un seul endroit : l'endroit où ma fonction d'affichage est définie et non tous les endroits où mon programme demande un affichage.

Si l'on multiplie cette remarque pour toutes les tâches, on peut deviner le gain en lisibilité (et donc en maintenabilité) d'un code bien découpé en fonctions.

Le type d'une fonction

Le type d'une fonction, en langage javascript, est function.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> fonction carré </title>
    </head>
    <body>
        <script>
        function carre(x) {
        	 return x * x;
		}
		 
		document.write("Type de la fonction carre : ");  
		document.write(typeof(carre));   
		document.write(".<br>");  
		
		
		document.write("Ne doit pas être confondu avec le type de ce qui est retourné. <br>"); 
		document.write("Ici le type de ce que retourne la fonction est : ");  
		document.write(typeof(carre(3)) + '.');   
        </script>
    </body>
</html>

La portée d'une variable

On peut dans un même programme avoir deux variables indépendantes et portant le même nom grâce à la notion de "portée".

Exemple 1

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> portée </title>
    </head>
    <body>
    	
    	<p> Valeur de la variable n de portée limitée au corps de la fonction :
				<span id="un"></span>
    	</p>
     	 
     	<p> Valeur de la variable n définie hors de la fonction :
				<span id="deux"></span>
     	</p>
      
     	
        <script>
        function f() {
        	let n = 5;
        	document.querySelector("#un").innerHTML = n;
		}
		
		let n = 7;
		// appel de la fonction f
		f(); 
		// on inscrit la valeur de n dans le paragraphe d'identifiant deux
		// après l'appel à f :
		document.querySelector("#deux").innerHTML = n;
        </script>
    </body>
</html>

On constate que la valeur de n affichée en second est bien 7, bien que la fonction ait été appelée entre temps. La variable n définie dans la fonction f est une autre variable. On peut imaginer que les deux variables sont indexées:
il y a la variable n_{partie principale du programme}
et la variable n_f.

On peut dans ce cas réécrire simplement l'ensemble du code sous une forme tout à fait équivalente :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> portée </title>
    </head>
    <body>
    	
    	<p> Valeur   de la variable k de portée limitée au corps de la fonction :
				<span id="un"></span>
    	</p>
     	
     	<p> Valeur   de la variable n définie hors de la fonction :
				<span id="deux"></span>
     	</p>
     	 
     	
        <script>
        function f() {
        	let k = 5;
        	document.querySelector("#un").innerHTML = k;
		}
		
		let n = 7;
		// appel de la fonction f
		f(); 
		// on inscrit la valeur de n dans le paragraphe d'identifiant deux
		// après l'appel à f :
		document.querySelector("#deux").innerHTML = n;
		
		
        </script>
    </body>
</html>

Un intérêt essentiel de cette portée est de faciliter l'écriture de programmes sans bug. Imaginez en effet que l'on ne dispose pas de cette notion de portée et que l'on soit contraint de nommer différemment toutes les variables :

Sur un code de quelques lignes comme ceux que l'on traite en exercice, cela n'est guère gênant.
Mais sur un code d'une véritable application de plusieurs milliers de lignes, le nommage des variables deviendrait vite un vrai casse-tête. Et si l'on devait reprendre un code pour l'améliorer quelques temps plus tard, les erreurs seraient inévitables, on se retrouverait avec des variables nommées identiquement alors qu'elles devraient logiquement être indépendantes. Cela provoquerait des bugs très pénibles à corriger.

Exemple 2

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> portée </title>
    </head>
    <body>
    	
    	<p> Affichage de la valeur de x dans le corps de la fonction f :
				<span id="un"> </span>
    	</p>
     	
     	<p> Affichage de la valeur de  x en dehors de f :
				<span id="deux"> </span>
     	</p>
     	 
     	
        <script>
        function f(x) {
        	x = x + 5;
        	document.querySelector("#un").innerHTML = x;
		}
		
		let x = 0;
		// appel de la fonction f
		f(x); 
		// on inscrit la valeur de x dans le paragraphe d'identifiant deux
		// après l'appel à f :
		document.querySelector("#deux").innerHTML = x;
		
		
        </script>
    </body>
</html>

Au moment où l'on exécute le corps de la fonction, le travail se fait avec une variable locale x_f dans laquelle on a recopié la valeur de x_{partie principale}. La valeur de x de la partie principale est inchangée.

Exemple 3

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> portée </title>
    </head>
    <body>
    	
    	<p> Affichage de la valeur de x dans le corps de la fonction f :
				<span id="un"> </span>
    	</p>
     	
     	
     	<p> Affichage de la valeur de x en dehors de f :
				<span id="deux"> </span>
     	</p>
     	
     	
     	
        <script>
        function f() {
        	x = x + 5;
        	document.querySelector("#un").innerHTML = x;
		}
		
		let x = 0;
		// appel de la fonction f
		f(); 
		// on inscrit la valeur de x dans le paragraphe d'identifiant deux
		// après l'appel à f :
		document.querySelector("#deux").innerHTML = x;
		
		
        </script>
    </body>
</html>

Cette fois, il n'y a ni variable x déclarée dans le corps de la fonction, ni paramètre nommé x. De ce fait le x de la partie principale n'est pas masqué par les variables locales et ce ne peut être que lui qui est affecté dans la fonction.

Il faudra autant que possible éviter un usage tel que ce dernier usage. Si l'on veut affecter une variable x à l'aide d'une fonction, on préfèrera utiliser une valeur de retour de la fonction, comme suit :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> portée </title>
    </head>
    <body>
    	
    	<p> Affichage de la valeur de x dans le corps de la fonction f :
				<span id="un"> </span>
    	</p>
     	
     	
     	<p> Affichage de la valeur de x en dehors de f :
				<span id="deux"> </span>
     	</p>
     	
        <script>
        function f(x) {
        	x = x + 5;
        	document.querySelector("#un").innerHTML = x;
        	return x;
		}
		
		let x = 0;
		// appel de la fonction f
		x = f(x); 
		// on inscrit la valeur de x dans le paragraphe d'identifiant deux
		// après l'appel à f :
		document.querySelector("#deux").innerHTML = x;
		
		
        </script>
    </body>
</html>

Ce dernier code est tout à fait équivalent au suivant :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> portée </title>
    </head>
    <body>
    	
    	<p> Affichage de la valeur de x dans le corps de la fonction f :
				<span id="un"> </span>
    	</p>
     	
     	
     	<p> Affichage de la valeur de x en dehors de f :
				<span id="deux"> </span>
     	</p>
     	
        <script>
        function f(a) {
        	a = a + 5;
        	document.querySelector("#un").innerHTML = a;
        	return a;
		}
		
		let x = 0;
		// appel de la fonction f
		x = f(x); // on calcule f(0) puis x reçoit la valeur de ce calcul
		// on inscrit la valeur de x dans le paragraphe d'identifiant deux
		// après l'appel à f :
		document.querySelector("#deux").innerHTML = x;
		
		
        </script>
    </body>
</html>