Paramètres vs arguments en JavaScript : Comprendre la différence

Paramètre, argument : une question de contexte

Un paramètre est une variable définie dans la fonction : c’est ce qu’elle attend. Un argument est la valeur que vous lui passez lorsque vous l’appelez.

Même place dans le code, mais deux moments différents.

Définition de la fonction :

function displayRecipe(name) {
  console.log("Recette affichée : " + name);
}

Appel avec une valeur concrète :

displayRecipe("Tarte aux pommes");

Ici :

• name est un paramètre : il est défini dans la déclaration de la fonction.
• "Tarte aux pommes" est un argument : c’est la donnée réellement transmise lors de l’appel.

Rendre une fonction adaptable

Un paramètre permet d’adapter une fonction à plusieurs cas. Plutôt que créer plusieurs variantes quasi identiques, on isole les variations dans les arguments. On sépare le fond (ce que fait la fonction) de la forme (avec quelles données).

Fonction générique pour afficher un ingrédient et sa quantité :

function showIngredientQuantity(ingredient, quantity) {
  console.log(`${ingredient} : ${quantity}`);
}

Plusieurs appels avec des arguments différents :

showIngredientQuantity("Farine", "200g");
showIngredientQuantity("Beurre", "100g");
showIngredientQuantity("Sucre", "50g");

Ce principe s’applique aussi dans un cas plus visuel : par exemple, générer une fiche recette à partir de données :

function generateRecipeCard(title, imageUrl) {
  return `
    <article class="card">
      <img src="${imageUrl}" alt="${title}" />
      <h2>${title}</h2>
    </article>
  `;
}

const html = generateRecipeCard("Flan pâtissier", "/images/flan.jpg");

Ici, les paramètres title et imageUrl permettent à la fonction de s’adapter à n’importe quelle recette. On la réutilise sans changer le cœur du code.

Appel vs déclaration : bien repérer où sont les paramètres et les arguments

La déclaration précise les paramètres que la fonction attend :

function bake(recipeName, duration) {
  console.log(`Cuisson : ${recipeName} pendant ${duration} minutes`);
}

Et l’appel lui passe les arguments réels :

bake("Cake marbré", 40);
// Cuisson : Cake marbré pendant 40 minutes

• bake(recipeName, duration) → paramètres
• bake("Cake marbré", 40) → arguments

Attention à la confusion entre noms de variables

Quand on commence à écrire des fonctions, on utilise souvent le même nom pour le paramètre attendu et pour la variable réelle qu’on passe à la fonction. Sur le papier ça marche, mais dans la pratique, ça peut vite embrouiller la lecture et faire perdre le fil de qui est quoi.

Déclaration de la fonction :

function displayRecipe(recipe) {
  console.log(recipe);
}

Appel avec une variable du même nom :

const recipe = { title: "Moelleux au chocolat", time: "25 min" };
displayRecipe(recipe);

Ici, on s’y perd vite : les deux s'appellent recipe, mais ce n’est pas la même chose — l’un est un paramètre, l’autre un argument.

Il suffit de changer légèrement le nom du paramètre pour clarifier les rôles de chacun :

function displayRecipe(recipeToDisplay) {
  console.log(recipeToDisplay);
}

On garde le même appel, mais cette fois, la différence est plus lisible :

displayRecipe(recipe);

Et si un argument manque ?

Si un argument est omis, le paramètre prend la valeur undefined par défaut.

La fonction est déclarée avec un paramètre time :

function showTime(time) {
  console.log("Temps estimé : " + time);
}

Si on appelle la fonction sans passer d’argument :

showTime();
// Temps estimé : undefined

Pour éviter ça, on peut fixer une valeur par défaut directement dans le paramètre :

function showTime(time = "non précisé") {
  console.log("Temps estimé : " + time);
}

Ce qui permet de l'appeler sans argument :

showTime();
// Temps estimé : non précisé

Recevoir un nombre variable d’arguments : les paramètres rest

Parfois, on ne sait pas à l’avance combien d’arguments seront passés à une fonction. C’est le cas typique d’un logger, d’une fonction utilitaire, ou d’une addition. JavaScript permet de récupérer tous les arguments restants dans un tableau grâce à la syntaxe ...nom, qu’on appelle paramètre rest.

Cette fonction accepte un nombre variable d’arguments grâce au paramètre rest :

function logIngredients(...ingredients) {
  console.log("Ingrédients reçus :", ingredients);
}

Appel avec plusieurs valeurs :

logIngredients("beurre", "farine", "oeufs");
// Ingrédients reçus : [ 'beurre', 'farine', 'oeufs' ]

Ici, ...ingredients récupère tous les arguments sous forme de tableau. C’est très pratique quand le nombre d’arguments est variable ou inconnu.

Passer plusieurs valeurs en arguments : le spread operator

À l’inverse, si on a un tableau qu’on souhaite passer en tant qu’arguments individuels à une fonction, on peut utiliser le spread operator : ....

function bake(recipeName, time) {
  console.log(`${recipeName} — ${time} min`);
}

const data = ["Clafoutis aux cerises", 45];
bake(...data);
// Clafoutis aux cerises — 45 min

...data "déplie" le tableau et passe chaque élément comme un argument séparé. Cela fonctionne aussi avec des appels à des fonctions tierces qui attendent des arguments listés.

Résumé

• Paramètre : nom défini dans la fonction, utilisé comme variable locale.
• Argument : valeur réelle passée à la fonction à l’exécution.
• Les paramètres donnent de la flexibilité à une fonction.
• Une même fonction peut être exécutée plusieurs fois avec des arguments différents.

Distinguer paramètre et argument, c’est la base pour écrire des fonctions vraiment réutilisables et faciles à comprendre.