If you're seeing this message, it means we're having trouble loading external resources on our website.

Si vous avez un filtre web, veuillez vous assurer que les domaines *. kastatic.org et *. kasandbox.org sont autorisés.

Contenu principal

Apprendre à coder 

Cours : Apprendre à coder  > Chapitre 1 

Leçon 9: Les fonctions
Informatique
Apprendre à coder 
Introduction à JS : dessiner et animer
Les fonctions
© 2023 Khan AcademyConditions d'utilisation (en anglais)Politique de confidentialitéUtilisation de cookies

Résumé : les fonctions

Google Classroom
Voici un résumé de ce que nous avons couvert dans ce module sur les fonctions.
Il nous arrive souvent, quand nous écrivons des programmes, de vouloir réexécuter des blocs de code, sans avoir à les réécrire entièrement. Pour cela, nous avons besoin d'un moyen pour regrouper du code, en lui donnant un nom, afin de pouvoir l'appeler, plus tard, par ce nom. C'est ce que nous appelons une fonction.
Pour créer une fonction, on doit d'abord la déclarer et lui donner un nom, comme avec une variable. Puis on la fait suivre de sa définition :
var direBonjour = function() {
};
Nous pouvons mettre n'importe quel code à l'intérieur de cette fonction - une seule instruction, plusieurs instructions - cela dépend de ce que nous voulons faire. Par exemple, dans cette fonction, nous allons juste afficher un message à un endroit aléatoire :
var direBonjour = function() {
   text("Bonjouuuuuur !", random(200), random(200));
};
Maintenant, si tout ce que nous faisons est déclarer la fonction, rien ne se passera. Pour que l'ordinateur exécute le code qui est à l'intérieur de la fonction, nous devons "appeler" la fonction, en écrivant son nom, suivie de parenthèses vides :
direBonjour();
Ainsi, nous pouvons l'appeler quand nous voulons, et autant de fois que nous voulons !
direBonjour();
direBonjour();
direBonjour();
Il nous arrive souvent de vouloir personnaliser des fonctions, pouvoir dire au programme : "Eh bien, exécute ce code, mais change quelques petites choses ici et là". Pour que de cette façon, nous ayons du code à la fois réutilisable et flexible, le meilleur des deux mondes. Nous pouvons arriver à faire cela en spécifiant des "paramètres" à une fonction, en les utilisant pour changer la façon dont elle fonctionne et en passant des arguments quand nous appelons la fonction.
Par exemple, et si nous voulions indiquer où afficher précisément un message, comme nous le faisons pour dessiner des rectangles et des ellipses ? On pourrait imaginer appeler la fonction comme cela (afin d'afficher le message à un endroit précis) :
direBonjour(50, 100);
direBonjour(150, 200);
Pour ce faire, nous devons modifier notre définition de fonction direBonjour afin qu'elle sache qu'elle va recevoir deux arguments et qu'elle les utilise :
var direBonjour = function(xPos, yPos) {
   text("Bonjour !", xPos, yPos);
};
Les arguments qui sont passés en paramètres à la fonction deviennent comme des variables à l'intérieur de la fonction. Leurs noms correspondent aux noms donnés entre parenthèses. Par exemple, on pourrait les renommer comme cela pour obtenir quelque chose de plus court :
var direBonjour = function(x, y) {
   text("Bonjour !", x, y);
};
Nos fonctions peuvent accepter un nombre quelconque d'arguments - zéro, un, deux ou plus. Nous pouvons également décider de changer la fonction pour qu'elle affiche un nom passé en paramètre :
var direBonjour = function(monNom) {
   text("Bonjour, " + monNom, random(200), random(200));
};
Et nous l’appellerions de cette manière :
direBonjour("Winston");
direBonjour("Christophe");
Nous pourrions aussi combiner ces idées et faire qu'elle accepte trois paramètres, pour le nom et pour la position :
var direBonjour = function(monNom, x, y) {
   text("Bonjour " + monNom, x, y);
};
Et l'appeler comme cela :
direBonjour("Winston", 10, 100);
Cela dépend vraiment de ce que vous voulez que votre fonction fasse, et de quelle façon vous voulez qu'elle soit personnalisée. Vous pouvez toujours commencer sans argument et ensuite en ajouter au fur et à mesure que vous en avez besoin.
En fait, vous avez déjà appelé beaucoup de fonctions jusqu'à maintenant en réalisant des dessins et des animations (avec les fonctions rect, ellipse, triangle, etc...). Toutes ces fonctions sont celles qui proviennent de la bibliothèque ProcessingJS, et que nous vous mettons à disposition dans vos programmes ici, afin que vous puissiez les utiliser en permanence. Nous avons choisi ces fonctions pour vous parce que nous pensons qu'elles sont utiles. Maintenant, c'est à votre tour de décider quelles fonctions supplémentaires vous souhaitez créer et utiliser dans vos propres programmes. Par exemple, nous fournissons la fonction ellipse, mais nous ne fournissons pas de fonction pour dessiner un chat - si votre programme a besoin de beaucoup de chats différents dans des endroits différents, vous devrez créer votre propre fonction de dessin de chat !
Les fonctions ont également d'autres capacités. Nous pouvons les utiliser pour prendre certaines valeurs (en argument), réaliser des calculs avec et retourner une nouvelle valeur. Pensez à toutes les choses que vous pouvez faire avec une calculatrice - additionner des valeurs, soustraire, calculer la racine carrée, multiplier, etc.. Tout ces calculs, par exemple, peuvent être réalisés en utilisant des fonctions qui prennent des arguments en entrée et qui, ensuite, une fois le calcul effectué, retourne le résultat. Dans ce cas, les fonctions utilisent des nombres en argument et retourne le résultat en utilisant une instruction de retour ("return" en anglais). L'exemple suivant additionne deux nombres et retourne le résultat :
var addNombres = function(num1, num2) {
  var resultat = num1 + num2;
  return resultat;
};

var somme = addNombres(5, 2);
text(somme, 200, 200); // Affiche "7"
L'instruction return fait deux choses : premièrement, elle retourne une valeur à qui a appelée la fonction (c'est pour cela qu'on a utilisé la variable somme pour stocker le résultat) ; deuxièmement elle termine immédiatement la fonction. Cela signifie que, dans l'exemple ci-dessous, la dernière ligne de code n'est jamais exécutée :
var addNombres = function(num1, num2) {
   var resultat = num1 + num2;
   return resultat;
   resultat = resultat * 2; // aucun sens !
};
Les fonctions avec retour de valeur sont très utiles pour la manipulation des données dans les programmes, et elles peuvent être combinées ensemble dans des expressions :
var grosseSomme = addNombres(2, 5) + addNombres(3, 2);
Vous pouvez même appeler des fonctions à l'intérieur d'appels de fonction, bien que cela soit un peu difficile à lire parfois :
var enormeSomme = addNombres(addNombres(5, 2), addNombres(3, 7));
Maintenant que vous savez comment créer des fonctions qui intègrent des blocs de code à réutiliser, nous devons introduire un concept important : la différence entre les variables locales et les variables globales.
Lorsque nous déclarons une nouvelle variable à l' intérieur d'une fonction, nous disons que cette variable est locale à cette fonction. Car elle est seule à pouvoir la connaître et l'utiliser (le reste du programme, en dehors de la fonction, ne le peut pas, car elle n'existe plus). Dans la fonction suivante, la variable resultatLocal est une variable locale :
var addNombres = function(num1, num2) {
  var resultatLocal = num1 + num2;
  println("Le résultat local est : " + resultatLocal);
  return resultatLocal;
};
addNombres(5, 7);
println(resultatLocal); // oh noes !
Lorsque nous exécutons ce code, nous obtenons une erreur sur la dernière ligne : "resultatLocal n'est pas définie". La variable est définie seulement à l'intérieur de la fonction, parce qu'elle y a été déclarée avec la ligne var resultatLocal =, mais pas à l'extérieur.
Lorsque nous déclarons une variable à l'extérieur de nos fonctions, nous disons que c'est une variable globale. Car toutes les fonctions peuvent y accéder et l'utiliser comme elles veulent.
var resultatGlobal;

var addNombres = function(num1, num2) {
  resultatGlobal = num1 + num2;
  println("Le résultat global est : " + resultatGlobal);
};
addNombres(5, 7);
println(resultatGlobal);
Quand nous exécutons le code ci-dessus, nous n'obtenons plus d'erreur, parce que nous avons déclaré resultatGlobal à l'extérieur de la fonction. Nous y avons accès partout.
Chaque langage de programmation est différent, mais en utilisant JavaScript, il est important de savoir que les variables ont une "portée fonctionnelle". Une fonction a accès aux variables locales qui ont été déclarées en son sein et aux variables globales qui ont été déclarées à l'extérieur, mais elle n'a pas accès aux variables locales déclarées dans les autres fonctions.

Vous souhaitez rejoindre la discussion ?

Connectez-vous
Vous comprenez l'anglais ? Cliquez ici pour participer à d'autres discussions sur Khan Academy en anglais.