Paramètres de fonction
Dans la leçon précédente, vous avez empaqueté des étapes sous un nom ; les parenthèses restaient vides. Les vrais programmes ont besoin d’entrées — un nom, un total, un message — pour que le même corps travaille avec des valeurs différentes. Ces emplacements nommés sont des paramètres. Les valeurs que vous donnez à l’appel sont des arguments.
Paramètres et arguments
Quand vous écrivez function greet(name) { … }, name est un paramètre : un nom local dans le corps. Quand vous écrivez greet("Sara"), "Sara" est l’argument : la valeur concrète qui remplit cet emplacement pour cet appel. Une même recette, des ingrédients différents.
Qui va où
📊 Paramètre contre argument
| Idée | Où vous l’écrivez | Au quotidien |
|---|---|---|
| paramètre | dans () à la déclaration |
bol vide étiqueté name |
| argument | dans () à l’appel |
ce que vous versez — "Sara" |
| ordre | de gauche à droite | premier argument → premier paramètre |
| valeur par défaut | name = "friend" dans la déclaration |
réserve si vous n’apportez rien |
| emplacement manquant | appel avec moins de valeurs | ce paramètre vaut undefined sauf défaut |
Les paramètres vivent sur la déclaration. Les arguments arrivent à chaque appel. Mélanger les deux mots est une erreur classique de débutant — gardez le tableau sous la main jusqu’à ce que l’habitude s’installe.
function greet(name) {
console.log("Hello, " + name);
}
greet("Sara");
Une entrée, un emplacement
name attend dans greet. L’appel passe "Sara". Le corps construit Hello, Sara et l’affiche. Changez l’argument, gardez le corps — c’est l’intérêt des paramètres.
function add(a, b) {
console.log(a + b);
}
add(3, 4);
Deux emplacements, deux valeurs
Listez les paramètres avec des virgules : a, b. Passez les arguments dans le même ordre : 3 va dans a, 4 dans b. Le journal montre 7. Le corps ne fixe pas ces nombres — l’appel les fournit.
function label(color, surface) {
console.log(color + " on " + surface);
}
label("red", "wall");
label("wall", "red");
L’ordre est le contrat
Le premier appel affiche red on wall. Le second wall on red — même fonction, arguments inversés. JavaScript ne devine pas quelle valeur « ressemble » à une couleur. La position décide.
function greetFriend(name = "friend") {
console.log("Hi, " + name);
}
greetFriend("Ali");
greetFriend();
Une valeur de secours si rien n’arrive
name = "friend" pose une valeur par défaut. greetFriend("Ali") utilise "Ali". greetFriend() avec des parenthèses vides utilise "friend". Le défaut protège le corps quand l’appel saute un emplacement.
function showId(id) {
console.log(id);
}
showId();
Ni valeur ni défaut
showId() ne passe rien à id. Sans défaut, id vaut undefined et c’est ce qui s’affiche. Ce n’est pas un plantage — c’est un signal : argument oublié ou défaut à ajouter.
Passer une chaîne à la page
Même motif DOM qu’avant, mais le message est construit depuis l’argument. Une fonction peut accueillir différents invités — seul l’appel change. La démo HTML ci-dessous fait exactement cela.
Montrer les paramètres sur la page
Déclarez une fonction qui prend un nom d’invité, écrivez un court bonjour dans un paragraphe, puis appelez-la avec une vraie chaîne.
<!DOCTYPE html>
<html>
<head>
<title>parameters — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
function welcome(guest) {
let box = document.getElementById("msg");
box.textContent = "Hello, " + guest;
}
welcome("Omar");
</script>
</body>
</html>
La page affiche Hello, Omar. guest était le paramètre ; "Omar" l’argument. Changez seulement la chaîne de l’appel, actualisez, lisez la nouvelle ligne. Ensuite vient return — envoyer une valeur hors de la fonction.
À vous de jouer
- Écrivez
function hello(name)qui affiche"hi "plusname, puis appelez avec votre nom. - Écrivez
function sum(x, y)qui affichex + y, puis appelez avec deux nombres. - Appelez deux fois une fonction à deux paramètres avec les arguments inversés et comparez les journaux.
- Ajoutez un défaut comme
title = "guest"et appelez une fois avec une valeur, une fois avec()vide. - Appelez une fonction à un paramètre sans argument ni défaut ; confirmez
undefineddans la console. - Dans la démo HTML, changez seulement la chaîne d’argument, actualisez, lisez le paragraphe.
Erreurs fréquentes
- Appeler avec
()vide alors que le corps a besoin d’une valeur — vous obtenezundefinedsans défaut - Inverser l’ordre des arguments en espérant que JavaScript « sache » lequel est lequel
- Confondre paramètre (déclaration) et argument (appel)
- Oublier la virgule entre deux paramètres ou deux arguments
- Chercher une valeur de retour ici — c’est la leçon suivante ; cette page ne traite que les entrées
Résumé
- Les paramètres sont des noms dans les
()de la déclaration - Les arguments sont des valeurs passées à l’appel
- L’ordre va de gauche à droite — premier avec premier, second avec second
- Les défauts remplissent un emplacement si l’appel l’omet
- Un emplacement manquant sans défaut devient
undefined - Les mises à jour de page peuvent utiliser la valeur passée dans le message
- Suite : return — envoyer un résultat hors de la fonction
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut