CoursIntermédiaire10 min de lecture

Les fonctions - créer tes propres commandes

Regrouper plusieurs lignes de code sous un nom, avec ou sans paramètres, pour ne plus jamais te répéter

§1.Tu as déjà utilisé des fonctions

avancer(50), tourner_droite(90), couleur("red") — toutes ces commandes que tu utilises depuis le début sont en réalité des FONCTIONS. Quelqu'un les a écrites pour toi : du code derrière qui fait le travail compliqué (calcul d'angle, dessin sur le canvas), exposé sous un nom simple avec des paramètres entre parenthèses.

Maintenant tu vas apprendre à créer TES propres fonctions. C'est probablement le concept le plus puissant que tu vas apprendre. Une fonction, c'est une façon de donner un NOM à une suite d'instructions, puis de la réutiliser autant de fois que tu veux.

Quand un programmeur expérimenté écrit du code, il passe son temps à créer des fonctions. C'est ce qui distingue un débutant qui copie-colle d'un développeur qui structure.

Premier exemple : une fonction qui dessine un carré

javascript

1// Définition de la fonction (elle ne fait rien encore)
2function carre() {
3  for (let i = 0; i < 4; i++) {
4    avancer(50)
5    tourner_droite(90)
6  }
7}
8 
9// Appel : on l'utilise comme une commande
10carre()
11tourner_droite(45)
12carre()
13tourner_droite(45)
14carre()

Résultat : 3 carrés tournés de 45° entre eux.

On a écrit le code du carré UNE seule fois. Ensuite on l'appelle 3 fois. Sans la fonction, ce serait 12 lignes au lieu de 3.

§3.Anatomie d'une fonction

function nom() { ... }: Le mot-clé function, le nom de ton choix, des parenthèses vides (pour l'instant), puis le bloc { ... } avec le code à exécuter.
Appel : nom(): Pour exécuter une fonction, tu écris son nom suivi des parenthèses. Pas de mot-clé spécial.
Définir vs appeler: Définir la fonction (avec function), c'est juste écrire le mode d'emploi : rien ne se passe. C'est l'APPEL qui exécute le code.

§4.Les paramètres : personnaliser chaque appel

Une fonction sans paramètre fait toujours exactement la même chose. Pour la rendre vraiment utile, on lui donne des PARAMÈTRES : des valeurs qu'on passe entre les parenthèses, et que la fonction utilise à l'intérieur.

Carré paramétrable

javascript

1function carre(taille) {
2  for (let i = 0; i < 4; i++) {
3    avancer(taille)
4    tourner_droite(90)
5  }
6}
7 
8carre(30)
9carre(60)
10carre(120)

Résultat : Trois carrés de tailles différentes avec UNE seule fonction.

Le paramètre taille est une variable spéciale qui prend la valeur passée à l'appel. À l'intérieur de la fonction, on l'utilise comme n'importe quelle variable.

Plusieurs paramètres

javascript

1function polygone(cotes, taille, couleurTrait) {
2  couleur(couleurTrait)
3  for (let i = 0; i < cotes; i++) {
4    avancer(taille)
5    tourner_droite(360 / cotes)
6  }
7}
8 
9polygone(3, 80, "red")     // triangle rouge
10polygone(6, 60, "blue")    // hexagone bleu
11polygone(12, 40, "green")  // dodécagone vert

Sépare les paramètres par des virgules dans la définition ET dans l'appel. L'ORDRE compte : ici cotes en premier, puis taille, puis couleur. Tu dois respecter cet ordre à chaque appel.

§8.Le mot-clé return

Jusqu'ici nos fonctions font des choses (dessiner). Mais une fonction peut aussi CALCULER une valeur et la renvoyer à celui qui l'a appelée. C'est le rôle du mot-clé return.

Sans return, la fonction fait son travail puis se termine — pas de valeur renvoyée. Avec return, elle « donne » une valeur que tu peux mettre dans une variable ou utiliser dans une expression.

Fonction qui calcule

javascript

1// Calcule l'angle intérieur d'un polygone régulier à N côtés
2function angleInterieur(cotes) {
3  return 180 * (cotes - 2) / cotes
4}
5 
6const a3 = angleInterieur(3)    // a3 vaut 60 (triangle équilatéral)
7const a4 = angleInterieur(4)    // a4 vaut 90 (carré)
8const a5 = angleInterieur(5)    // a5 vaut 108 (pentagone)

La fonction reçoit un nombre de côtés et renvoie l'angle. Le mot-clé return termine la fonction et donne la valeur calculée.

Combiner plusieurs fonctions

javascript

1function carre(t) {
2  for (let i = 0; i < 4; i++) {
3    avancer(t)
4    tourner_droite(90)
5  }
6}
7 
8function dessinerTroisCarres(taille) {
9  for (let i = 0; i < 3; i++) {
10    carre(taille)
11    lever_stylo()
12    avancer(taille + 20)
13    baisser_stylo()
14  }
15}
16 
17dessinerTroisCarres(40)

Résultat : Trois carrés alignés horizontalement.

Une fonction peut appeler d'autres fonctions. C'est exactement comme ça qu'on construit des programmes complexes : par composition.

§11.Bonnes pratiques

Un nom qui décrit ce que fait la fonction: dessinerEtoile() est bon. truc() est nul. Si tu choisis bien le nom, on comprend ton code sans commentaire.
Une fonction = une seule responsabilité: Évite les fonctions de 50 lignes qui font 10 choses. Découpe-les en plusieurs petites fonctions, chacune avec un rôle clair.
Réutilise tes fonctions: Si tu écris deux fois le même bloc de code, c'est probablement le signe qu'il faut une fonction. Principe DRY : Don't Repeat Yourself.

Démonstration du scope

javascript

1function test() {
2  let x = 100      // x existe seulement DANS test
3  avancer(x)
4}
5 
6test()
7// Ici, x n'existe pas. La ligne suivante donnerait une erreur :
8// avancer(x)   ← Erreur : x is not defined

À retenir

Une fonction = un nom + un bloc de code à exécuter.
function nom() { ... } pour définir, nom() pour appeler.
Les paramètres rendent la fonction réutilisable avec des valeurs différentes.
return renvoie une valeur calculée à l'appelant.
Une variable let dans une fonction n'existe pas en dehors (scope).
Si tu copies-colles 2 fois le même code, crée une fonction (DRY).