Fonctions JavaScript

Introduction

En JavaScript, les fonctions sont l'un des blocs de construction fondamentaux. Ce sont des blocs de code réutilisables que vous pouvez écrire une fois et exécuter plusieurs fois. L'utilisation de fonctions vous aide à organiser votre code, à le rendre plus lisible et à éviter les répétitions.

Dans ce laboratoire, vous apprendrez les bases de la création et de l'utilisation des fonctions en JavaScript. Vous construirez une fonction simple qui additionne deux nombres, et vous apprendrez comment la définir, lui passer des données, obtenir un résultat en retour et afficher ce résultat.

Définir une fonction avec le mot-clé function

Dans cette étape, vous allez définir votre première fonction. Une fonction est définie en utilisant le mot-clé function, suivi d'un nom, d'un ensemble de parenthèses (), et d'un bloc de code (le corps de la fonction) entouré d'accolades {}.

Tout d'abord, localisez le fichier script.js dans l'explorateur de fichiers sur le côté gauche du WebIDE et ouvrez-le. Nous écrirons tout notre code JavaScript dans ce fichier.

Maintenant, ajoutez le code suivant à script.js pour définir une fonction nommée addNumbers.

function addNumbers() {
  // Le code ira ici
}

Ce code crée une fonction vide. Elle ne fait encore rien, mais c'est une définition de fonction valide. Le nom addNumbers est la manière dont nous ferons référence à cette fonction plus tard.

Ajouter des paramètres à la définition de la fonction

Dans cette étape, vous allez ajouter des paramètres à votre fonction. Les paramètres sont comme des espaces réservés pour les données qu'une fonction recevra lorsqu'elle sera appelée. Vous les définissez à l'intérieur des parenthèses () dans la définition de la fonction, séparés par des virgules.

Modifions la fonction addNumbers pour qu'elle accepte deux nombres que nous voulons additionner. Nous nommerons ces paramètres num1 et num2.

Mettez à jour votre fichier script.js avec le code suivant.

function addNumbers(num1, num2) {
  // Le code ira ici
}

Maintenant, la fonction addNumbers est configurée pour recevoir deux valeurs. À l'intérieur de la fonction, vous pouvez utiliser num1 et num2 comme des variables qui contiennent les valeurs passées à la fonction.

Retourner une valeur depuis une fonction avec return

Dans cette étape, vous allez faire en sorte que la fonction effectue une action et renvoie un résultat. L'instruction return est utilisée pour spécifier la valeur que la fonction doit produire. Lorsque JavaScript atteint une instruction return, la fonction cesse de s'exécuter et la valeur spécifiée est renvoyée à l'endroit où la fonction a été appelée.

Ajoutons la logique à notre fonction pour additionner les deux paramètres et retourner le résultat.

Mettez à jour votre fichier script.js. Ajoutez l'instruction return à l'intérieur des accolades de la fonction.

function addNumbers(num1, num2) {
  return num1 + num2;
}

Maintenant, lorsque la fonction addNumbers sera exécutée, elle calculera la somme de num1 et num2 et retournera cette valeur.

Appeler une fonction avec des arguments

Dans cette étape, vous allez appeler la fonction pour l'exécuter. Définir une fonction ne l'exécute pas. Pour exécuter la fonction et obtenir un résultat, vous devez l'"appeler" ou l'"invoquer". Lorsque vous appelez une fonction, vous fournissez des valeurs réelles, appelées arguments, pour les paramètres que vous avez définis.

La valeur retournée par la fonction peut être stockée dans une variable pour une utilisation ultérieure.

Ajoutez les lignes suivantes à votre fichier script.js, sous la définition de la fonction, pour appeler la fonction addNumbers avec les arguments 5 et 10.

function addNumbers(num1, num2) {
  return num1 + num2;
}

let sum = addNumbers(5, 10);

Dans ce code, addNumbers(5, 10) appelle la fonction. La valeur 5 est passée au paramètre num1, et 10 est passée au paramètre num2. La fonction retourne 15, qui est ensuite stocké dans la variable sum.

Afficher le résultat de la fonction dans la console

Dans cette dernière étape, vous allez afficher le résultat de votre appel de fonction. Une façon courante de voir la valeur des variables ou la sortie du code en développement web est d'utiliser console.log(). Cette fonction imprime des messages dans la console de développement du navigateur web.

Ajoutez la ligne suivante à la fin de votre fichier script.js pour afficher la valeur de la variable sum.

function addNumbers(num1, num2) {
  return num1 + num2;
}

let sum = addNumbers(5, 10);

console.log(sum);

Pour voir la sortie :

1. Assurez-vous que votre fichier script.js est sauvegardé.
2. Basculez vers l'onglet Web 8080 en haut de l'interface LabEx.
3. Ouvrez les outils de développement du navigateur. Vous pouvez généralement le faire en faisant un clic droit sur la page et en sélectionnant "Inspecter" (ou "Inspect"), ou en appuyant sur la touche F12.
4. Dans le panneau des outils de développement, cliquez sur l'onglet Console.

Vous devriez voir le nombre 15 affiché dans la console. C'est le résultat retourné par votre fonction addNumbers.

Résumé

Félicitations pour avoir terminé ce laboratoire ! Vous avez appris les concepts essentiels des fonctions JavaScript.

Vous avez réussi à :

• Définir une fonction en utilisant le mot-clé function.
• Ajouter des paramètres à une fonction pour accepter des données d'entrée.
• Utiliser l'instruction return pour renvoyer une valeur depuis une fonction.
• Appeler une fonction avec des arguments pour exécuter son code et stocker le résultat dans une variable.
• Utiliser console.log() pour visualiser la sortie dans la console de développement du navigateur.

Les fonctions sont un élément central de l'écriture de code JavaScript propre, efficace et réutilisable. Continuez à pratiquer ces concepts pour vous y familiariser davantage.