Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Il y a un concept essentiel que nous devons aborder dans ce cours, pour être complet sur les fonctions — les valeurs de retour. Certaines fonctions ne retournent pas de valeurs significative après avoir été exécutées, mais d'autres oui, il est important de comprendre ces valeurs, comment les utiliser dans votre code et comment faire pour que vos propres fonctions retournent des valeurs utiles. Nous aborderons tout cela par la suite.

Prérequis:

Base en langage informatique, une compréhension basic de HTML et CSS, Premiers pas en JavaScript, Fonctions — blocks de code réutilisable.

Objectif: Comprendre les valeurs de retour, et comment les utiliser.

Qu'est-ce que les valeurs de retour?

Les valeurs de retour sont comme leurs nom l'indique — les valeurs retournées par une fonction après son exécution. Vous en avez déjà rencontré plusieurs fois, sans y avoir pensé explicitement. Revenons à notre code :

var myText = 'I am a string';
var newString = myText.replace('string', 'sausage');
console.log(newString);
// the replace() string function takes a string,
// replaces one substring with another, and returns
// a new string with the replacement made

Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous faisons référence à la fonction replace() dans la string myText , et lui passons deux paramètres — la valeur à trouver (string) et la valeur de remplacement (sausage). Lorsque cette fonction a fini de s'exécuter, elle retourne une valeur qui est une string avec le changement de valeur effectué. Dans le code ci-dessus, nous sauvegardons la valeur de retour comme étant la valeur de la variable newString.

Si vous regardez la page de référence MDN sur le remplacement de fonction, vous trouverez une section intitulée Valeur de retour. Il est utile de savoir et de comprendre quelles valeurs retournent les fonctions, nous essayons donc d'inclure cette information quand cela est possible.

Certaines fonctions ne retournent pas de valeurs en tant que tel (dans nos pages de référence, la valeur de retour peut être listée comme void ou undefined dans certains cas). Par exemple, dans la fonction displayMessage()  construite dans l'article précédent, aucune valeur spécifique n'est retournée comme résultat de la fonction appelée. Il y a seulement une boite qui apparaît — c'est tout !

Généralement, une valeur de retour est utilisée lorsque la fonction est une étape intermédiaire dans un calcul. Ces valeurs intermédiaires doivent être d'abord calculées par une fonction, le résultat renvoyé pourra être ensuite utilisé dans la prochaine étape du calcul.

Utiliser des valeurs de retour dans vos fonctions

Pour retourner une valeur d'une fonction que vous avez créée, vous devez utiliser... suspense... le mot-clef return . Nous avons vu son utilisation dans l'exemple random-canvas-circles.html. Notre fonction draw() dessine 100 cercles aléatoires en HTML. <canvas>:

