Aller au contenu principal

Module JS.5 – Fonctions

Objectif​

Maîtriser les fonctions JavaScript : déclarations function, arrow functions, callbacks, et toutes les variantes pour créer du code réutilisable et modulaire.

Théorie​

Function declarations​

Déclaration classique de fonction.

Syntaxe :

function nomFonction(parametre1, parametre2) {
    // Code
    return resultat;
}

Exemple :

function additionner(a, b) {
    return a + b;
}

const resultat = additionner(5, 3);  // 8

Caractéristiques :

  • Hoisted (déplacée en haut du scope)
  • Peut être appelée avant sa déclaration
  • Crée son propre contexte this

Hoisting :

// Fonctionne même si appelée avant
console.log(additionner(5, 3));  // 8

function additionner(a, b) {
    return a + b;
}

Function expressions​

Fonction assignée à une variable.

const additionner = function(a, b) {
    return a + b;
};

// Fonction anonyme
const multiplier = function(x, y) {
    return x * y;
};

Différence avec declaration :

  • Pas de hoisting
  • Doit être déclarée avant utilisation
  • Peut être anonyme
// ❌ Erreur : additionner n'est pas encore défini
console.log(additionner(5, 3));

const additionner = function(a, b) {
    return a + b;
};

Arrow functions (ES6)​

Syntaxe moderne et concise pour les fonctions.

Syntaxe de base :

const additionner = (a, b) => {
    return a + b;
};

Syntaxe courte (retour implicite) :

const additionner = (a, b) => a + b;

const carre = x => x * x;  // Un seul paramètre, pas besoin de parenthèses

const saluer = () => "Bonjour";  // Aucun paramètre

Avantages :

  • Syntaxe concise
  • Pas de binding de this (utilise le this du scope parent)
  • Parfait pour les callbacks

Différence avec function :

const objet = {
    nom: "Jean",
    
    // Function : this = objet
    saluerFunction: function() {
        console.log(this.nom);  // "Jean"
    },
    
    // Arrow : this = scope parent (window/global)
    saluerArrow: () => {
        console.log(this.nom);  // undefined
    }
};

Paramètres​

Paramètres par défaut (ES6)​

function saluer(nom, langue = "fr") {
    if (langue === "fr") {
        return `Bonjour ${nom}`;
    } else if (langue === "en") {
        return `Hello ${nom}`;
    }
}

saluer("Jean");           // "Bonjour Jean"
saluer("Jean", "en");     // "Hello Jean"

Paramètres rest (variadiques)​

Récupère tous les arguments restants dans un tableau.

function additionner(...nombres) {
    return nombres.reduce((somme, n) => somme + n, 0);
}

additionner(1, 2, 3, 4, 5);  // 15

Ancienne méthode (arguments) :

function additionner() {
    let somme = 0;
    for (let i = 0; i < arguments.length; i++) {
        somme += arguments[i];
    }
    return somme;
}

Déstructuration de paramètres​

function afficherPersonne({ nom, age, ville = "Paris" }) {
    console.log(`${nom} a ${age} ans, habite à ${ville}`);
}

afficherPersonne({ nom: "Jean", age: 30 });

Return​

Retour simple :

function obtenirNom() {
    return "Jean";
}

Retour multiple (via objet) :

function obtenirInfos() {
    return {
        nom: "Jean",
        age: 30,
        ville: "Paris"
    };
}

const { nom, age } = obtenirInfos();

Pas de return :

function afficher(nom) {
    console.log(nom);
    // Retourne undefined implicitement
}

Callbacks​

Fonction passée en argument, exécutée plus tard.

Exemple simple :

function faireQuelqueChose(callback) {
    console.log("Début");
    callback();
    console.log("Fin");
}

faireQuelqueChose(() => {
    console.log("Callback exécuté");
});

Callbacks asynchrones :

function chargerDonnees(callback) {
    setTimeout(() => {
        const donnees = "Données chargées";
        callback(donnees);
    }, 1000);
}

chargerDonnees((donnees) => {
    console.log(donnees);
});

Callbacks avec erreurs :

function operation(callback) {
    try {
        const resultat = "Succès";
        callback(null, resultat);  // Premier param = erreur
    } catch (erreur) {
        callback(erreur, null);
    }
}

operation((erreur, resultat) => {
    if (erreur) {
        console.error("Erreur :", erreur);
    } else {
        console.log("Résultat :", resultat);
    }
});

Callbacks dans les méthodes de tableau :

const nombres = [1, 2, 3, 4, 5];

nombres.forEach((n) => {
    console.log(n);
});

