⚡

LES FONCTIONS EN JAVASCRIPT

Version Ultra-Détaillée - Définitions & Explications Complètes

📖 1. INTRODUCTION AUX FONCTIONS

Définition : Une fonction est un bloc de code conçu pour effectuer une tâche spécifique. Elle est réutilisable et peut être appelée (exécutée) à tout moment dans le programme.

Métaphore : Une fonction est comme une recette de cuisine :

Nom : Le nom de la recette (ex: "Faire un gâteau").
Paramètres : Les ingrédients (ex: farine, œufs, sucre).
Corps : Les instructions étape par étape (ex: mélanger, cuire, refroidir).
Retour : Le résultat (ex: le gâteau prêt à manger).

Pourquoi utiliser les fonctions ?

Réutilisabilité : Écrire une fois, utiliser plusieurs fois.
Modularité : Diviser un grand programme en petits morceaux.
Lisibilité : Des noms de fonctions clairs documentent le code.
Maintenance : Corriger un bug dans une fonction corrige tous les appels.

📝 2. DÉCLARATION DE FONCTIONS

2.1 Déclaration de Fonction (Function Declaration)

Définition : La déclaration de fonction est la façon classique de définir une fonction. Elle utilise le mot-clé function suivie du nom de la fonction, des paramètres entre parenthèses et du corps entre accolades.

Syntaxe :