function draw() {
  ctx.clearRect(0,0,WIDTH,HEIGHT);
  for (var i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

A l'intérieur de chaque itération de boucle, il y a trois appels à la fonction random() , respectivement pour générer une valeur aléatoire, pour les coordonnées (x, y) et pour le rayon du cercle défini . La fonction random() prend un seul paramètre — un nombre entier — et elle retourne un nombre entier aléatoire entre 0 et ce nombre. Voici à quoi cela ressemble:

function random(number) {
  return Math.floor(Math.random()*number);
}

Cela peut aussi s'écrire ainsi:

function random(number) {
  var result = Math.floor(Math.random()*number);
  return result;
}

Mais la première version est plus facile à écrire et plus compacte.

Nous retournons le résultat du calcul

Math.floor(Math.random()*number) chaque fois que la fonction est appelée. Cette valeur de retour apparaît au moment où la fonction a été appelée et le code continue. Si nous lançons par exemple, la ligne suivante:

ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);

et que les trois appels random() retournent respectivement les valeurs 500, 200, and 35, la ligne aurait pu être lancée de cette façon:

ctx.arc(500, 200, 35, 0, 2 * Math.PI);

Les appels de fonctions sur la ligne sont exécutés en premier et leurs valeurs de retour sont remplacés par les appels de fonction, avant que la ligne elle même ne soit exécutée.

Apprentissage actif: notre propre fonction avec valeur de retour

Essayons d'écrire nos propres fonctions avec des valeurs de retour

  1. Pour commencer, faites une copie locale du fichier function-library.html à partir de GitHub. C'est une page HTML simple contenant un champ texte  <input> et un paragraphe. Il y a également un élément <script> qui stocke une référence à deux éléments HTML dans deux variables. Cette page vous permet d'entrer un nombre dans le champ texte, et d'y associer différents nombres dans le paragraphe au dessous.
  2. Ajoutons quelques fonctions utiles à cet élément <script> . Ajoutez les définitions de fonction suivantes, sous les deux lignes de JavaScript existantes :
    function squared(num) {
      return num * num;
    }
    
    function cubed(num) {
      return num * num * num;
    }
    
    function factorial(num) {
      var x = num;
      while (x > 1) {
        num *= x-1;
        x--;
      }
      return num;
    }
    Les fonctions squared() et cubed() sont plutôt évidentes — elle retournent le carré et le cube du nombre donné en paramètre. La fonction factorial() retourne la factorielle du nombre donné.
  3. Ensuite nous allons inclure une manière d'imprimer des informations sur le nombre entré dans la saisie de texte. Entrez le gestionnaire d'événements suivant en dessous des fonctions existantes:
    input.onchange = function() {
      var num = input.value;
      if (isNaN(num)) {
        para.textContent = 'You need to enter a number!';
      } else {
        para.textContent = num + ' squared is ' + squared(num) + '. ' +
                           num + ' cubed is ' + cubed(num) + '. ' +
                           num + ' factorial is ' + factorial(num) + '.';
      }
    }

    Ici nous créons un gestionnaire d'événement onchange qui s'exécute chaque fois que l'événement change se déclenche sur le champ de saisie de texte — c'est-à-dire lorsqu'une nouvelle valeur est entrée et envoyée dans le champ de saisie de texte  (par exemple lorsqu'on entre une valeur puis qu'on appuie sur Tab). Quand cette fonction anonyme s'exécute, la valeur entrée dans le champ de saisie est stockée dans la variable num .

    Ensuite nous testons la condition — si la valeur entrée n'est pas un nombre, un message d'erreur s'affiche dans le paragraphe. Le test vérifie si l'expression isNaN(num) retourne true. Nous utilisons la fonction isNaN() pour vérifier si la valeur num est un nombre — si c'est le cas, elle retourne false, sinon, true.

    Si le test retourne false, la valeur num est un nombre, alors une phrase s'affiche dans le paragraphe, indiquant le carré, le cube et le factoriel du nombre. La phrase appelle les fonctions squared(), cubed(), and factorial() pour avoir les valeurs calculées.

  4. Sauvegardez votre code, chargez-le dans votre navigateur et testez-le.

Note: Si vous rencontrez des difficultés pour faire fonctionner cet exemple, vous pouvez vérifier le code en le comparant à la Version final sur GitHub (également Démonstration en direct), ou demandez-nous de l'aide.

À ce stade, nous aimerions que vous essayiez d'écrire quelque fonctions de votre choix et que vous les ajoutiez à la bibliothèque. Que diriez vous du carré ou de la racine cubique d'un nombre, ou la circonférence d'un cercle avec num en longueur du rayon ?

Cet exercice a soulevé quelques points importants en plus de nous avoir permis d'étudier l'utilisation de la déclaration return. De plus nous avons :

  • Examinez un autre exemple d'écriture d'erreurs dans nos fonctions. C'est une bonne idée de vérifier que tous les paramètres nécessaires ont été fournis, dans le bon type de données, et s'ils sont facultatifs, une valeur par défaut est fournie pour permettre cela. De cette façon, votre programme sera moins susceptible de lancer des erreurs.
  • Pensez à créer une bibliothèque de fonctions. À mesure que vous avancez dans votre carrière de développeur, vous recommencerez les mêmes choses encore et encore. C'est une bonne idée de commencer à garder votre propre bibliothèque de fonctions utilitaires que vous utilisez très souvent — vous pouvez ensuite copier ces fonctions dans votre nouveau code, ou même utiliser la bibliothèque dans les pages HTML où vous en avez besoin.

Conclusion

Donc nous l'avons vu — les fonctions sont amusantes, très utiles et bien qu'il y ait beaucoup à dire en termes de syntaxe et de fonctionnalités, elles sont assez compréhensible si elles sont étudiés avec le bon article.

Si vous n'avez pas compris, n'hésitez pas à relire l'article ou contactez-nous pour toute demande d'aide.

See also

  • Fonctions  en profondeur — Un guide détaillé couvrant des information plus avancées sur les fonctions.
  • Fonction Callback en JavaScript — Un pattern  JavaScript courant consiste à passer une fonction dans une autre fonction en tant qu'argument, qui est ensuite appelée dans la première fonction.  Cela va au delà de la portée de ce cours, mais mérite d'être étudier dans quelques temps.

 

In this module

 

Étiquettes et contributeurs liés au document

Contributeurs à cette page : andyquin, tonybengue, farantDEV
Dernière mise à jour par : andyquin,