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 éxécution. Vous en avez déja rencontré plusieurs fois, sans y avoir pensé explicitement. Revennons à 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 block de code dans l'article notre premiere fonction. 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 à 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é comme void ou undefined dans certains cas). Par exemple, dans la fonction displayMessage()  construite dans l'article précédent, aucune valeur spécique n'est retourné comme résultat de la fonction appelée. Il y a seulement une boite qui apparait — c'est tout!

Généralement, une valeur de retour est utilisé lorsque la fonction est une étape intermédiaire dans un calcul. Pour obtenir un résultat final qui requière certaines valeurs. Ces valeurs 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 sont 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érieure de chaque itération de boucle, il y a trois appels à la fonction random() , pour générer une valeur aléatoire respectivement, pour les coordonnées x, y ainsi que 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 premè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 apparait au moment ou 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);

and 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 propre fonctions avec des valeurs de retour

  1. Pour commencer, faite une copie locale du fichier function-library.html à partir de GitHub. C'est une page HTML simple contenant un champ text  <input> et un paragraphe. Il y a également <script> un élément 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 nombre s dans le paragraphe au dessous.
  2. Ajoutons quelques fonction utiles à cet élément <script> . Ajouter les définitions de fonction suivante, sous les deux lignes de javascripte existante :
    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 évidentes — Elle retournent le carré et le cube du nombre donné en paramètre. La fonction factorial() retourne le factoriel 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éeons un gestionnaire d'évènement onchange qui s'exécute, chaque fois que l'évènement change se déclenche sur l'input de texte— lorsqu'une nouvelle valeur est entrée et envoyée dans l'input de texte  (par exemple enrée une valeur et appuyé sur Tab). Quand cette fonction anonyme s'exécute, la valeur entrée dans l'input est stpckée dans la variablenum .

    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 ca, elle retourne true, sinon, false.

    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 requises.

  4. Sauvegarder votre code, charger le dans votre navigateur et testé le.

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

A ce stade, nous aimerions que vous essayez 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 important en plus de nous avoir permis d'étudier l'utilisation de la déclaration return . De plus nous avons:

  • Examiné un autre exemple d'écriture d'erreures 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 si 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.
  • Pensée à l'idée de créer une bibliothèque de fonctions. A mesure que vous avancez dans votre carrière de developpeur, vous recommencerez les même 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 les copier sur votre nouveau code, ou même simplement l'appliquer à des 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 entermes 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 contacter 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 : tonybengue, farantDEV
Dernière mise à jour par : tonybengue,