const doubles = nombres.map((n) => n * 2);

const pairs = nombres.filter((n) => n % 2 === 0);

Fonctions d'ordre supérieur​

Fonctions qui prennent d'autres fonctions en paramètre ou retournent des fonctions.

Exemple :

function creerMultiplicateur(facteur) {
    return function(nombre) {
        return nombre * facteur;
    };
}

const doubler = creerMultiplicateur(2);
const tripler = creerMultiplicateur(3);

doubler(5);   // 10
tripler(5);   // 15

Avec arrow functions :

const creerMultiplicateur = (facteur) => (nombre) => nombre * facteur;

const doubler = creerMultiplicateur(2);
doubler(5);  // 10

IIFE (Immediately Invoked Function Expression)​

Fonction exécutée immédiatement.

(function() {
    console.log("Exécuté immédiatement");
})();

// Avec arrow function
(() => {
    console.log("Exécuté immédiatement");
})();

Utilisation :

  • Créer un scope isolé
  • Éviter la pollution globale
  • Modules avant ES6

Closures​

Une closure est une fonction qui a accès aux variables de son scope parent même après que le parent soit terminé.

function creerCompteur() {
    let count = 0;
    
    return function() {
        count++;
        return count;
    };
}

const compteur = creerCompteur();
compteur();  // 1
compteur();  // 2
compteur();  // 3

Explication :

  • creerCompteur retourne une fonction
  • Cette fonction a accès à count
  • count persiste entre les appels

Exercice​

  1. Function declarations

    • Créez des fonctions avec différentes signatures
    • Testez le hoisting
    • Utilisez return

  2. Arrow functions

    • Convertissez des functions en arrow functions
    • Testez le binding de this
    • Utilisez la syntaxe courte

  3. Paramètres

    • Créez des fonctions avec paramètres par défaut
    • Utilisez rest parameters
    • Testez la déstructuration

  4. Callbacks

    • Créez des fonctions avec callbacks
    • Utilisez callbacks avec méthodes de tableau
    • Gèrez les erreurs dans callbacks

  5. Closures

    • Créez des closures
    • Comprenez la persistance des variables
    • Utilisez des closures pratiques

Quiz​

  1. Quelle est la différence entre function et arrow function ?

    • Aucune différence
    • Arrow function n'a pas son propre this
    • Arrow function est plus lente

  2. Que fait le hoisting ?

    • Compile le code
    • Déplace les déclarations en haut du scope
    • Optimise les performances

  3. Que sont les rest parameters ?

    • Paramètres optionnels
    • Paramètres variadiques dans un tableau
    • Paramètres par défaut

  4. Qu'est-ce qu'une closure ?

    • Une fonction anonyme
    • Fonction avec accès aux variables du scope parent
    • Une arrow function

  5. Que retourne une fonction sans return ?

    • null
    • undefined
    • Erreur

Mini défi​

Mission : Créer une bibliothèque de fonctions utilitaires

Créez un ensemble de fonctions réutilisables :

Fonctions à créer :

  1. Opérations mathématiques

    • additionner(...nombres) : Additionne plusieurs nombres
    • multiplier(...nombres) : Multiplie plusieurs nombres
    • moyenne(...nombres) : Calcule la moyenne
    • puissance(base, exposant) : Calcule base^exposant

  2. Manipulation de chaînes

    • capitaliser(texte) : Première lettre en majuscule
    • inverser(texte) : Inverse une chaîne
    • compterMots(texte) : Compte les mots
    • estPalindrome(texte) : Vérifie si palindrome

  3. Manipulation de tableaux

    • trouverMax(tableau) : Trouve le maximum
    • trouverMin(tableau) : Trouve le minimum
    • unique(tableau) : Retire les doublons
    • grouperPar(tableau, cle) : Groupe par propriété

  4. Fonctions d'ordre supérieur

    • creerValidateur(regle) : Retourne une fonction de validation
    • debounce(fonction, delai) : Retarde l'exécution
    • memoize(fonction) : Cache les résultats

  5. Callbacks

    • executerAvecRetry(fonction, maxTentatives) : Réessaie en cas d'erreur
    • mesurerTemps(fonction) : Mesure le temps d'exécution

Critères :

  • ✅ Utilisation de function et arrow functions appropriées
  • ✅ Paramètres par défaut et rest parameters
  • ✅ Callbacks et closures utilisés
  • ✅ Code bien documenté
  • ✅ Tests avec différents cas

Objectif : Maîtriser toutes les formes de fonctions JavaScript et créer une bibliothèque réutilisable.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez function, arrow functions, callbacks et closures.