JavaScript - Les fonctions

Pourquoi des fonctions ?

Sans fonction, on est vite obligé de copier-coller. Imagine que tu veuilles dire bonjour à trois personnes :

console.log("Bonjour Alice ! Bienvenue.");
console.log("Bonjour Bob ! Bienvenue.");
console.log("Bonjour Carol ! Bienvenue.");

Le jour où tu veux changer "Bonjour" en "Salut", tu modifies trois lignes. Avec dix personnes, dix lignes. C'est fragile et pénible.

Avec une fonction, on écrit la logique une seule fois :

function direBonjour(nom) {
    console.log(`Bonjour ${nom} ! Bienvenue.`);
}

direBonjour("Alice");
direBonjour("Bob");
direBonjour("Carol");

Une modification du message → une seule ligne à changer.

Déclarer une fonction

function nomDeLaFonction(parametres) {
    // instructions
}

Vocabulaire :

• Déclarer une fonction : l'écrire (elle ne fait encore rien).
• Appeler une fonction : l'exécuter, en mettant des parenthèses : nomDeLaFonction().
• Paramètres : les variables d'entrée que la fonction reçoit.

function direBonjour(nom) {     // déclaration
    console.log(`Bonjour ${nom}`);
}

direBonjour("Alice");           // appel

Paramètres et arguments

• Paramètres : les variables déclarées entre les parenthèses de la définition.
• Arguments : les valeurs effectivement passées lors de l'appel.

function additionner(a, b) {    // a et b sont les paramètres
    console.log(a + b);
}

additionner(3, 5);              // 3 et 5 sont les arguments

Une fonction peut avoir zéro, un, ou plusieurs paramètres :

function saluer() {
    console.log("Hello");
}

function carre(x) {
    console.log(x * x);
}

function moyenne(a, b, c) {
    console.log((a + b + c) / 3);
}

return — renvoyer un résultat

Une fonction qui se contente d'afficher n'est utile qu'une fois. Pour réutiliser un résultat, on utilise return.

function carre(x) {
    return x * x;
}

let resultat = carre(5);     // resultat vaut 25
console.log(carre(3) + carre(4));   // 9 + 16 = 25

return :

1. renvoie une valeur à l'endroit où la fonction a été appelée,
2. arrête immédiatement la fonction — toute instruction après return est ignorée.

function estMajeur(age) {
    if (age >= 18) {
        return true;
    }
    return false;             // exécuté seulement si le if est faux
}

Une fonction = un travail

Une bonne fonction fait une seule chose, et son nom le décrit clairement.

// ✅ Chaque fonction a un rôle clair
function calculerTVA(prix) {
    return prix * 0.21;
}

function formaterPrix(prix) {
    return prix.toFixed(2) + " €";
}

function afficherPrix(prix) {
    const tva = calculerTVA(prix);
    const total = prix + tva;
    console.log(formaterPrix(total));
}

Les fonctions s'enchaînent naturellement : l'une appelle l'autre. C'est ce qui rend les gros programmes lisibles.

// ❌ Une fonction qui fait tout
function faireTout(prix) {
    let tva = prix * 0.21;
    let total = prix + tva;
    let formate = total.toFixed(2) + " €";
    console.log(formate);
    // ... 50 lignes de plus
}

Quand le nom commence à devoir énumérer plusieurs verbes (calculerEtAfficher...), c'est le signal qu'il faut découper en plusieurs fonctions.

Portée des variables

Les variables déclarées dans une fonction n'existent que dans cette fonction.

function calcul() {
    let resultat = 42;
    console.log(resultat);   // OK : 42
}

calcul();
console.log(resultat);       // ❌ ReferenceError : resultat n'existe pas ici

C'est une bonne chose : chaque fonction a son petit monde, elle ne pollue pas le reste du programme. C'est aussi pour ça qu'on préfère passer des paramètres et utiliser return plutôt que des variables globales.

Fonctions fléchées (arrow functions)

Une syntaxe plus courte, très utilisée en JS moderne — surtout avec addEventListener et les méthodes de tableau.

// Syntaxe classique
function carre(x) {
    return x * x;
}

// Syntaxe fléchée équivalente
const carre = (x) => {
    return x * x;
};

// Encore plus court si le corps est une seule expression
const carre = x => x * x;

Trois choses à savoir :

• Les parenthèses autour du paramètre sont optionnelles s'il y a un seul paramètre.
• Si le corps est une seule expression, on peut omettre les {} et le return — la valeur est renvoyée automatiquement.
• On utilise très souvent const pour stocker une fonction fléchée.

Elles sont particulièrement pratiques en argument d'une autre fonction :

bouton.addEventListener("click", () => {
    console.log("Clic !");
});

Exemple complet

function estMajeur(age) {
    return age >= 18;
}

function tarifEntree(age) {
    if (age < 12) return 5;
    if (age < 18) return 8;
    return 12;
}

function accueillir(nom, age) {
    if (estMajeur(age)) {
        console.log(`Bienvenue ${nom} ! Tarif : ${tarifEntree(age)} €`);
    } else {
        console.log(`Bonjour ${nom}, tarif jeune : ${tarifEntree(age)} €`);
    }
}

accueillir("Alice", 25);     // Bienvenue Alice ! Tarif : 12 €
accueillir("Bob", 14);       // Bonjour Bob, tarif jeune : 8 €

Trois fonctions, chacune avec un rôle clair. Pour modifier les tarifs : on touche uniquement tarifEntree. Pour changer le message d'accueil : uniquement accueillir.

À retenir

• function nom(params) { ... } — déclaration. Pas exécuté tant qu'on ne l'appelle pas.
• Appel : nom(arguments) — avec les parenthèses.
• return renvoie une valeur et termine la fonction.
• Une fonction = un travail. Si le nom contient "Et", découpe.
• Les variables locales restent locales — c'est voulu, c'est ce qui rend les fonctions sûres.
• const nom = () => { ... } — syntaxe fléchée, surtout utile en argument d'une autre fonction (events, boucles…).