Avant de plonger dans le code, prenons un moment pour réfléchir à ce qu'est une fonction. Dans notre vie quotidienne, nous utilisons constamment des "fonctions" sans même nous en rendre compte. Les recettes de cuisine sont l'un des meilleurs exemples pour comprendre ce concept.
Pourquoi ? Parce qu'une recette, comme une fonction, est un ensemble d'instructions qui :
- Peut être utilisée encore et encore
- Produit toujours le même type de résultat (si on suit bien les instructions)
- A besoin d'ingrédients spécifiques (qu'on appelle paramètres dans une fonction)
- Suit une série d'étapes précises
- Donne un résultat final
Prenons une recette de gâteau au chocolat traditionnelle. Sur le papier, elle ressemble à ceci :
RECETTE : GÂTEAU AU CHOCOLAT
Ingrédients nécessaires :
- Farine
- Œufs
- Chocolat
Instructions :
1. Mélanger les ingrédients
2. Cuire la préparation
3. Sortir le gâteau du four
Cette recette est comme un modèle, un plan. Elle ne fait rien toute seule, elle attend d'être utilisée.
En JavaScript, cette même recette s'écrirait ainsi :
function gateauChocolat(farine, oeufs, chocolat) {
// Instructions
}Prenons le temps de comprendre chaque mot :
function: Voici comment faire/exécuter votre recettegateauChocolat: C'est le nom de notre recette(farine, oeufs, chocolat): Ce sont les ingrédients dont nous avons besoin (nos paramètres)
Imaginez que vous êtes un chef pâtissier. Vous n'allez pas réinventer la recette du gâteau au chocolat chaque fois qu'un client en demande un. À la place :
- Vous avez une recette écrite une fois pour toutes
- Vous l'utilisez autant de fois que nécessaire
- Vous pouvez ajuster les quantités selon les besoins
C'est exactement ce que fait une fonction !
Quand vous voulez faire un gâteau, vous :
- Prenez votre livre de recettes
- Choisissez la recette de gâteau au chocolat
- Rassemblez les ingrédients dans les bonnes quantités
- Suivez les instructions
Par exemple, vous pourriez dire : "Je veux faire un gâteau avec 200 grammes de farine, 3 œufs et 100 grammes de chocolat."
En JavaScript, c'est exactement la même chose :
// On décide de faire un gâteau avec des quantités précises
const monPremierGateau = gateauChocolat(200, 3, 100);Décomposons cette ligne :
const monPremierGateau =: C'est comme dire "je vais faire un gâteau et le garder pour plus tard"gateauChocolat: On utilise notre recette(200, 3, 100): Ce sont nos quantités d'ingrédients (nos parametres)
Quand nous utilisons des paramètres dans une fonction, plusieurs choses importantes se produisent :
function gateauChocolat(farine, oeufs, chocolat) {
// Les paramètres deviennent des variables dans la fonction
let preparation = "Je commence la préparation avec : \n";
preparation += farine + " grammes de farine\n";
preparation += oeufs + " œufs\n";
preparation += chocolat + " grammes de chocolat";
// On peut utiliser ces variables partout dans la fonction
return preparation;
}
// Quand on appelle la fonction
const gateau1 = gateauChocolat(200, 3, 100);
console.log(gateau1)
const gateau2 = gateauChocolat(300, 4, 150);
console.log(gateau2)Analysons ce qui se passe :
- À chaque appel de la fonction, les paramètres reçoivent de nouvelles valeurs
farine,oeufs, etchocolatsont comme des variables temporaires- Ces variables n'existent que dans la fonction
- Chaque appel crée ses propres versions de ces variables
Dans une recette de cuisine, l'ordre des ingrédients est crucial. en javascript, c'est la même chose :
const bonGateau = gateauChocolat(200, 3, 100);
// 200 va dans farine
// 3 va dans oeufs
// 100 va dans chocolat
const mauvaisGateau = gateauChocolat(3, 200, 100);
// 3 va dans farine (!)
// 200 va dans oeufs (!)
// 100 va dans chocolatIl existe plusieurs cas spéciaux qu'il faut comprendre :
function gateauChocolat(farine, oeufs, chocolat) {
// Vérifions si nous avons tous les ingrédients
if (farine === undefined) {
return "Il manque la farine !";
}
if (oeufs === undefined) {
return "Il manque les œufs !";
}
if (chocolat === undefined) {
return "Il manque le chocolat !";
}
return "Gâteau préparé avec : " + farine + "g de farine, " +
oeufs + " œufs, et " + chocolat + "g de chocolat";
}
// Différents cas d'utilisation :
console.log(gateauChocolat()); // "Il manque la farine !"
console.log(gateauChocolat(200)); // "Il manque les œufs !"
console.log(gateauChocolat(200, 3)); // "Il manque le chocolat !"
console.log(gateauChocolat(200, 3, 100)); // Message complet