function nomDeLaFonction(param1, param2) { // Corps de la fonction return resultat; }

Caractéristiques :

Hoisting : Les déclarations de fonction sont "remontées" en haut de leur scope. On peut donc les utiliser avant leur déclaration.
Nom obligatoire : La fonction doit avoir un nom.
Scope : La fonction est accessible dans tout le scope où elle est définie.

// Exemple 1 : Addition de deux nombres

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

console.log(additionner(5, 3)); // 8

// Exemple 2 : Hoisting (utilisation avant déclaration)

console.log(direBonjour("Jean")); // "Bonjour Jean"

function direBonjour(nom) { return "Bonjour " + nom; }

2.2 Expression de Fonction (Function Expression)

Définition : Une expression de fonction est une fonction assignée à une variable. La fonction peut être anonyme (sans nom) ou nommée.

Syntaxe :

// Fonction anonyme

const nomVariable = function(param1, param2) { // Corps de la fonction return resultat; };

Caractéristiques :

Pas de hoisting : L'expression n'est pas "remontée". On ne peut pas l'utiliser avant sa déclaration.
Anonyme : La fonction n'a pas besoin de nom (mais peut en avoir un pour le débogage).
Assignable : La fonction peut être réassignée à une autre variable.

// Expression de fonction (anonyme)

const multiplier = function(a, b) { return a * b; };

console.log(multiplier(4, 5)); // 20

// Expression de fonction (nommée)

const diviser = function division(a, b) { if (b === 0) { return "Division par zéro impossible"; } return a / b; };

console.log(diviser(10, 2)); // 5

// Le nom "division" n'est accessible qu'à l'intérieur de la fonction

2.3 Fonctions Fléchées (Arrow Functions - ES6)

Définition : Les fonctions fléchées (arrow functions) sont une syntaxe concise pour écrire des fonctions, introduite avec ES6. Elles utilisent la flèche =>.

Syntaxe :

// Forme basique

const nom = (param1, param2) => { // Corps de la fonction return resultat; };

// Retour implicite (une seule expression)

const nom = (param1, param2) => resultat;

// Un seul paramètre (parenthèses optionnelles)

const nom = param => param * 2;

Caractéristiques :

Syntaxe concise : Moins de code à écrire.
Retour implicite : Si le corps est une seule expression, le return est implicite.
Pas de this propre : La fonction fléchée hérite du this du contexte parent (utile pour éviter les bugs).
Ne peut pas être utilisée comme constructeur : Pas de new avec une fléchée.

// Forme classique → Forme fléchée

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

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

// Avec un seul paramètre

const double = x => x * 2;

// Avec plusieurs lignes (return explicite)

const afficherMessage = (nom, age) => { const message = `Bonjour ${nom}, vous avez ${age} ans`; console.log(message); return message; };

// Retour d'objet implicite (parenthèses obligatoires)

const creerPersonne = (nom, age) => ({ nom, age });

2.4 Comparaison des Méthodes de Déclaration

Caractéristique	Déclaration	Expression	Fléchée
Syntaxe	function nom() {}	const nom = function() {}	const nom = () => {}
Hoisting	✅ Oui	❌ Non	❌ Non
this propre	✅ Oui	✅ Oui	❌ Non (hérite)
Constructeur	✅ Oui	✅ Oui	❌ Non
Retour implicite	❌ Non	❌ Non	✅ Oui

📥 3. PARAMÈTRES ET ARGUMENTS

Définitions :

Paramètre : Une variable dans la définition de la fonction qui reçoit une valeur lors de l'appel.
Argument : La valeur réelle passée à la fonction lors de l'appel.

3.1 Paramètres par Défaut (ES6)

Définition : Les paramètres par défaut permettent de définir une valeur par défaut pour un paramètre si aucun argument n'est fourni ou si l'argument est undefined.

// Paramètre par défaut

function direBonjour(nom = "Invité") { return `Bonjour ${nom}`; }

console.log(direBonjour()); // "Bonjour Invité"

console.log(direBonjour("Jean")); // "Bonjour Jean"

// Plusieurs paramètres par défaut

function creerPersonne(nom = "Anonyme", age = 0) { return { nom, age }; }

console.log(creerPersonne()); // { nom: "Anonyme", age: 0 }

console.log(creerPersonne("Marie")); // { nom: "Marie", age: 0 }

3.2 Rest Parameters (Paramètres restants) - ES6

Définition : Le rest parameter (indiqué par ...) permet à une fonction de recevoir un nombre indéfini d'arguments sous forme d'un tableau.

// Somme de tous les arguments

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

console.log(somme(1, 2, 3, 4)); // 10

console.log(somme(5, 10)); // 15

// Avec des paramètres fixes

function afficherProduits(categorie, ...produits) { console.log(`Catégorie : ${categorie}`); console.log(`Produits : ${produits.join(', ')}`); }

afficherProduits("Électronique", "TV", "Laptop", "Smartphone");

3.3 L'Objet arguments (ancienne méthode)

Définition : arguments est un objet semblable à un tableau qui contient tous les arguments passés à une fonction. Il est disponible dans les fonctions déclarées avec function, mais pas dans les fonctions fléchées.

function afficherArguments() { console.log(arguments); // [1, 2, 3, 4] console.log(arguments.length); // 4 for (let i = 0; i < arguments.length; i++) { console.log(arguments[i]); } }

afficherArguments(1, 2, 3, 4);

Remarque : L'objet arguments est déprécié au profit du rest parameter ... qui est plus moderne et plus puissant.

📤 4. LA VALEUR DE RETOUR

Définition : La valeur de retour est le résultat que la fonction renvoie à l'endroit où elle a été appelée. On utilise le mot-clé return.

Métaphore : Le return est comme le résultat final d'une recette. Quand vous avez fini de cuisiner, vous servez le plat (retournez la valeur).

// Fonction avec retour

function additionner(a, b) { return a + b; // La fonction renvoie la somme }

const resultat = additionner(5, 3);

console.log(resultat); // 8

// Fonction sans return (retourne undefined)

function afficherMessage(message) { console.log(message); // Affiche mais ne retourne rien }

const valeur = afficherMessage("Bonjour");

console.log(valeur); // undefined

4.1 Retour Précoce (Early Return)

Définition : Le retour précoce est une technique où la fonction return immédiatement dans certaines conditions, sans exécuter le reste du code.

Avantages :

Réduit la complexité du code.
Évite les imbrications excessives (code plus lisible).
Permet de valider rapidement les conditions.

// Avec if/else (plus imbriqué)

function verifier(age) { if (age >= 18) { return "Majeur"; } else { return "Mineur"; } }

// Avec Early Return (plus lisible)

function verifier(age) { if (age < 18) { return "Mineur"; // Retour précoce } // Suite du code pour le cas age >= 18 return "Majeur"; }

🔭 5. PORTÉE (SCOPE)

Définition : La portée (scope) définit où les variables et les fonctions sont accessibles dans le code.

5.1 Scope Global

Définition : Les variables déclarées en dehors de toute fonction ou bloc sont dites globales. Elles sont accessibles partout dans le programme.

// Variable globale

const nom = "Jean";

function afficherNom() { console.log(nom); // "Jean" (accessible partout) }

afficherNom();

5.2 Scope Local (Fonction)

Définition : Les variables déclarées à l'intérieur d'une fonction sont locales à cette fonction. Elles ne sont pas accessibles en dehors.

function maFonction() { const message = "Bonjour depuis la fonction"; console.log(message); // ✅ Accès possible }

console.log(message); // ❌ Erreur : message n'est pas défini

5.3 Scope de Bloc (let/const)

Définition : let et const ont un scope de bloc ({ }). Les variables déclarées dans un bloc ne sont pas accessibles en dehors.

if (true) {

const message = "Dans le bloc";

console.log(message); // "Dans le bloc" }

console.log(message); // ❌ Erreur : message n'est pas défini

// Différence avec var (var n'a PAS de scope de bloc)

if (true) {

var ancien = "Accessible partout"; }

console.log(ancien); // "Accessible partout" ⚠️

5.4 Les Closures (Fermetures)

Définition : Une closure est une fonction qui "se souvient" de son environnement lexical, même après que la fonction a fini de s'exécuter. C'est un des concepts les plus importants de JavaScript.

Métaphore : Une closure est comme une boîte qui garde des souvenirs. Même si vous quittez la pièce (la fonction externe), la boîte (la fonction interne) se souvient de ce qu'il y avait à l'intérieur.

// Exemple de closure

function creerCompteur() { let compteur = 0;

return function() { compteur++; return compteur; }; }

const incrementer = creerCompteur();

console.log(incrementer()); // 1

console.log(incrementer()); // 2

console.log(incrementer()); // 3

// La fonction interne "se souvient" de la variable compteur

Usages des closures :

Créer des compteurs privés.
Simuler des variables privées (encapsulation).
Gérer des callbacks avec état.
Utiliser des fonctions factory.

📊 6. RÉSUMÉ - LES FONCTIONS

Concept	Définition	Exemple
Déclaration	Fonction nommée, hoistée.	function nom() {}
Expression	Fonction assignée à une variable.	const nom = function() {}
Fléchée	Syntaxe concise, pas de this propre.	const nom = () => {}
Paramètres	Variables reçues par la fonction.	function nom(a, b) {}
Paramètres par défaut	Valeur par défaut si non fournie.	function nom(a = 0) {}
Rest parameter	Récupère tous les arguments restants.	function nom(...args) {}
Return	Valeur renvoyée par la fonction.	return valeur;
Scope global	Accessible partout.	const x = 1; (en dehors)
Scope local	Accessible seulement dans la fonction.	function() { let x = 1; }
Closure	Fonction qui "se souvient" de son environnement.	return () => compteur++;

┌─────────────────────────────────────────────────────────────────┐

│ FONCTIONS - RÉCAPITULATIF │

│ │

│ ┌─────────────────────────────────────────────────────────┐ │

│ │ DÉCLARATION │ │

│ │ Déclaration → Expression → Fléchée │ │

│ │ Hoistée → Assignée → Concis, sans this │ │

│ └─────────────────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────────────────┐ │

│ │ PARAMÈTRES │ │

│ │ Obligatoires → Par défaut → Rest (...) │ │

│ └─────────────────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────────────────┐ │

│ │ RETOUR │ │

│ │ return valeur → undefined si absent │ │

│ │ Early Return → Sortie anticipée │ │

│ └─────────────────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────────────────┐ │

│ │ SCOPE │ │

│ │ Global (partout) → Local (fonction) → Bloc (let/const) │ │

│ │ Closure → "Se souvenir" de l'environnement │ │

│ └─────────────────────────────────────────────────────────┘ │

└─────────────────────────────────────────────────────────────────┘